Topic Resolution: Resolved
  • Closed
  • D
    Spectator
    July 29, 2015 at 12:45 am #19306

    How can I fully customize the widget header with color or an image?

    So far, I have found only one option to do so, and it makes the color a dark gray maybe even black. I would like to use different colors or even upload an image. How can this be done?

    Thank you in advance for the reply.

    Denzel Chia
    Moderator
    Posts: 2656
    July 29, 2015 at 8:37 am #19314

    Hi,

    It’s possible to use CSS code for widget header color,
    Please give us the color hex code, you can find the hex code using this tool http://www.w3schools.com/tags/ref_colorpicker.asp

    Please also post your website url here.

    Thanks!
    Denzel

    D
    Spectator
    Posts: 40
    July 29, 2015 at 3:53 pm #19343

    Thank you Denzel for the reply. Here is the Hex Code for one of the possible colors: #001452. The site URL is fogwm.org.

    Regards.

    Imran
    Spectator
    Posts: 402
    July 29, 2015 at 4:19 pm #19348

    Hi Donna,

    Thanks for writing in, if you wish to achieve something like this: http://prntscr.com/7yeskm. Please add the following code under Appearance > Theme Options > Custom CSS:

    .widget-title-background {
    background: #001452 !important;
    }

    Hope this helps!

    Thanks.

    D
    Spectator
    Posts: 40
    July 29, 2015 at 4:52 pm #19351

    Yes Imran,

    It does help. Thank you. I also wanted to know how to enter the code for “border radius” so I can have rounded widgets. What I tried did not work. Should I start another forum topic?

    Best regards.

    D
    Spectator
    Posts: 40
    July 29, 2015 at 11:48 pm #19356

    Hello again Imran,

    I used the code on one of the sub-domains. There was a narrow colored bar above the widget header text, but not behind it as in the image you sent. The bar also did not cover the entire width of the widget.

    Please advise.

    Denzel Chia
    Moderator
    Posts: 2656
    July 30, 2015 at 6:32 am #19365

    Hi,

    Border Radius for http://fogwm.org/
    Please see screenshot http://prntscr.com/7yosmr
    Please try the following codes in Theme Options > Custom CSS

    .widget::after {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    }
    .widget-title-background {
    border-radius: 20px 20px 0 0 !important;
    }
    .widget-content {
    border-radius: 20px !important;
    }

    For any help on other domains, Please post the url here.

    Thanks!

    D
    Spectator
    Posts: 40
    July 30, 2015 at 2:28 pm #19383
    This reply has been marked as private.
    Imran
    Spectator
    Posts: 402
    July 30, 2015 at 3:18 pm #19386

    Hi Donna,

    Upon checking, the problem you are mentioning is related to this domain: menofpurpose.fogwm.org so if you want to disable the colored stripe above the header, you can add the following code under your custom CSS:

    .widget-title-background {
    width: 108.5% !important;
    position: relative;
    right: 14px;
    min-height: 46px;
    }

    .widget-title {
    position: relative;
    bottom: 41px;
    color: #ffffff;
    }

    Hope this helps!

    Thanks.

    D
    Spectator
    Posts: 40
    July 30, 2015 at 3:53 pm #19389

    Imran,

    I added the code. The text color did change to white, and moved above the thin colored “widget header background”, but the widget header still does not show as yours does. Don’t know why. I can try adjusting the px amount. If I disable that thin line, I have no background header with color at all.

    I sent an email to you with an image.

    D
    Spectator
    Posts: 40
    July 30, 2015 at 4:08 pm #19390

    I do not know why the code for the widget header background color does not work on that sub-domain as it has WP installed and the theme. I presume the code there should be the same.

    Also, how may I add background color to the content area of a particular widget?

    Thanks.

Viewing 10 replies - 1 through 10 (of 22 total)