This mod will seperate the code that displays icons for new vs read topics.
It will add CSS to slightly round corners and apply a pulsating blue glow only on new topics.
Add this code to css_additional.css
The violet portion rounds the corners (which looks better on glowing items).
Next, we need to create a conditional test for read vs. unread and only glow the unread.
Edit template, edit display_Topics_item
Locate lines 313-323
replace with
Enjoy!
It will add CSS to slightly round corners and apply a pulsating blue glow only on new topics.
Add this code to css_additional.css
The violet portion rounds the corners (which looks better on glowing items).
Code:
/* Start New message icon Glows */ [COLOR=#800080].NewGlow { background-color: #114A11; -webkit-border-radius: 4px; border-radius: 4px; border: none; color: #FFFFFF; text-align: center; text-decoration: none; }[/COLOR] @-webkit-keyframes glowing { 0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; } } @-moz-keyframes glowing { 0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; } } @-o-keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } @keyframes glowing { 0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } 50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; } 100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; } } .NewGlow { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; } /* End New message icon Glows */
Edit template, edit display_Topics_item
Locate lines 313-323
Code:
<vb:if condition="$vboptions['threadmarking'] > 0 AND $user[userid] > 0 AND !empty($readtime) AND $readtime < $lastcontent AND !$isRedirect"> {vb:set newpostAvailable, 1} <vb:if condition="$iconTooltip != ''"> {vb:strcat iconTooltip, ' '} </vb:if> {vb:strcat iconTooltip, {vb:phrase new_posts}} <vb:else /> {vb:set newpostAvailable, 0} </vb:if> <span class="vb-icon vb-icon-topic-status h-hide-on-small" title="{vb:raw iconTooltip}"></span>
Code:
<vb:if condition="$vboptions['threadmarking'] > 0 AND $user[userid] > 0 AND !empty($readtime) AND $readtime < $lastcontent AND !$isRedirect"> {vb:set newpostAvailable, 1} <vb:if condition="$iconTooltip != ''"> {vb:strcat iconTooltip, ' '} </vb:if> {vb:strcat iconTooltip, {vb:phrase new_posts}} <span class="[B]NewGlow [/B]vb-icon vb-icon-topic-status h-hide-on-small" title="{vb:raw iconTooltip}"></span> <vb:else /> {vb:set newpostAvailable, 0} <span class="vb-icon vb-icon-topic-status h-hide-on-small" title="{vb:raw iconTooltip}"></span> </vb:if>
Comment