Announcement

Collapse
No announcement yet.

Move Online icon Next to Username in Postbit

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Move Online icon Next to Username in Postbit

    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:
      Code:
      {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.
      Code:
      <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.
      Code:
      	<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!

    If you are not comfortable editing the templates and if you want us to do it for you, please consider purchasing product installation addon service below.

    Need help or not comfortable installing this mod? Purchase the installation service below:

    Product Installation Add-On: $20
    Purchase this product add-on to get professional installation of this mod from us.

    Buy Now Add to Cart View Cart
    Last edited by glennrocksvb; 12-24-2018, 06:26 PM.

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

    Thanks

    Comment


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

      Where to look to delete bottom icon ?

      Comment


        #4
        I think you missed this step:

        Originally posted by glennrocksvb View Post
        - Find this block of code and wrap it around <vb:comment> and </vb:comment> tags to comment them out.
        Code:
        <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>

        Comment


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

          Comment


            #6
            What other colors can be used other than green?

            Comment


              #7
              Any color you want.
              Code:
              .b-icon__status--green, .profileContainer .username .vb-icon-status-online {
                  background: red;
                  border-radius: 100%;
                  border: 2px solid #fff;
                  box-sizing: border-box;
              }

              Comment


                #8
                Awesome thanks!

                Comment

                Working...
                X