Announcement

Collapse
No announcement yet.

Glowing Notification Bubble using CSS Animation

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

    Official - Free Glowing Notification Bubble using CSS Animation

    To make notifications to be more noticeable whenever you receive a new message or chat, you can make the red notification bubble glowing. To do this, you add the below custom CSS in css_additional template in Style Manager in AdminCP or in Sitebuilder (Edit Site ON) > Style > CSS Editor for every active theme or style your forum is using.

    Code:
    /* Glowing Notification Bubble - START */
    .notifications-count {
        border-radius: 100%;
        -webkit-animation: red-glowing 1500ms infinite;
        -moz-animation: red-glowing 1500ms infinite;
        -o-animation: red-glowing 1500ms infinite;
        animation: red-glowing 1500ms infinite
    }
    
    .notifications-count.h-hide-imp {
        -webkit-animation: none;
        -moz-animation: none;
        -o-animation: none;
        animation: none
    }
    
    @-webkit-keyframes red-glowing {
        0% {
            background-color: #D31F1F;
            -webkit-box-shadow: 0 0 3px #D31F1F;
        }
    
        50% {
            background-color: #851414;
            -webkit-box-shadow: 0 0 15px #851414;
        }
    
        100% {
            background-color: #D31F1F;
            -webkit-box-shadow: 0 0 3px #D31F1F;
        }
    }
    
    @-moz-keyframes red-glowing {
        0% {
            background-color: #D31F1F;
            -moz-box-shadow: 0 0 3px #D31F1F;
        }
    
        50% {
            background-color: #851414;
            -moz-box-shadow: 0 0 15px #851414;
        }
    
        100% {
            background-color: #D31F1F;
            -moz-box-shadow: 0 0 3px #D31F1F;
        }
    }
    
    @-o-keyframes red-glowing {
        0% {
            background-color: #D31F1F;
            box-shadow: 0 0 3px #D31F1F;
        }
    
        50% {
            background-color: #851414;
            box-shadow: 0 0 15px #851414;
        }
    
        100% {
            background-color: #D31F1F;
            box-shadow: 0 0 3px #D31F1F;
        }
    }
    
    @keyframes red-glowing {
        0% {
            background-color: #D31F1F;
            box-shadow: 0 0 3px #D31F1F;
        }
    
        50% {
            background-color: #851414;
            box-shadow: 0 0 15px #851414;
        }
    
        100% {
            background-color: #D31F1F;
            box-shadow: 0 0 3px #D31F1F;
        }
    }
    /* Glowing Notification Bubble - END */

    #2
    Looks great. The dark red pulsating was hard to see on the darker background. I have my notification bar set to transparent. Changed it to white and now it looks like a light flashing. Amazing. Thanks Glenn.

    Comment


      #3
      HUGE thanks from me!

      Not only does it work like a charm!, but for the first time I dared myself probing deeep into the Style manager, finding CSS_additional template.

      Hey, this looks like what it is supposed to be: both fun & intoxicating

      Cheers!

      Comment


        #4
        It does feel good to accomplish something despite the challenges, doesn't it?

        Comment


          #5
          Sure does!

          Now I want be able to sleep tonite ... oh, what the h!


          Cheers!

          Comment


            #6
            try the code at first post
            paste the code on
            Sitebuilder Style > CSS Editor for the Default Style and Dark style



            work on Default Style Glowing Notification Bubble
            don't work on Dark style any tip?

            i think on Dark style when the red
            Glowing Bubble
            the outside is dark in not seen is bubble?
            voyger.: In Almighty God I trust, everyone else has to provide evidence."

            Comment


              #7
              Can't say without seeing your site.

              Comment


                #8
                i used to have my forum link here and Vbullittin.com i delete it because i used to get user spammer
                will send a PM link if its ok for you
                thanks

                send a pm if you look my profile you will found there as well LOL
                voyger.: In Almighty God I trust, everyone else has to provide evidence."

                Comment


                  #9
                  The code works. It's just that you can't see the effect in dark background. You need to tweak the colors in the "red-glowing" keyframes block to light colors instead of red.

                  Comment


                    #10
                    thanks glen lovely worked nicely now
                    voyger.: In Almighty God I trust, everyone else has to provide evidence."

                    Comment


                      #11
                      Some more simple magic

                      Comment


                        #12
                        this is awesome, thank you

                        Comment

                        Working...
                        X