[labnoon]

Hello again guys and thank you for this support!

I was thinking, is it possible to have images instead of text in the titles of widgets in the sidebar? for example let’s say in “recent comments” widgets or any other where I can write a “title” I want to use an image.
I tried using the url of an image but either I did in the wrong way or it doesn’t work. it appeared as pure text.
thank you!

[ahmetsali]

Hi, this can be possible with custom css but you need to do it for every widget. For example for search widget try this custom css code;

.widget_search .widget-title {
    color: transparent;
    background: url("your-image-url-here");
}

[labnoon]

wow thank you!

[labnoon]

Hello. I was just trying this css and it’s great, the only problem is that I have many text widgets where I use facebook and instagram plugins and other banners, is there way I can add different images to the title of each text widget?

thanks a lot for your help!

[ahmetsali]

just right click on a widget and click “Inspect Element” on chome, you will see the id of the widget

<aside id="text-9" class="widget widget_text">

you can grab each of the text widget title by it’s unique id, like this;

#text-9 .widget-title {
    color: transparent;
    background: url("your-image-url-here");
}

[labnoon]

Hi! Thank you for this css! it’s really awesome!

I have a question though! the image tiles, how can I just have one image, aligned to centre, with the max width of 110 px? (I want to create the image bigger for the sake of quality)

You’re amazinge. thank you!

[labnoon]

sorry the image height should be max 21 px. , and center aligned

[ahmetsali]

try this custom css code;

.widget_search .widget-title {
    color: transparent;
    background: url("http://www.labnoon.com/wp-content/uploads/2014/04/headerforweb.png");
    background-position: center center;
    background-size: 110px 21px;
    background-repeat: no-repeat;
}