Replace Hero Title with logo

[Joseph Jaramillo]

Is it possible to replace the Hero Title with a PNG logo? The text is difficult to see with the low contrast background image, but that’s the image I need to use!

[Bill Robbins]

Joseph,

You can do that with a CSS technique called image replacement. It lets you basically move the text out of the way by indenting it and then add an image to the background of the element. There’s a quick tutorial at http://css-tricks.com/css-image-replacement/ that can show you the basics.

Here’s essentially what you’ll want to do:

1. Go to the Media section in your WordPress control panel and select Add New.
2. Upload your image and click edit once the upload is completed. Look in the right hand column and you’ll see a box with the file URL. You’ll need that in a minute.
3. Go to the Theme Options page and select the Advanced tab.
4. Scroll down to the Custom CSS box and paste this:

   
   h2.hero-title {
   	text-indent: -9999px;
   	width: 315px;
   	height: 63px;
   	background-image: url(https://yoursite.com/image.png);
   }
   

5. Replace the http://yoursite.com/image.png with the URL to your image that you uploaded earlier. Then change the width and height values to match those of your image.
6. Update your settings.

That should let you replace the hero text with an image. If you need different graphics on more than one page, I would suggest using the old Art Direction plugin which will let you apply those styles on a per-page basis. That will save you loading every pages graphics on all pages which will speed up the site.

Hope that helps out,
Bill

[Author]

Posts