Changing Widget Panel Header Color

rod

How may I go about customizing the widget panel header colors? Currently there are six available to me each with a different CSS class. Specifically I'd like to change the hue of the <div class="panel panel-primary"> color which is a dark blue currently.

Could the color be set via Appearance > Custom HTML & CSS > Custom CSS in the ACP?

Thank you.

yariplus

@rod said in Changing Widget Panel Header Color:

Could the color be set via Appearance > Custom HTML & CSS > Custom CSS in the ACP?

Yep, and I would recommend doing it that way. The selector for the panel header background color is .panel-primary > .panel-heading so specifying a more specific selector will override it. I would use [widget-area] > as this will override any panel that is a direct descendant of any widget area.

[widget-area] > .panel-primary > .panel-heading {
    background-color: pink;
}

rod

@yariplus This works great. Thanks. I made a few additional tweaks and now my sidebar widget feels cohesive with the categories that are displayed.

For my situation I have this added now:

[widget-area] > .panel-primary {
    border-color: #7CAFC2;
}
[widget-area] > .panel-primary > .panel-heading {
    background-color: #7CAFC2;
    border-color: #7CAFC2;
}
[widget-area] > .panel-primary > .panel-body {
    background-color: #FAFAFA;
}

tqwhite

And, as an admittedly snarky aside, while you're tuning up your custom CSS, add this:

   .alert-window{
        bottom:60vh;
        right:40vw;
   }

So that the error and alert window is in the middle of the page and noticeable to your clientele. It's normal position at the bottom right used to cause me fits. By the time you had scanned the page to find it, it fades away.