Announcement

Collapse
No announcement yet.

How to change online/offline icons

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

    Free Mod How to change online/offline icons

    Add this in css_additional or via Sitebuilder > Style > CSS Editor

    Using a custom images:
    Code:
    /* For online icon */
    .b-icon__status--green {
        background: transparent url('/path/to/the/image.png') no-repeat;    
        width: 15px; /* specify width if not 12px */
        height: 15px; /* specify height if not 12px */
    }
    
    /* For offline icon */
    .b-icon__status--gray {
        background: transparent url('/path/to/the/image2.png') no-repeat;
        width: 15px; /* specify width if not 12px */
        height: 15px; /* specify height if not 12px */
    }
    OR using pure CSS (for online icon only):
    Code:
    /* For online icon */
    .b-icon__status--green {
        background: #0f0;
        border-radius: 100%;
        border: 2px solid #fff;
        box-sizing: border-box;
    }
    To increase icon size (optional, applicable to both solutions above):
    Code:
    .b-userinfo__icon.online,
    .b-userinfo__icon.offline {
         -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }
    Last edited by glennrocksvb; 01-08-2018, 10:43 PM. Reason: Added pure CSS solution
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    I understand that now you are not using the image path but pure CSS. I copied the code but failed to write the image path and was not seeing anything but just glow.
    So I used inspect element on your site to get the same colour on my forum.
    Thanks for the code. It works like a charm.

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Glad it works. I will post the code as an alternative solution.

    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Posted.

    #3
    Hi Glenn, but for add the effect flashing halo like in your forum? :-)

    Comment


      #4
      Originally posted by myto2018 View Post
      Hi Glenn, but for add the effect flashing halo like in your forum? :-)
      No animated gif. No jQuery animation. No additional image. Just pure CSS3 animation coolness. :cool: Add this in css_additional template or via Sitebuilder > Style > CSS Editor: Old CSS Code: .b-icon__status--green, .profileContainer .username .vb-icon-status-online { background: #32cd32; /* green, change as needed

      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #5
        Tnks! Glenn

        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 "|||"