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 个赞

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 个赞

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 个赞

@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 个赞

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 个赞

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 个赞

That did it, thanks :heart:

Here you go:

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

9 个赞

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

1 个赞

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

8 个赞

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 个赞

当使用浅色主题或深色主题时,如何实现不同颜色最佳?

1 个赞

此主题可能可以回答您的问题 :slight_smile: :

3 个赞

至少有两种方法可以实现:

  • 为不同的主题使用不同的颜色。
  • 用半透明的中灰色为行着色,这样它在浅色和深色背景上都能正常显示。例如,给 nth-child(odd) 行设置颜色,如 background: #80808040;

如果这对您有帮助,我发布了一个样式表覆盖,演示了第一种方法……为每个主题设置颜色。有关详细信息,请在 style.css 中查找任何包含 nth-child 的部分。

下面是如何在浅色主题中显示的一个示例:

…并且每个主题都有自己的颜色定义,因此表格行可以适应每个主题。

1 个赞