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.
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
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.
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 */
Comment