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

[glennrocksvb]

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:

/* 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: (Updated 4/19/24 for vB 6.0.4)
Add the below code in css_additional.css template.

/* Go to Last Post Icon with Text - START */
.go-to-last-post::after,
.b-post-sm__go-to-last-post-container a::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.


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

If underline appears on hover state of hyperlinks:

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

.go-to-last-post {
  text-decoration: none !important;
}

.go-to-last-post::after {
  text-decoration: underline !important;
}

Enjoy!

[Snowhog]

Sweet!

Works perfectly, including on a small format display (my iPhone 11 Pro Max).

[glennrocksvb]

Thanks for confirming it works. I made it sure this works on both desktop and mobile.

[glennrocksvb]

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

[Snowhog]

Where exactly does this extra code go? This is the last stanza of the current 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:

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

[glennrocksvb]

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.

[Snowhog]

Okay, it's working now, a few minutes later. A caching issue maybe? No matter. The space now is not underlined.

[glennrocksvb]

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.

[Snowhog]

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

[glennrocksvb]

See my comment in the previous post.

[Mitch]

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

[Mitch]

Nice Mod!!

[Snowhog]

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:

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

[glennrocksvb]

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]

Doh! I’ll correct that omission when I’m back at my PC.

[Snowhog]

That fixed it.

[Learning]

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.

[glennrocksvb]

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.

[glennrocksvb]

Learning, I have updated the code for self-hosted vB6 and vBCloud in the first post.

[Learning]

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

[glennrocksvb]

Thanks for confirmation the updated code works. And thanks for the ☕.

[desmomax]

hy..

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

thanx

[desmomax]

after the last vb update here is how it show the last post

is there any possibility to add "ultimo post / last post" label also in this view?

[glennrocksvb]

is there any possibility to add "ultimo post / last post" label also in this view?

I have updated the CSS code in the first post for vB6. Check it out!