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

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

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

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

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

                  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


                          #13
                          Awesome. Thanks much.
                          I made mine blue to fix the theme. I also used this with b-button and b-button--primary to make the login button in the toolbar glowey. Very cool.
                          Works in vB 5.6.0.

                          Comment


                            #14
                            thanks working on vb5.6.0

                            Comment


                              #15
                              it works on 5.6.3
                              thank you

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