Announcement

Collapse
No announcement yet.

How to make the Green Online icon "Glow" using Pure CSS

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

    Free Mod How to make the Green Online icon "Glow" using Pure CSS

    No animated gif. No jQuery animation. No additional image. Just pure CSS3 animation coolness.

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

    Old CSS Code:
    Code:
    .b-icon__status--green,
    .profileContainer .username .vb-icon-status-online {
        background: #32cd32; /* green, change as needed */
        border-radius: 100%;
        border: 2px solid #fff;
        box-sizing: border-box;
    }
    
    .b-icon__status--green:after,
    .profileContainer .username .vb-icon-status-online:after {
        content: '';
        border: 10px solid #6e9d00;
        background: transparent;
        border-radius: 40px;
        height: 40px;
        width: 40px;
        position: absolute;
        top: -24px; /* you may have to tweak this if you move it from the default position */
        left: -22px; /* you may have to tweak this if you move it from the default position */
        z-index: 1;
        opacity: 0;
        -webkit-animation: glow 3s ease-out infinite;
        animation: glow 3s ease-out infinite;
    }
    
    .profileContainer .username .vb-icon-status-offline {
        background-position: -320px -112px;
    }
    
    .profileContainer .username .vb-icon-status-online:after {
        left: -26px;
        top: -26px;
    }
    
    .profileContainer .username .vb-icon {
        margin-left: 5px;
        position: relative;
        overflow: visible;
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }
    
    @-webkit-keyframes glow {
        0% {
            -webkit-transform: scale(0);
            opacity: 0;
        }
    
        25% {
            -webkit-transform: scale(0);
            opacity: .1;
        }
    
        50% {
            -webkit-transform: scale(.1);
            opacity: .3;
        }
    
        75% {
            -webkit-transform: scale(.5);
            opacity: .5;
        }
    
        100% {
            -webkit-transform: scale(1);
            opacity: 0;
        }
    }
    
    @keyframes glow {
        0% {
            transform: scale(0);
            opacity: 0;
        }
    
        25% {
            transform: scale(0);
            opacity: .1;
        }
    
        50% {
            transform: scale(.1);
            opacity: .3;
        }
    
        75% {
            transform: scale(.5);
            opacity: .5;
        }
    
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }

    Updated CSS code for vB 5.6.6+
    NOTE: Some adjustments may be needed. Please see inline comments enclosed in /* */
    Code:
    /* Online icon "Glow" - START */
    .b-userinfo__icon.online,
    .b-userinfo__icon.offline {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }
    .b-icon__status--green {
        background: #0f0 !important; /* adjust online dot icon color as desired */
        border-radius: 100%; /* set to 0 if you want the online dot icon to be a square and not round */
        border: 2px solid #fff;
        box-sizing: border-box;
    }
    .b-icon__status--green:after {
        content: '';
        border: 10px solid #6e9d00; /* adjust glow color as desired */
        background: transparent;
        border-radius: 40px;
        height: 40px;
        width: 40px;
        position: absolute;
        top: -22px; /* adjust top coordinate to move glow vertically in postbit */
        left: -22px; /* adjust left coordinate to move glow horizontally in postbit */
        z-index: 1;
        opacity: 0;
        -webkit-animation: glow 3s ease-out infinite;
        animation: glow 3s ease-out infinite
    }
    .profile_sidebar_content .online-status.online {
        position: relative;
    }
    .profile_sidebar_content .b-icon__status--green:after {
        top: -19px; /* adjust top coordinate to move glow vertically on Profile page */
        left: -24px /* adjust left coordinate to move glow horizontally on Profile page */
    }
    @-webkit-keyframes glow {
        0% {
            -webkit-transform: scale(0);
            opacity: 0
        }
        25% {
            -webkit-transform: scale(0);
            opacity: .1
        }
        50% {
            -webkit-transform: scale(.1);
            opacity: .3
        }
        75% {
            -webkit-transform: scale(.5);
            opacity: .5
        }
        100% {
            -webkit-transform: scale(1);
            opacity: 0
        }
    }
    @keyframes glow {
        0% {
            transform: scale(0);
            opacity: 0
        }
        25% {
            transform: scale(0);
            opacity: .1
        }
        50% {
            transform: scale(.1);
            opacity: .3
        }
        75% {
            transform: scale(.5);
            opacity: .5
        }
        100% {
            transform: scale(1);
            opacity: 0
        }
    }
    /* Online icon "Glow" - END */
    Demo:
    See the online icon in this forum.

    This is a free mod. Please consider donating if you find this useful.

    Enjoy!
    Last edited by glennrocksvb; 01-18-2022, 03:33 PM. Reason: Updated CSS Code for vB 5.6.6+
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    I added this a while ago! great mod!

    Comment


      #3
      Could this be used for New Topic Icons Glow and Subtopic?

      There is a glow posted up, but I really enjoy this effect.

      Comment


        #4
        Originally posted by MokeyII View Post
        Could this be used for New Topic Icons Glow and Subtopic?

        There is a glow posted up, but I really enjoy this effect.
        Correction, I did stumble across someone's site and saw they had it as a notifier on new post icons. It looked good, I've been tinekering around, but unfortunately I know too little to get it to work.

        Comment


          #5
          Unable to see the code, Cant wait to try this one.

          Comment


          • Nintenex
            Nintenex commented
            Editing a comment
            I got it installed just now and it looks amazing, I cannot wait for the rest of the members to see it.

          #6
          No one online so i can not see it glowing ^^

          Comment


            #7
            Right click on the gray offline icon and choose "Inspect element". Then change b-icon__status--gray to b-icon__status--green
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #8
              Good, i like this mod

              Comment


                #9
                Works great! Thanks.
                HostXNow - UK Web Hosting

                Comment


                  #10
                  Fantastic. Working perfectly.

                  Comment


                    #11
                    Great! Works great on my forum using v5.2.6
                    Dotti

                    Comment


                      #12
                      Works perfect! TY, Glenn

                      I'm on vB5.3.2

                      Cheers!

                      Comment


                        #13
                        If you want to change the color of the green online icon, you can do so using pure CSS without creating a new image or sprite.

                        Code:
                        .b-icon__status--green {
                            background: #0f0; /* lime color; change color as desired */
                            border-radius: 100%;
                            border: 2px solid #fff;
                            box-sizing: border-box;
                        }
                        If you notice the online icon on this site, I changed it to lime to make it stand out more against the blue background.

                        I originally posted this code at vbulletin.com:

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

                        Comment


                          #14
                          It's so chic. Loved it. Thank you

                          Comment


                            #15
                            Thanks it's working for me!

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