XF 2.2 Can widgets get a block/header like this?

[Black Tiger]

At this moment, in widgets for example in the side bar, only the title text visible, no nice background.

It would be a lot nicer if it can be made like this, so kind of a block colored header (or how does one call that)?



I don't need the grey box around it. I'm only referring to the little red box with the white text.

I would like to know how and where to do this (probably in the custom widget itself), or how to call something to make this happen on certain widgets.
And if possible in a "per block" way, so I can customize the background color (red in this example) to a matching bgcolor of the used theme.

 

[Russ]

This in extra.less should do the trick:

.p-body-sidebar .block-minorHeader {
    background: #7A0000;
    color: #FFF;
}

 

[Black Tiger]

Thank you, but this would change it for every widget, correct?
Can this same code be used on specific widgets?

 

[Paul B]

Check advanced mode for the widget and use classes/styling as required.

 

[Black Tiger]

Sorry, but I'm not into css and stuff. So I have no clue. Does this mean I can use the above code in the advanced mode for the widget?

 

[Paul B]

Yes.

<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader" style="background: #7A0000; color: #FFF">Widget Title</h3>
        <div class="block-body block-row">
            Widget content
        </div>
    </div>
</div>

If you plan to make that change for more than one/all widgets, then consider creating a class in the extra.less template and calling that.

extra.less:

.myWidgetHeader
{
    background: #7A0000;
    color: #FFF;
}

Widget:

<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader myWidgetHeader">Widget Title</h3>
        <div class="block-body block-row">
            Widget content
        </div>
    </div>
</div>

 

[Black Tiger]

Thank you very much @Brogan. I will try both and see what looks better, all of them or only the specific ones.
In this case I gave Russ the solution because he was the first with also a good answer.

But I'm sure we will encounter again on the forums some time. You're doing an awfull good job here answering so many people. Respect!