Add visually clearer way of differentiating read/unread threads & other style tweaks

Snowknight26

Member
Jul 13, 2020
114 Posts
63 Thanked
To differentiate whether there are new replies on a thread vs. no new replies, the threads with new replies are bolded. However, the bolding is very subtle (font-weight: 600) and isn't easy to notice at first glance.

For example:
1594655072702.png


Bottom 2 are unread, top two are read.

One way would be to either add more weight to the bolding and/or change the avatar to be a static icon which loses opacity whenever there are no new replies.

Example:

1594655256817.png


At a glance, you can distinguish between read/unread threads very quickly.
 
  • Thanks
Reactions: marcopm

Katadunkass

The Banhammer
TranceFix Crew
Jun 27, 2020
1,457 Posts
1,276 Thanked
Age
33
Denmark
Thanks for noticing! We'll definitely see what we can do about it








(I say "we", but I'm just here to take all the praise for other peoples hard work)
@Gagi
 
  • Thanks
Reactions: Archon

Archon

Gagi
TranceFix Crew
Jun 27, 2020
3,926 Posts
2,824 Thanked
Thanks for the suggestion! The only thing Kata was able to do was to decrease the font weight of the read threads to light (we only have three options: light, normal, bold). Check it out. However, I'm not liking how it's looking so far, so maybe it'd be better to add an icon or a NEW blue text, like we have in the section list.
 

Katadunkass

The Banhammer
TranceFix Crew
Jun 27, 2020
1,457 Posts
1,276 Thanked
Age
33
Denmark
Thanks for the suggestion! The only thing Kata was able to do was to decrease the font weight of the read threads to light (we only have three options: light, normal, bold). Check it out. However, I'm not liking how it's looking so far, so maybe it'd be better to add an icon or a NEW blue text, like we have in the section list.
Yeah, now it actually looks like the reverse have happened: I think I've read the "light" threads. Let's make a poll for everyone!
 

Snowknight26

Member
Jul 13, 2020
114 Posts
63 Thanked
Not too familiar with XenForo's styling method but if you can't specify custom values, you should be able to add custom CSS via extra.less. For example:

Code:
.is-unread .structItem-title {
    font-weight: 700;
}

.node--unread .node-title {
    font-weight: 700;
}

[...]

That said, personally not a fan of font-weight: light on read threads. :p
 
Last edited:
  • Thanks
Reactions: Archon

Archon

Gagi
TranceFix Crew
Jun 27, 2020
3,926 Posts
2,824 Thanked
Not too familiar with XenForo's styling method but if you can't specify custom values, you should be able to add custom CSS via extra.less. For example:

Code:
.is-unread .structItem-title {
    font-weight: 700;
}

.node--unread .node-title {
    font-weight: 700;
}

[...]

That said, personally not a fan of font-weight: light on read threads. :p

You're a god! Thanks man.

That said, I only used the first part of the code, as we already have a New indicator in the node list.
 
  • Thanks
Reactions: Snowknight26

Snowknight26

Member
Jul 13, 2020
114 Posts
63 Thanked
Instead of making a new thread, figured I would dump some more ideas here:

  • Remove the animation/transition effect for forums/threads/posts. Although it might look flashy, this really just makes you have to wait longer before you can read content (worse at the bottom of the page). Especially noticeable when navigating back/forward in the browser.
 

Archon

Gagi
TranceFix Crew
Jun 27, 2020
3,926 Posts
2,824 Thanked
I'm not sure how much longer you actually have to wait. I'm personally not having any problems (and my laptop is 6 years old and was not even high-end to begin with). When I'm navigating back/forward in the browser, it doesn't make animations at all.
 

Snowknight26

Member
Jul 13, 2020
114 Posts
63 Thanked
I'm not sure how much longer you actually have to wait. I'm personally not having any problems (and my laptop is 6 years old and was not even high-end to begin with). When I'm navigating back/forward in the browser, it doesn't make animations at all.

I mean the fade-in/slide up effect.

View attachment 16