XF 2.1 How do I make different background colors for alternative rows in thread list?

[gogo]

Better to do it efficiently without making extra queries.

Thanks.

 

[Mr Lucky]

Try this in your style extra.less template

.structItem--thread:nth-child(even) {background-color:#add8e6!important}
.structItem--thread:nth-child(odd) {background-color: #ffffe0!important}

(may or may not need !important)

For forum list this should work

.node:nth-child(even) {background-color: #add8e6!important}
.node:nth-child(odd) {background-color: #ffffe0!important}

See here:

Jazz Recipes

Or blues, rock or classical recipes. Please start a new thread for each recipe.

cafesaxophone.com

 

[Anatoliy]

Just wonder why you didn't apply it to forum view (if It's not a secret)?

 

[Mr Lucky]

Just wonder why you didn't apply it to forum view (if It's not a secret)?

It could probably have gone into a new custom .less template in forum view (or directly in template structured_list.less).

EDIT:

If it is in a custom .less template and added to forum_view, then it would affect the forum thread list, but not new posts.

So for example

Create the custom template



And add that to forum_view template:

<xf:title page="{$page}">{$forum.Node.title}</xf:title>
<xf:description>{$forum.Node.description|raw}</xf:description>

<xf:css src="structured_list.less" />
<xf:css src="custom_alternate_background.less" />

 

[Mr Lucky]

I had removed the styling from that example in my own forum, it is back now.

 

[Mr Lucky]

@gogo let me know if it works for you.

 

[gogo]

@gogo let me know if it works for you.

It works wonderfully!

 

[gogo]

One question, how do I find out this name?

.structItem--thread

 

[Mr Lucky]

One question, how do I find out this name?

.structItem--thread

I normally find those classes in my browser. In Firefox right click on the site brings up an inspect element console where is shows you the css claas of various elements.

NB: Maybe you could mark my answer above as solution if it worked well for you? (The tick icon by the meassge with the answer). It's one of the new features of 2.2

 

[gogo]

Sure. Thank you very much for helping me to solve my problem! Great!