How do you set alternating colors in the list of topics

How do you set alternating colors in the list of topics? It helps usability a lot, but it is all white by default.

example:

You can achieve this with a CSS customization. Here’s an example to get you started:

.topic-list-item:nth-child(even) {
    background-color: #EEE;
}

.topic-list-item:nth-child(odd) {
    background-color: #FFF;
}

Here’s how this looks on Meta:

13 Likes

And for those who are looking to change the background of topics, here’s the solution:

div.topic-post:nth-child(odd), div.small-action:nth-child(odd) { background-color: #FAFBFF; } div.topic-post:nth-child(even), div.small-action:nth-child(even) { background-color: #F6F6FF; }

6 Likes

And here’s the discussion about why it isn’t the default anymore:

https://meta.discourse.org/t/the-death-of-the-grey-no-more-tiger-striping-rows-by-default/28664?u=falco

6 Likes

@fefrei Care to extract this into a super simple theme component? :blush:

@Silvanus same for your topic tweak. I was thinking maybe we’d just include it in the “tiger striping component” but commented out by default, but we might as well make it a component of its own as they really are two completely separate pieces of styling.

8 Likes

Sure!
Can you tell me why I cannot use $primary-low in the theme component? It’s used all over the place in core (e.g. as the background color of buttons), and I think it’s a good color for the darkened rows, but it’s undefined:

Error: Undefined variable: "$primary-low".
        on line 2 of theme_field.scss
>>     background-color: $primary-low;
   ----------------------^
4 Likes

I’ve run into the same problem. What solved it for me was adding this at the top:

@import "common/foundation/variables";

And then you can use those colors.

That’s the short story, the long story is here:

8 Likes

That did it, thanks :heart:

Here you go:

https://github.com/fefrei/discourse-tiger-stripes

9 Likes

Why not :zebra: stripes? I guess :tiger: stripes are less… black and white?

1 Like

Sorry, I don’t follow. Can you elaborate? :laughing:

8 Likes

How would you do this on a topic detail page for alternating replies?

That it somewhat more involved. You can try applying the same principle to the post-stream class, but this not only contains replies, but also “gaps”, like the 2 years later above your post, so they also count and may be affected.

1 Like

What would be the best way to implement this with different colors depending on whether the light or dark theme is in use?

1 Like

This topic may reply to your question :slight_smile: :

3 Likes

There are at least two methods which work:

  • Use different colors for different themes.
  • Shade rows with a translucent medium gray, so it’ll work on both light and dark backgrounds. Like, give nth-child(odd) rows a color like background: #80808040;.

If it helps, I published a stylesheet override which demonstrates the first method… setting colors per-theme. For details, look in style.css for any parts containing nth-child.

Here’s an example of how it looks in a light theme:

… and each theme has its own color definitions, so the table rows fit each theme.

1 Like