Replacing the default header image

When you first install Transition, you will see a default image within the first page of your site. It’s loaded from css:

#showcase, #header {width:980px; margin:5px auto 15px; height:350px; 
background: transparent url('images/showcase-demo.png') center top no-repeat; text-align:center;}

….it’s the background style you see above.You will be able to remove this in a few ways:

Remove the CSS or Replacing With Your Own Image

You can easily do this by removing (or replacing) the background css code portion:

 

background: transparent url('images/showcase-demo.png') center top no-repeat;

If you replace the image with your own, the image location is within the transition theme’s image folder images/showcase-demo.png (which is a transparent image that has an outer black glow that was done in Photoshop and then the image was uploaded optimized as a png 24 file. You can see the image on a white background to see the effects I added before uploading:

transition-sc

If you want any effects like I did here, you will need an image program like Photo Elements, Photoshop, Paintshop Pro, or any other application that you can apply special filters and effects to the photograph.

Using a Text Widget to Load Your Own Image

This is the method that is used for this theme to replace the header image for the front page as well as other pages within your web site. You will still need an image and to upload it to your Media Library.

  1. Create or Prepare your own image on your computer
  2. Login to your WordPress Admin >> Media Library and then upload your image, but DO NOT close the window when it finishes uploading because you will need to copy the image path for use a bit later
  3. Go to your Widgets Manager and drag a Text Widget to the Header position and add your image to the window there using HTML coding (see below)

Sample HTML Code for loading an Image in a Text Widget

Your code will look similar to this:

<img src=”your image path here” alt=”some description here” height=”350″ width=”960″ />

It’s best to add the height and width attributes to your image for some browsers, but size is up to you and does not have to be the default sizing of 980 (preferably 960) x 350 pixels. If you also decide to have an effect like a drop shadow or outer glow, you will want a transparent image so that the page background will show through the effect like you see on the live demo site.

NOTE: If you want to manage where your header image is seen or if you want different headers for each page, you will need a plugin called Widget Logic and will need to use Conditional Tags.
By | 2010-09-25T01:51:25+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply