To make notifications to be more noticeable whenever you receive a new message or chat, you can make the red notification bubble glowing. To do this, you add the below custom CSS in css_additional template in Style Manager in AdminCP or in Sitebuilder (Edit Site ON) > Style > CSS Editor for every active theme or style your forum is using.
Code:
/* Glowing Notification Bubble - START */ .notifications-count { border-radius: 100%; -webkit-animation: red-glowing 1500ms infinite; -moz-animation: red-glowing 1500ms infinite; -o-animation: red-glowing 1500ms infinite; animation: red-glowing 1500ms infinite } .notifications-count.h-hide-imp { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none } @-webkit-keyframes red-glowing { 0% { background-color: #D31F1F; -webkit-box-shadow: 0 0 3px #D31F1F; } 50% { background-color: #851414; -webkit-box-shadow: 0 0 15px #851414; } 100% { background-color: #D31F1F; -webkit-box-shadow: 0 0 3px #D31F1F; } } @-moz-keyframes red-glowing { 0% { background-color: #D31F1F; -moz-box-shadow: 0 0 3px #D31F1F; } 50% { background-color: #851414; -moz-box-shadow: 0 0 15px #851414; } 100% { background-color: #D31F1F; -moz-box-shadow: 0 0 3px #D31F1F; } } @-o-keyframes red-glowing { 0% { background-color: #D31F1F; box-shadow: 0 0 3px #D31F1F; } 50% { background-color: #851414; box-shadow: 0 0 15px #851414; } 100% { background-color: #D31F1F; box-shadow: 0 0 3px #D31F1F; } } @keyframes red-glowing { 0% { background-color: #D31F1F; box-shadow: 0 0 3px #D31F1F; } 50% { background-color: #851414; box-shadow: 0 0 15px #851414; } 100% { background-color: #D31F1F; box-shadow: 0 0 3px #D31F1F; } } /* Glowing Notification Bubble - END */
Comment