How do you set alternating colors in the list of topics? It helps usability a lot, but it is all white by default.
example:
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:
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; }
And hereās the discussion about why it isnāt the default anymore:
@fefrei Care to extract this into a super simple theme component?
@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.
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;
----------------------^
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:
Why not stripes? I guess
stripes are less⦠black and white?
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.
What would be the best way to implement this with different colors depending on whether the light or dark theme is in use?
This topic may reply to your question :
There are at least two methods which work:
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.