New Topic Pulsing Glowing Icon

[Felix2]

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).

/* 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 */

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

                <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>

replace with

                <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>

Enjoy!

[glennrocksvb]

By default, CSS styles all posts as unread unless the root element (<tr>) of the post has read class. There is no corresponding unread class. If a row has no read class, then it means the post is unread. So if you want to make the icon of the unread posts glow, you have to reverse your logic and also you don't have to modify the display_Topics_item template.

I have applied your CSS in this forum without modifying any template using this simplified CSS:

[COLOR=#008000]/* glow all posts by default */[/COLOR]
.topic-item .vb-icon-topic-status {
    background-color: #114A11;
    border-radius: 4px;
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}

[COLOR=#008000]/* then override and reset read posts to original style */[/COLOR]
.topic-item.read .vb-icon-topic-status {
    background-color: transparent;
    border-radius: 0;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

@-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; }
}

As you may have noticed by now, I always try to avoid editing templates as much as possible because edited templates would be a maintenance headache in the future. The number of custom changes to the templates easily pile up as you customize your site. I'm not saying I don't edit templates at all. I also do it but I do it sparingly, only if unavoidable. For example, I edited bbcode templates to accomplish this mod.

[Felix2]

Nicely done. Mine works, but yours is better. You have a better grasp of vB and CSS for it.
Sometimes I just take a hammer to the code because I don't do all the updates like most. I do what works for me
Greatly appreciate the improved code.

[Calamity]

Thank you so much for posting this. Another awesome feature added to my website.

[Felix2]

In addition to this, sub-forums with new topics in them can be lit up too.
Due to how tiny the default icons are for sub-forums, I have removed the radius code here.



Add this code to css_additional.css

/* Start glow all new sub-posts by default */
.icon.new {
    background-color: #114A11;
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}
/* End glow all new sub-posts by default */

[IggyP]

i hate to be one of these guys lol...i have this on my vb5 thats great and love it but i am having trouble (naturally) to apply it to vb4...

i am mainly after glowing unread forums....

can anyone tell me what the class is? something like >> .forumbit_post .foruminfo .forumicon.new

or something?? i have some using pseudo class as well on my vb5, but couldnt get that way to work either

[gcombe74]

is this mod supposed to light up the home page forums as well.. I used to have on that made the one on the home page pulse.. any tips on where the code to do that is on the home page ones?

[GeirS]

have applied your CSS in this forum without modifying any template using this simplified CSS:

I've added only YOUR lines in CSS_additional.css (added the lines *below* what I had previously pasted there [Glowing Notification Bubble]), but I didn't make it glow.: was that intentional - or have I missed something? Should I alter the "Edit template, edit display_Topics_item" as well?

[glennrocksvb]

Do you have a new unread post in one of the forums?

[GeirS]

Yes, I have a "ghost" user labeled Test - and I (as admin) checked out, logged in as "Test" - wrote something, checked out ... and in again as myself. I could see there were a blue New Post, but it didn't pulsate.

On the other hand: I read somewhere else here on your forum that some between 2 different coding in CSS_additional.css had been separated with /* (or rather /////// ) : may the fault lies here?
I've put 2 /* between Glowing Notification Bubble and Glow All Post, like this: Would that cause the err?



/* Glowing Notification Bubble - END */
/*
/*
/* glow all posts by default */

[glennrocksvb]

For every opening /* there's should be a closing */

[GeirS]

Thanks, now it's working