Add new badge to unread posts

Tutrix

Unread posts are displayed in black and bold.
To highlight unread posts more visibly, a “new badge” can be added.

new-badge

To do this, simply enter the following CSS code under Custom CSS:

.DiscussionList:not(.DiscussionList--searchResults) .unread .DiscussionListItem-title::after {
  content:"new";
  margin-left:5px;
  color:#fff;
  font-size:65%;
  background:#ff6000;
  border-radius:4px;
  padding:0 4px 2px 4px;
  vertical-align:text-top
}

KBExit

This is nice!
I was thinking about making this recently actually lol. Beat me to it!

Forogramero

Doesn't work in my forum. Sorry

KBExit

Forogramero you're using Discussion Cards. You'll need to disable that extension for this to work.

Tutrix

Forogramero Doesn't work in my forum. Sorry

I don't use Discussion Cards, but you can try this CSS code

.unread .cardTitle .title::after {
  content:"new";
  margin-left:5px;
  color:#fff;
  font-size:65%;
  background:#ff6000;
  border-radius:4px;
  padding:0 4px 2px 4px;
  vertical-align:text-top
}

Silvestrus

It works fine on my forum.

Great addition to forum! I like it very much.

vimo

Wow great. Thx @Tutrix

Forogramero

KBExit Yes, I use the Discussions Cards for Extension, but I run tests on my localhost forum. I disabled it there, yet it still doesn’t work.

Forogramero

Tutrix still doesn’t work. sorry

treyb

Very nice!

Tutrix

Forogramero

Okay, I took a look at your forum. There doesn't seem to be an unread CSS class for the title, but there is a read class.

You can try this code with the logged status included.

body.logged-in .CardsListItem:not(.CardsListItem.read) .cardTitle .title::after {
  content:"new";
  margin-left:5px;
  color:#fff;
  font-size:65%;
  background:#ff6000;
  border-radius:4px;
  padding:0 4px 1px 4px;
  vertical-align:text-top
}
body.logged-out .CardsListItem:not(.CardsListItem.read) .cardTitle .title::after {
  display: none;
}

However, you will also need this script
Add Member Logged In/Out Class - Simple Guide No Extension
Thanks, @huseyinfiliz for that 😉

so that guests don't see “new” everywhere.

Forogramero

Tutrix Thank you. I'll give it a try. I run tests on my localhost forum, not in production. That's why. But let me try this. I'll keep you informed.

huseyinfiliz

Tutrix Forogramero If you’d like, I also have another extension that provides the same functionality and is a bit more comprehensive, you can take a look at that as well.

https://discuss.flarum.org/d/36589-add-member-logged-inout-bbcode-and-class

Forogramero

huseyinfiliz thank you!