Display "NEW" icon on unread posts

Display "NEW" icon on unread posts

Overview Discussion
stunod29

stunod29

Member
Licensed customer
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;
}
Click to expand...

Read more about this resource...
 
Russ said:
Ah I see you're referencing my old post :)

I'd recommend replacing the specific background color as this modification will break on all non-uix styles.
Click to expand...
Yes sir, I thought others would have like to know how to accomplish this as well!!!
 
Hello
Thanks for the tweak.
Indeed, the mention also appears next to "Reaction" icon. Anyway to avoid this ?
Thanks

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

Attachments

  • Screenshot 2021-05-29 at 09.02.23.webp
    Screenshot 2021-05-29 at 09.02.23.webp
    54.2 KB · Views: 22
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;
}
 
phtvs said:
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;
}
Click to expand...
Can you show a screenshot? I already get a "New" displayed next to new threads while viewing my forum.
 
You can also use my AddOn to show an Icon.

xenforo.com

Unmaintained - [cv6] New Post Icon

Displays an icon in front of threads with new posts in every list. XF 1.5 had this, and my users missed the dot. Settings are in the Style Miscellaneous Sections: So you can define different Icons per Style. And so it looks in the Front End...
xenforo.com xenforo.com
 
You must log in or register to reply here.
Back
Top Bottom