Widget Title Color, Weight and Background

[lorenhoboy]

This CSS code worked to bold the font title font weight.
h4.h-widget {font-weight: 700;}

What code do I need to address and change the Sidebar Widget Title Box :
background color
border thickness
border color

[ruenel]

Hello Loren,

Thanks for writing in!

To customize the widget title in the sidebar, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-main .h-widget, .x-sidebar .h-widget {
    background-color: red;
    color: white;
    border-width: 5px;
    border-color: red;
}

Feel free to change the color because I used red color so that you can easily see the changes when you apply the css to your site.

[lorenhoboy]

We were partially successful. For testing I took out my earlier code and entered the following:

.x-main .h-widget, .x-sidebar .h-widget {
font-weight: 700;
background-color: black;
color: white;
border-width: 5px;
border-color: red;
}

Here is what I got. You will notice the white border did not change to red (or black or green), but all else worked.

What do you suggest for the border color?

[Prasant]

Hello Loren,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.x-sidebar .h-widget {
    border-color: #ff0000 !important;
}

Thanks.

[lorenhoboy]

Thank You. Looks like it needed hex color code and not CSS color names. Interesting.

[ruenel]

Hey Loren,

Yes, you need !important code so that it will override and force the color properly.

Thanks.