XF 2.0 alternate background color on widget

[Nicolas FR]

Hello,

How to get alternative background color on New Posts and New Threads widget ?
I mean to get each message row or thread row with an alternate background color.

Is it possible ?

 

[Nicolas FR]

I offer a pizza to anyone who can help me !

 

[Steve F]

You can try something like so (the widget id will be different on your site)

[data-widget-id="9"]
{
    li.block-row:nth-child(odd)
    {
        background: #f00;
    }
    li.block-row:nth-child(even)
    {
        background: #00f;
    }
}

 

[Nicolas FR]

Perfect ! Thank you very much Steve.

 

[Nicolas FR]

Hi @Steve F
Is there a way to do the same thing for node list ? in home page ?
And remove the border between each node too ?

like this


many thanks !
Hope you're hungry, pizza is in oven

 

[Nicolas FR]

I found for the border !

.node+.node {border-top: none;}

But i can't do anything for the alternate background...

 

[Steve F]

Yeah same concept pretty much, this should work,

[data-template="forum_list"]
{
    .block-container .node:nth-child(odd)
    {
        background: #e9f5fd;
        border-top: none;
    }
    .block-container .node:nth-child(even)
    {
        background: #fff;
        border-top: none;
    }

}

 

[Nicolas FR]

Yep !! Thank you very much

 

[Nicolas FR]

Hey @Steve F, it's me, again ! ✌

What is the code for alternate background for new-post widget but used in what's new page ? Widget with plain thread infos
Each line is not made with block-row anymore but with structItem-cell

I tried all possibilities but...
Thanks in advance

 

[Steve F]

I would need to see it live to help.

 

[Nicolas FR]

This page : https://www.le-sporting-club.fr/actuellement/
The top widget

 

[Steve F]

This looks to work.

[data-widget-key="whats_new_new_posts"] .structItem--thread:nth-child(odd) {
        background: #eaeaea;
}

 

[Nicolas FR]

As usual, many thanks Steve F !
Hope i could help you one time

 

[DM426]

Yeah same concept pretty much, this should work,

[data-template="forum_list"]
{
    .block-container .node:nth-child(odd)
    {
        background: #e9f5fd;
        border-top: none;
    }
    .block-container .node:nth-child(even)
    {
        background: #fff;
        border-top: none;
    }

}

Copied this to extra.css and it works great. What's the code for doing the same thing to the thread list within a sub-forum?