Announcement

Collapse
No announcement yet.

Display "Last post" label next to the blue "»" icon in Topic List View

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

    Free Mod Display "Last post" label next to the blue "»" icon in Topic List View

    By default, Topic List view displays the blue "»" icon to go to the last post. But for some forum users, they might not know what this icon means unless they mouseover it to show the "Go to last post" tooltip. To make it more visually obvious, you can add a text label by simply adding this in css_additional.css in AdminCP or Sitebuilder Style Editor.

    For Self-Hosted vB5:
    Code:
    /* Go to Last Post Icon with Text - START */
    .go-to-last-post {
       overflow: visible;
       text-indent: 0;
       background: no-repeat;
       height: auto;
       width: auto;
       margin-left: 2px;
    }
    
    .go-to-last-post::after {
       content: 'Last post'; /* Change text as desired */
       font-size: 11px;
    }
    
    {vb:set imgdir_spriteiconsvb, {vb:stylevar imgdir_spriteiconsvb}}
    <vb:if condition="!empty($imgdir_spriteiconsvb)">
       {vb:set spritepath, {vb:concat
          {vb:stylevar imgdir_spriteiconsvb},
          "/sprite_icons_vb_",
          {vb:stylevar textdirection},
          ".png?v=",
          {vb:var simpleversion}
       }}
    <vb:else />
       {vb:set spritepath, {vb:spritepath sprite_icons_general.svg}}
    </vb:if>
    
    .go-to-last-post::before {
       content: '';
       background: transparent url("{vb:raw spritepath}") no-repeat -320px -208px;
       width: 13px;
       height: 9px;
       display: inline-block;
       position: relative;
       top: 0.5px;
    }
    /* Go to Last Post Icon with Text - END */
    For Self-hosted vB6 and vBCloud:
    Add the below code in css_additional.css template.
    Code:
    /* Go to Last Post Icon with Text - START */
    .go-to-last-post::after {
       content: 'Last post'; /* Change text as desired */
       font-size: 11px;
       position: relative;
       bottom: 1px;
    }​
    /* Go to Last Post Icon with Text - END */
    For those forums that have global underlined links style on default or hover state, you will see an underline in the space between the icon and the "Last post" text.
    Click image for larger version  Name:	link-underline.png Views:	0 Size:	15.7 KB ID:	23890

    To fix it, add this additional CSS: (this applies to both self-hosted and vBCloud)

    If underline appears on hover state of hyperlinks:
    Code:
    .go-to-last-post:hover {
      text-decoration: none !important;
    }
    
    .go-to-last-post:hover::after {
      text-decoration: underline !important;
    }
    OR if underline appears on default state of hyperlinks:
    Code:
    .go-to-last-post {
      text-decoration: none !important;
    }
    
    .go-to-last-post::after {
      text-decoration: underline !important;
    }
    Click image for larger version  Name:	goto-last-post.png Views:	0 Size:	70.8 KB ID:	23884

    Enjoy!
    Last edited by glennrocksvb; 11-06-2023, 09:08 AM. Reason: Updated code for vB6 self-hosted and vBCloud
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Sweet!

    Works perfectly, including on a small format display (my iPhone 11 Pro Max).
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Thanks for confirming it works. I made it sure this works on both desktop and mobile.

    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Snowhog, you need an extra CSS because your forum has underlined link style on hover state. Please see updated code in the first post.

    #3
    Where exactly does this extra code go? This is the last stanza of the current code:
    Code:
    .go-to-last-post::before {
    content: '';
    background: transparent url("{vb:raw spritepath}") no-repeat -320px -208px;
    width: 13px;
    height: 9px;
    display: inline-block;
    position: relative;
    top: 0.5px;
    }
    /* Go to Last Post Icon with Text - END */
    Hmm. This is what I have now:
    Code:
    .go-to-last-post::before {
    content: '';
    background: transparent url("{vb:raw spritepath}") no-repeat -320px -208px;
    width: 13px;
    height: 9px;
    display: inline-block;
    position: relative;
    top: 0.5px;
    }
    
    .go-to-last-post:hover {
    text-decoration: none;
    }
    
    .go-to-last-post:hover::after {
    text-decoration: underline;
    }
    /* Go to Last Post Icon with Text - END */
    Saved. No change to that 'space'. Even forced a page reload. The underlined space remains.
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Technically anywhere in css_additional template but for grouping and organizational purposes, insert it before the /* Go to Last Post Icon with Text - END */ label.

    #4
    Okay, it's working now, a few minutes later. A caching issue maybe? No matter. The space now is not underlined.
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      I still see it. The newly added CSS is being overridden by another CSS. You need to add !important in order for the new CSS style to "win". Please see updated CSS code in the first post.

    #5
    Hmm. I saw that it was working, but just now it isn't.

    Click image for larger version

