Make notification icons more noticable for new notifications
Core Developer
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
After that line, ADD
@keyframes countanimation {
0% {opacity: 0.5;}
25% {opacity: 0;}
50% {opacity: 0.5;}
75% {opacity: 1;}
100% {opacity: 0.5;}
}
FIND
#web_notifications_button, #pts_button {
inside the div before the closing bracket }, ADD
animation-name: countanimation;
animation-duration: 2s;
animation-iteration-count: infinite;
FIND
.count_0 {
inside the div before the closing bracket }, ADD
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 12: Clear your caches.
Enjoy!
1 guest and 0 members have recently viewed this.
