Announcement

Collapse
No announcement yet.

Add "Unread" Badge to Topic List View

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

    Official - Free Add "Unread" Badge to Topic List View

    By default, unread topics in Topic view shows the title in bold font. To make them more noticeable, you can add an "Unread" badge at the end of the title.

    Simply add this CSS in css_additional template:
    Code:
    /* Unread Badge on Topic View - START */
    .topic-list-container .topic-list .topic-item:not(.read) .cell-topic .topic-wrapper .topic-title:after {
       content: 'Unread';
       background: red;
       color: #fff;
       font-size: 10px;
       padding: 1px 3px;
       border-radius: 3px;
       margin-left: 5px;
       filter: drop-shadow(1px 1px 2px #333);
       vertical-align: super;
    }
    /* Unread Badge on Topic View - END */
    Adjust values according to your preferences.

    Screenshot
    Click image for larger version  Name:	unread-badge.png Views:	17 Size:	89.0 KB ID:	23790

    Enjoy!
    Last edited by glennrocksvb; 02-11-2022, 03:07 PM. Reason: Fixed overlapping issue
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Now ain't that just friggin cool.
    Nice mod

    Comment


      #3
      Glad you liked it!
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        Is there a way to fix the banner on iPhone and iPad so it does not block the text?

        Comment


          #5
          Try it again. I have updated the code in the first post.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            That did the trick.

            Comment


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Awesome! Glad it works.

            #7
            thank you very much

            Comment


              #8
              Is there anyway to link the new "unread" button to the last unread post?

              Comment


                #9
                What a great little mod!
                The Coffee is on me today, Glenn!

                I really like this. Because I have a flat theme I just removed the border radius and drop shadow and changed the color to make it fit right in. Added a border and adjusted the padding a little too.

                FlipClockFans.com

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Thanks for the coffee! โ˜•

                #10
                Originally posted by Mitch View Post
                Is there anyway to link the new "unread" button to the last unread post?
                No. Since this is just a CSS style change, it cannot change the behavior of the post title link. And besides, there's no "Go to last unread post" in vB5, right? There's "Go to last post" but not to last unread post.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #11
                  Originally posted by glennrocksvb View Post
                  And besides, there's no "Go to last unread post" in vB5, right?
                  This little arrow is the last unread post, can it link up to that?โ€ฆ

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Oh that one. I'll check and start a new topic for that one if it's possible.

                  • Snowhog
                    Snowhog commented
                    Editing a comment
                    Why would you want that? The >> button already takes you to the last post.

                  • Mitch
                    Mitch commented
                    Editing a comment
                    Thanks Glenn

                  #12
                  Originally posted by Mitch View Post
                  This little arrow is the last unread post, can it link up to that?โ€ฆ
                  I don't think it looks good because it pushes the post title farther to the right and adds "noise" that removes the focus away from the title

                  Click image for larger version

Name:	last-unread-icon.png
Views:	55
Size:	27.9 KB
ID:	23949
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Ignore my typo for "Last"

                  • Mitch
                    Mitch commented
                    Editing a comment
                    I was lookung to have the unread mod link to the arrow, instead of the theead title

                  #13
                  Click image for larger version

Name:	8D615A7C-B4BF-4CD4-93C3-EBCA4355995C.jpg
Views:	123
Size:	80.1 KB
ID:	23955 11111

                  Comment


                    #14
                    Originally posted by Mitch View Post
                    I was lookung to have the unread mod link to the arrow, instead of the theead title
                    The "Unread" badge is part of the post title link. It is not a separate link. I just "appended" the "Unread" text onto the post title using CSS pseudo element. And besides, you can't change the destination of a link using just CSS. If you want to change the last unread icon to display a label and change its location, you'd have to modify a particular template which is not allowed in vBCloud.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                    • Mitch
                      Mitch commented
                      Editing a comment
                      Thanks for checking

                    #15
                    glennrocksvb is there a CSS to enlarge the unread arrow, pictured in post #11?

                    Comment

                    Latest Topics

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