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:	69
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

          Latest Topics

          Collapse

          Working...
          X