Display "NEW" icon on unread posts

Display "NEW" icon on unread posts

stunod29

Member
stunod29 submitted a new resource:

Display "NEW" icon on unread posts - New posts will stand out more now!

Display a "NEW" blocked icon at the end of any unread post text.


CSS:
.structItem.is-unread .structItem-title a:not(.labelLink):after {
    content: "NEW";
    display: inline-block;
    background: @xf-uix_primaryColor;
    padding: 1px 4px;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

Read more about this resource...
 

kankan

Well-known member
Hello
Thanks for the tweak.
Indeed, the mention also appears next to "Reaction" icon. Anyway to avoid this ?
Thanks

203770
 

xenfans

Well-known member
Hi all,

I wanted to customize this for my 2.2 version and I noticed that people mentioned this no longer works in 2.2

This is the solution I currently am using on one of my sites and it seems to be okay. I thought I'd share it with those who find this in google, etc.

Features:

- Let's you add the [new] tag before or after the title element on the thread list.

- Shows a different background color for unread content.

Tested: 2.2.x of XenForo in May 2021 in regular discussion threads nodes.

extra.less template:
CSS:
.structItem.is-unread {
    background: rgba(37,119,177,0.10);
}
.structItem.is-unread .structItem-title::after {
    content: "NEW";
    display: inline-block;
    background: rgba(37,119,177,0.95);
    padding: 1px 4px;
    font-size: 11px;
    color: white;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

To get [new] to show before the title, find structItem-title::after in the above code and change to structItem-title::before

Screenshot 2021-05-29 at 09.02.15.png
 

Attachments

  • Screenshot 2021-05-29 at 09.02.23.png
    Screenshot 2021-05-29 at 09.02.23.png
    870.3 KB · Views: 16

phtvs

Member
This one works on 2.2.10. In extra less template add

Code:
.structItem.is-unread .structItem-title a:not(.labelLink):after {
    content: "NEW";
    display: inline-block;
    background: @xf-buttonBg;
    padding: 1px 4px;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}
 

zoldos

Well-known member
This one works on 2.2.10. In extra less template add

Code:
.structItem.is-unread .structItem-title a:not(.labelLink):after {
    content: "NEW";
    display: inline-block;
    background: @xf-buttonBg;
    padding: 1px 4px;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}
Can you show a screenshot? I already get a "New" displayed next to new threads while viewing my forum.
 

Hoffi

Well-known member
You can also use my AddOn to show an Icon.

 
Top