XF 2.2 How to give Widgets a different background

[Abraham54]

I like to give the widgets in a dark style a total different color.
Via Blocks, I can only change the background of the header.

I suppose it should be done via Extra.less?

 

[Russ]

Each block has a unique class. You need to inspect the HTML and find the class, then add some CSS to the extra.less template:

[data-widget-key="forum_overview_members_online"] .block-container {
    background: #CCC;
}

The .block-container needs to be there, as that's where the default background is being added.

 

[Nicolas FR]

I suppose it should be done via Extra.less?

Yep !

You must identify the blocks that make up your widget, most of the time block-container, block-header or block-minor-Header then block-row associated or not with block-row--minor and finally there may be a block- footer... Identify them with your browser's developer tools.

But for changing the background, generally block-container is enough (sometimes block-footer too):

[data-widget-key="my_widget"] {
    .block-container {
        background: #FEFEFE;
    }
    .block-footer {
        background: ECECEC;
    }
}

 

[Abraham54]

I have this now:

[data-widget-key="forum_overview_members_online"] {

    .block-container {

        background: rgb(0,0,0);

    }
}

But it does not work in the style.

The footer is already in rgb(0,0,0)

 

[Nicolas FR]

Did you used the right extra.less template? that of the style concerned?

 

[Abraham54]

Now it works.
Thanks.