Widget Homepage

[Philippine Seven]

Hi Bill,

I’d just like to ask if it’s possible to have an image for the titles of the widgets at the bottom part of the homepage. Currently, I’ve used an image widget, but since only 1 image should be shown, I can’t anymore upload an image for the post because I’ve already used it in the title. Hoping to hear from you. Thanks.

[Bill Robbins]

You can use an image for the title of a widget with some custom CSS. Here’s basically what you’ll want to do:

1. Visit the site your working on in a web browser and view the page’s source code
2. Look through the code until you find the widget you’re wanting to change. Here is what the code looks like for the “Recent Posts” widget on the home page of your site:

3. You’ll want to look in the first line to find the ID of the widget you’d like to change. In this widget it is recent-posts-2.
4. Next you’ll want to go to the appearance section of your WordPress control panel and select edit to open up the theme editor.
5. From the list of files on your right, choose style.css and scroll down to the very bottom.
6. Paste this:

   
   #recent-posts-2 h4.widgettitle {
   	background: transparent url(https://yoursite.com/image.png) no-repeat center top;
   	text-indent: -9999px;
   	padding-bottom: 10px;
   	padding-top: 10px;
   }
   

   You’ll need to replace the http://yoursite.com/image.png with the URL to the image you’d like to use as the widget title. You also may need to adjust the top and bottom padding to get the image to fit properly.

7. Save your changes

If you have any trouble or other questions, let me know,
Bill

[Author]

Posts