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.

example:


(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
#3

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

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

(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