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;
}

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

[glennrocksvb]

That would work.

[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;
}

[glennrocksvb]

For vBCloud, you can't do that as most of the template variables are not supported due to templates being text-only type.

[glennrocksvb]

Recently, they made some template coding supported in vBCloud but I think using vb:stylevar is not supported yet.

[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.