Name:	Screen Shot 2022-02-15 at 3.49.23 PM.png
Views:	105
Size:	73.9 KB
ID:	23896
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      See my comment in the previous post.

    #6
    Thanks Glenn, I fixed mine. If it was not mentioned, would never have noticed

    Comment


    • Mitch
      Mitch commented
      Editing a comment
      Nice Mod!!

    #7
    glennrocksvb The !important 'fix' didn't fix the underlined space for me. You said:
    The newly added CSS is being overridden by another CSS.
    , but as stated, the underlined space remains.

    This is the entirety of our css_additional.css:
    Code:
    /* Set color of "Unread Topic" to bold red - START */
    .unread a.topic-title {color:red !important;}
    /* Set color of "Unread Topic" to bold red - END */
    
    /* Online icon "Glow" - START */
    .b-userinfo__icon.online,
    .b-userinfo__icon.offline {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    }
    .b-icon__status--green {
    background: #0f0 !important; /* adjust online dot icon color as desired */
    border-radius: 100%; /* set to 0 if you want the online dot icon to be a square and not round */
    border: 2px solid #fff;
    box-sizing: border-box;
    }
    .b-icon__status--green:after {
    content: '';
    border: 10px solid #6e9d00; /* adjust glow color as desired */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -24px; /* adjust top coordinate to move glow vertically in postbit */
    left: -22px; /* adjust left coordinate to move glow horizontally in postbit */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite
    }
    .profile_sidebar_content .online-status.online {
    position: relative;
    }
    .profile_sidebar_content .b-icon__status--green:after {
    top: -19px; /* adjust top coordinate to move glow vertically on Profile page */
    left: -24px /* adjust left coordinate to move glow horizontally on Profile page */
    }
    @-webkit-keyframes glow {
    0% {
    -webkit-transform: scale(0);
    opacity: 0
    }
    25% {
    -webkit-transform: scale(0);
    opacity: .1
    }
    50% {
    -webkit-transform: scale(.1);
    opacity: .3
    }
    75% {
    -webkit-transform: scale(.5);
    opacity: .5
    }
    100% {
    -webkit-transform: scale(1);
    opacity: 0
    }
    }
    @keyframes glow {
    0% {
    transform: scale(0);
    opacity: 0
    }
    25% {
    transform: scale(0);
    opacity: .1
    }
    50% {
    transform: scale(.1);
    opacity: .3
    }
    75% {
    transform: scale(.5);
    opacity: .5
    }
    100% {
    transform: scale(1);
    opacity: 0
    }
    }
    /* Online icon "Glow" - END */
    
    /* Hide Detailed IP Info link with Modal - START */
    #vb-page-body:not([data-usergroupid="6"]) .resolveIpLink-new {
    display: none;
    }
    /* Hide Detailed IP Info link with Modal - END */
    
    /* Go to Last Post Icon with Text - START */
    .go-to-last-post {
    overflow: visible;
    text-indent: 0;
    background: no-repeat;
    height: auto;
    width: auto;
    margin-left: 2px;
    }
    
    .go-to-last-post::after {
    content: 'Last post'; /* Change text as desired */
    font-size: 11px;
    }
    
    {vb:set imgdir_spriteiconsvb, {vb:stylevar imgdir_spriteiconsvb}}
    <vb:if condition="!empty($imgdir_spriteiconsvb)">
    {vb:set spritepath, {vb:concat
    {vb:stylevar imgdir_spriteiconsvb},
    "/sprite_icons_vb_",
    {vb:stylevar textdirection},
    ".png?v=",
    {vb:var simpleversion}
    }}
    <vb:else />
    {vb:set spritepath, {vb:spritepath sprite_icons_general.svg}}
    </vb:if>
    
    .go-to-last-post::before {
    content: '';
    background: transparent url("{vb:raw spritepath}") no-repeat -320px -208px;
    width: 13px;
    height: 9px;
    display: inline-block;
    position: relative;
    top: 0.5px;
    }
    
    .go-to-last-post:hover {
    text-decoration: none;
    }
    
    .go-to-last-post:hover::after {
    text-decoration: underline !important;
    }
    /* Go to Last Post Icon with Text - END */
    
    /* 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 */
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      You've only put !important to one of the 2 blocks of CSS. Should be added in both. Check the code in the first post again.

    • Snowhog
      Snowhog commented
      Editing a comment
      Doh! I’ll correct that omission when I’m back at my PC.

    #8
    That fixed it.
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


      #9
      Originally posted by glennrocksvb View Post
      For vBCloud:
      Add below code in css_additional but replace PathOfImageIconSpritesHere with the path of the image icons. You can find the path by right-clicking any icon on your forum. For example, the Like icon in a post. Right-click on it and then choose Inspect. Find the CSS code for the background. Copy the background image URL path found in between the "url(" and ")"
      I know this is a dumb question to people that know this stuff, but I'm having a hard time finding this. I right click an icon and hit inspect but I don't know what I need looks like. Thanks for any help.

      Comment


        #10
        Learning, so you are on vB6 Cloud? This mod was created for vB5 when there was no vB6 yet. In vB6, they replaced all the icons using Font Awesome icons. Let me check on how to do this in vB6.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #11
          Learning, I have updated the code for self-hosted vB6 and vBCloud in the first post.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #12
            THANK YOU! Works great. This help's take some of the confusion out of navigating vB6.

            Comment


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Thanks for confirmation the updated code works. And thanks for the ☕.

            #13
            Click image for larger version

Name:	Immagine 2024-02-08 103512.png
Views:	32
Size:	164.8 KB
ID:	28881Click image for larger version  Name:	Immagine 2024-02-08 102442.png Views:	0 Size:	141.5 KB ID:	28880 hy..

            is there any possibility to have the last post icon also in latest topic module ( right in homepage) ?

            thanx

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