Announcement

Collapse
No announcement yet.

Pulse new message button

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

    Pulse new message button

    This CSS code interacts with the existing CSS in css_global.css entry.
    It modifies the standard message count notifier button to Pulse when a new message is present.
    This makes the count more noticeable.
    When the pointer is placed over the count it returns to a solid non-pulsing button.
    Click image for larger version

Name:	Clipboard01.jpg
Views:	307
Size:	1.8 KB
ID:	1291
    I have tested it in the standard bar, and several floating bars. It worked in each.
    You can unremark the ;background-image and even add a "new message" image.

    Add to css_additional.css


    Code:
    /* Start Pulse new message button */
    .notifications-count {
      margin: 0 auto 0;
    }
    
    .notifications-count {
    
      position: relative;
      width: 16px;
      height: 16px;
      border: none;
      box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
      border-radius: 50%;
      background-color: #e84c3d;
     [COLOR=#008000][B] ;background-image[/B][/COLOR]: url(https://SOMEPLACE/SOMEIMAGE.png);
      background-size:cover;
      background-repeat: no-repeat;
      cursor: pointer;
      -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    .notifications-count:hover
    {
      -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
    }
    
    @-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
    @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
    @-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
    @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
    /* End Pulse new message button */

    #2
    nice ... some members get the original with me not to - so this is much better
    Google translated

    Comment


      #3
      This is fantastic, I forgot that I Put this code it, got a PM and it caught my attention real fast. lol

      Comment


        #4
        Thanks. It works great in vb 5.2.6
        Dotti

        Comment


          #5
          Thanks! Installed and works for vb 5.3.2

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