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

Snowknight26

New Member
Joined
Jul 13, 2020
Messages
27
Reaction score
11
Points
3
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
Joined
Jun 27, 2020
Messages
621
Reaction score
333
Points
63
Age
29
Location
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: Gagi

Gagi

Archon
TranceFix Crew
Joined
Jun 27, 2020
Messages
625
Reaction score
288
Points
63
Location
Serbia
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
Joined
Jun 27, 2020
Messages
621
Reaction score
333
Points
63
Age
29
Location
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

New Member
Joined
Jul 13, 2020
Messages
27
Reaction score
11
Points
3
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: Gagi

Gagi

Archon
TranceFix Crew
Joined
Jun 27, 2020
Messages
625
Reaction score
288
Points
63
Location
Serbia
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

New Member
Joined
Jul 13, 2020
Messages
27
Reaction score
11
Points
3
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.
 

Gagi

Archon
TranceFix Crew
Joined
Jun 27, 2020
Messages
625
Reaction score
288
Points
63
Location
Serbia
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

New Member
Joined
Jul 13, 2020
Messages
27
Reaction score
11
Points
3
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