Free Mod Move Online icon Next to Username in Postbit

[glennrocksvb]

With the way the HTML markup for online icon in postbit is structured, it's not possible to move the icon next to the username using just pure CSS. You'd need to modify the template to physically move the icon. Editing templates is not recommended as it may result in template merge conflicts that you need to resolve every time you upgrade. That's not to say you can't, just not recommended. This is true for self-hosted vB5 and not for vBCloud which doesn't allow editing templates.

So if you have permission to edit templates and are okay editing templates and resolving merge conflicts whenever you upgrade, then this mod is for you.

1. Login to AdminCP.
2. Navigate to Styles > Style Manager.
3. Search for "conversation_userinfo" template.
4. Edit the template.
   
   - Find this line:
   

   {vb:template pmchat_userinfo_link, conversation={vb:raw conversation}}

   The above line is for the vBMessenger icon next to the username if vBMessenger is enabled.
   
   - Add the below code before or after the above line depending on the order you want the online icon to be.
   

   <span class="b-icon b-icon__status--<vb:if condition="$conversation['online'] == 'online'">green<vb:else />gray</vb:if> h-margin-left-m"></span>

   - Find this block of code and wrap it around <vb:comment> and </vb:comment> tags to comment them out.

   	<vb:if condition="$conversation['online'] == 'online'">
   	{vb:set olstatus, ' online'}
   	<vb:else />
   	{vb:set olstatus, ' offline'}
   	</vb:if>
   	<li class="b-userinfo__icon h-left OLD__online-status{vb:raw olstatus}" title="<vb:if condition="$olstatus == ' online'">{vb:rawphrase x_is_online_now, {vb:raw conversation.authorname}}<vb:else />{vb:rawphrase x_is_offline, {vb:raw conversation.authorname}}</vb:if>"><span class="b-icon b-icon__status--<vb:if condition="$conversation['online']=='online'">green<vb:else />gray</vb:if>"></span></li>

5. Save the template.
6. Repeat steps 3-5 for every active style your forum is using.

This is a free mod. Please consider donating. Thank you!

[faustvasea]

Do you know which line to look for to get online icon to usertitle (Administrator) ?

Thanks

[faustvasea]

The code works perfectly, but now I do have 2 online icons, something I missed ?

Where to look to delete bottom icon ?

[glennrocksvb]

I think you missed this step:

- Find this block of code and wrap it around <vb:comment> and </vb:comment> tags to comment them out.

<vb:if condition="$conversation['online'] == 'online'">
{vb:set olstatus, ' online'}
<vb:else />
{vb:set olstatus, ' offline'}
</vb:if>
<li class="b-userinfo__icon h-left OLD__online-status{vb:raw olstatus}" title="<vb:if condition="$olstatus == ' online'">{vb:rawphrase x_is_online_now, {vb:raw conversation.authorname}}<vb:else />{vb:rawphrase x_is_offline, {vb:raw conversation.authorname}}</vb:if>"><span class="b-icon b-icon__status--<vb:if condition="$conversation['online']=='online'">green<vb:else />gray</vb:if>"></span></li>

[faustvasea]

Thanks Glen. I'll have a look at this later.

[XGC xVIPERx XI]

What other colors can be used other than green?

[glennrocksvb]

Any color you want.

.b-icon__status--green, .profileContainer .username .vb-icon-status-online {
    background: [B][COLOR=#FF0000]red[/COLOR][/B];
    border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

[XGC xVIPERx XI]

Awesome thanks!

[semihcannet]

Now it's beautiful.

[MrKain]

Does this work on vb 5.5.1? Not finding
{vb:template pmchat_userinfo_link, conversation={vb:raw conversation}}

[glennrocksvb]

Are you looking at the correct template?

[MrKain]

Yes, In the right file, neither of the two things I should find in the template is there... I can send pics if you like.. style manager, default, edit templates, click conversation template drop down to conversation_userinfo, looked for and and control F to find it, nothing.

[glennrocksvb]

Did you click inside the template first before doing CTRL+F?

[MrKain]

Oh man that did it! Thanks allot works great!

[apreuteseicornel]

Hi Glenn! May I know how to add it on the left-top of the postbit? (Next to the avatar)!
I'm using your Online Glowing MOD and it creates light there and not where this code actually sets the online icon! Thank you very much!