Announcement

Collapse
No announcement yet.

Move Online icon Next to Username in Postbit

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod 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!
    Last edited by glennrocksvb; 01-19-2022, 01:23 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #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>
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        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: [B][COLOR=#FF0000]red[/COLOR][/B];
                  border-radius: 100%;
                  border: 2px solid #fff;
                  box-sizing: border-box;
              }
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Awesome thanks!

                Comment


                  #9
                  Now it's beautiful.
                  Click image for larger version

Name:	Taslak.png
Views:	641
Size:	26.2 KB
ID:	17048


                  Comment


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

                    Comment


                      #11
                      Are you looking at the correct template?
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #12
                        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.

                        Comment


                          #13
                          Did you click inside the template first before doing CTRL+F?
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment


                            #14
                            Oh man that did it! Thanks allot works great!

                            Comment


                              #15
                              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!

                              Comment

                              Users Viewing This Page

                              Collapse

                              There is 1 user viewing this forum topic.

                              • Guest Guest

                              Latest Posts

                              Collapse

                              Working...
                              X
                              Searching...Please wait.
                              An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                              Please push the back button and reload the previous window.'
                              An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                              Please push the back button and reload the previous window.'
                              An internal error has occurred and the module cannot be displayed.
                              There are no results that meet this criteria.
                              Search Result for "|||"