Announcement

Collapse
No announcement yet.

New Topic Pulsing Glowing Icon

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    New Topic Pulsing Glowing Icon

    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.

    Click image for larger version

Name:	Clipboard01.jpg
Views:	651
Size:	7.0 KB
ID:	1228

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

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

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

    #2
    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:

    Code:
    [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.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      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.

      Comment


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

        Comment


          #5
          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.

          Click image for larger version

Name:	Clipboard01.jpg
Views:	127
Size:	5.9 KB
ID:	1312

          Add this code to css_additional.css

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

          Comment


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

            Comment


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

              Comment


                #8
                Originally posted by glennrocksvb View Post
                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?
                Last edited by GeirS; 09-28-2017, 02:52 PM.

                Comment


                  #9
                  Do you have a new unread post in one of the forums?
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


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

                    Comment


                      #11
                      For every opening /* there's should be a closing */
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #12
                        Thanks, now it's working

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"