Change widget header from gradient to image

  • DezD

    #7228

    Hi folks

    Is it possible to change the gradient on a sidebar widget to an image?

    Many thanks

    Deryn

    Anonymous

    #37356

    Add this to Custom CSS or Child Theme style.css

    .sidebar h3 {
    background: url("path/to/image.png") !important;
    }

    Put correct image path in url(" ")

    You may also need to specify the background repeat property.

    http://www.w3schools.com/css/css_background.asp

    DezD

    #37357

    Hi Prasanna

    Many thanks for the advise again, it’s now working, although I need to amend the image slightly.

    I do have another question but will raise a new post for it as it is to do with the header area.

    Hope to speak soon.

    Best wishes

    Deryn

    DezD

    #37358

    Hi Prasanna

    I’ve added the image to the sidebar but for some reason it does not work in IE9. It works fine in IE10 and Firefox though.

    I’ve tried to use a full path to the image instead of a short one: wp-content/uploads/2013/04/right-bg.jpg but this does not work either.

    Any ideas?

    Hope to speak soon.

    Best wishes

    Deryn

    Mod

    Kenneth John Odle

    #37359

    Please post a link to the site or the code you are using.

    DezD

    #37360

    Hi Kenneth

    Sorry, here you go:

    http://www.blog.bigfish-littlefishuk.co.uk/

    Code:

    .sidebar h3 {

    background: url(“/wp-content/uploads/2013/04/right-bg.jpg”) !important; color:#000;

    }

    Hope this helps.

    Speak soon

    Deryn

    Anonymous

    #37361

    Try adding this to Graphene Options –> Advanced –> Custom <head> Tags

    <!--[if IE]>
    <style type="text/css" media="screen">
    .sidebar h3 {
    background: url("http://www.blog.bigfish-littlefishuk.co.uk/wp-content/uploads/2013/04/right-bg.jpg") !important;
    }
    </style>
    <![endif]-->

    BTW, you can change the widget title colour in Graphene Options –> Colours.

    DezD

    #37362

    Hi Prasanna

    Unfortunately this has not worked, sorry. Any other ideas?

    Hope to speak soon

    Deryn

    Admin

    Syahir Hakim

    #37363

    How does it not work in IE9? No image?

    DezD

    #37364

    Hi Syahir

    That’s correct, the image does not show. Instead It just shows a blue header.

    Hope this helps.

    Speak soon

    Deryn

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.