Free Mod Move the Online Icon Under the Avatar on Postbit

[glennrocksvb]

The online icon appears at the bottom of postbit. In a long post, this icon is not visible that you have to scroll down to see if the user is online or not. This icon should be positioned closer to the avatar.



To move the online icon under the avatar as shown in the above screenshot, put this custom CSS in css_additional.css template:

.l-desktop .b-userinfo__icons {
    position: absolute;
    left: 109px;
    top: 92px;
}

For vB6, add this additional CSS to adjust the top position of the online icon for "Selected Answer" posts:

/* For "Selected Answer" Posts*/
.l-desktop .b-post .answer-label ~ .b-post__grid-container .b-userinfo__icons {
    top: 129px;
}

Adjust the left and top values as needed. The values used are based on the default style. You may need to tweak them if you have a customized style/theme.

[Mitch]

Once I set it to the correct spot, it changes depending on the users profile picture size and so forth. In other words it is not in the same spot for all users. Ends up blocking info and things

[glennrocksvb]

Unfortunately, it's not going to work for avatars with different sizes. The position is not relative to the avatar but to the container column.

[glennrocksvb]

It would require a JavaScript solution to calculate the position based on the size of the avatar.

[Blackhorse]

I think for different sizes, Corners will be the best place

[zohall]

and for rtl themes

.l-desktop .b-userinfo__icons {
position: absolute;
right: 25px;
top: 92px;
}​

[glennrocksvb]

For self-hosted vB, you can use the stylevar to make the left/right a variable and get automatically replaced based on the LTR/RTL direction.

.l-desktop .b-userinfo__icons {
    position: absolute;
    {vb:stylevar left}: 109px;
    top: 92px;
}

[mito22]

On vb 6.0.6 work the position... but.. appear always of.. BLUE... not red or green...

[glennrocksvb]

This mod is just for moving the online icon.

If you want to change its color, then update the online_status_online_color stylevar in the Style Variable Editor. If you also want to change the offline color, then update online_status_offline_color.

[tikplenty]

.b-userinfo__icons {
position: absolute;
bottom: 250px;
left: 130px;
}

This is the most logical way

[glennrocksvb]

You can't use "bottom" because the height of the postbit is not fixed, it's dependent on the post content

[2Evolved]

Found a placement problem on "answered" position.

[glennrocksvb]

2Evolved, I posted the new CSS code in the first post to adjust the online icon top position for "Selected Answer" posts.

[2Evolved]

Thank you so much!