How do you set alternating colors in the list of topics

(It Craftsmen Club) #1

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


(Felix Freiberger) #2

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:

How to edit this area?
How to set text color of topic that was read already?
Design feedback from the perspective of Humane Tech

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; }

(Rafael dos Santos Silva) #4

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

(Erlend Sogge Heggen) #5

@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.

(Felix Freiberger) #6

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;

(Joe) #7

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:

(Felix Freiberger) #8

That did it, thanks :heart:

Here you go:

(Jeff Atwood) #9

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

(Felix Freiberger) #10

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

Tiger Stripes component