Make notification icons more noticable for new notifications
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; -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 12: Clear your caches.
Enjoy!
- Need support for version 10? The core development team is no-longer offering it for free (unless it's a critical bug that breaks your entire site or a serious security hole). Please consider hiring me instead if you need v10 support or a non-critical bug fix. Or, ask the community in the forums!
- Do you enjoy Composr? Please consider contributing your talent to the project or recommending Composr to others. Even small contributions make a big impact in the Composr community.
- Do you have feedback for us? You can report bugs, suggest features, or give feedback on the Free support options page.
- Do you need professional service with your Composr website? Please consider contracting me for your needs through my company, PDStig, LLC. Doing so will also help fund Composr development.
- Want to watch live streams of me developing Composr CMS? Please subscribe to me on Twitch to be notified when I stream. Composr development streams are usually spontaneous / not scheduled in advance as work priorities come first.
