Make notification icons more noticable for new notifications

Post

Posted
Rating:
Item has a rating of 5 (Liked by EricLiked by AdamLiked by Jason VerhagenLiked by sholzyLiked by Chris GrahamLiked by pz)
#182 (In Topic #43)
Avatar
Site director
Patrick Schmalstig is in the usergroup ‘Administrators’

Add a neat little animation effect in your theme to make notification icons "flash" when unread notifications are present.

Here's a neat tutorial for those of you who find that the notification icons in Composr do not grab your user's attention well enough when they have unread notifications or private topics (by default, all it does is display at 0.5 opacity when there are no new notifications, and display at 1 opacity when there are).

This tutorial will show you how you can make these icons "flash" when there are new notifications.

No Javascript nor Flash is required, however this will only work on modern browsers that support CSS3 animations.
 

Step 1: Go to your Admin Zone in Composr.

Step 2: Go to Style -> Themes.

Step 3: Click "Edit CSS" of the theme you wish to apply this effect to.

Step 4: Choose "notifications.css" to edit.

Step 5:

FIND

Web UI

Step 6:

After that line, ADD

@keyframes countanimation {
    0%   {opacity: 0.5;}
    25%  {opacity: 0;}
    50%  {opacity: 0.5;}
    75%  {opacity: 1;}
    100% {opacity: 0.5;}
}

Step 7:

FIND

#web_notifications_button, #pts_button {

Step 8:
    

inside the div before the closing bracket }, ADD

animation-name: countanimation;
        animation-duration: 2s;
        animation-iteration-count: infinite;

Step 9:

FIND

.count_0 {

Step 10:
    

inside the div before the closing bracket }, ADD

animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused; -o-animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused; -ms-animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused; -moz-animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused;

Step 11: Save the file

Step 12: Clear your caches.

Enjoy!
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Patrick Schmalstig)
#188
Avatar
Standard member
sholzy is in the usergroup ‘Community saint’
Bookmarked!  :thumbs:

Steve
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

John Connor, Manu, Vaiva, Salman, ManojSree, amit.nigam

Forum statistics:
  • 1,298 topics, 5,830 posts, 7,064 members
  • Our newest member is flour2door
Birthdays:
Back to Top