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

    Official - Free 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:

    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;
        }
    }
    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; 09-25-2018, 07:19 AM. Reason: Updated CSS to make it also work on Profile page online icon

    #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

            Comment


              #8
              Good, i like this mod

              Comment


                #9
                Works great! Thanks.
                Web Hosting UK | Fastest Hosting | WordPress Hosting | Reseller Hosting | cPanel Hosting | Managed VPS | SSD Hosting | Web Hosting Forum

                Comment


                  #10
                  Fantastic. Working perfectly.

                  Comment


                    #11
                    Great! Works great on my forum using v5.2.6
                    Dotti
                    www.dwlz.com
                    www.dwlz2.com/forum/

                    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:

                        https://www.vbulletin.com/forum/foru...93#post4378293

                        Comment


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

                          Comment


                            #15
                            Thanks it's working for me!

                            Comment

                            Working...
                            X