WordPress and Graphics II

In this tutorial, you can learn how to change your masthead in your WordPress theme. This change may involve working with a CSS file, which Linda also covers here. You will need to use Photoshop or some other graphic program that can create .jpg, .gif and/or .png files.

How to Alter the bg.psd File by Layers

Open the original bg.psd file again, or backtrack if you followed along with the above experiment. Make sure all layers are showing.

Now, perhaps you can see why those layers exist. The top layer belongs to that upper menu (navigation), the middle layer belongs to the header, and the bottom layer belongs to the lower category navigation. Make sense?

So, instead of going back and forth between images and .css file, I can alter the colours in that image by layers. I want to keep the top part of that header dark, so I leave that one alone (this also helps to eliminate dealing with the type colour changes). I want to make the middle part a red gradation, and I want to leave the bottom navigation alone as well.

So, I flatten the two layers in the masthead section (layer 3 below) and work the gradient magic on that layer only:

The results:

Now I have less to deal with in changing my .css file. And, now you know where to find the code in the .css file that alters the masthead text and background colours. But, this is just the beginning, as you might want to look at how the various .psd files fit into the total scheme of things in that Hybrid News theme. If you can do this over the next week, you'll have a better idea of how you can alter everything to fit your blog's colour scheme and styles.

What About A Masthead Image? Waaah!

You want a masthead image in Hybrid News? It is possible to push an image into this site, by using the middle layers of that bg.psd file. Good luck with that one.

Or, you can insert an ad, an image or some type of avatar in the right side of the masthead, such as the masthead shown below:

Now, that's ugly (and I can say so, because that is one of my old sites). Another example, which is a bit more elegant, is included in that PhotoShop Pack file under "Inspiration":

Note that the lower navigation is gone, completely, in the example above. You can alter many portions of this theme, but the simplicity of the masthead is not one of them...and the reason behind this is that you want to keep your blog title visible – so much so that you can read it from across the room. So, if you're looking for a blog theme that allows you to scoop up the "above the fold" space with nothing but an image, this theme is not it...although...you can take up the space below the masthead for that image instead.

To add an ad or an image to the masthead, go to the WP dashboard and go to "Appearance > Widgets." Go to the right column and click on the tab for "Utility:Header." When that widget is open, drag a 'text' box into that link and build your HTML in that box. For instance, for the Kentucy Garden text, I added:

<p><img style="float:right;padding-left:2px;" alt="imageshown" src="http://kygarden.com/imagefile/imageshown_sm.jpg">Learn more about and contribute to information about growing plants, flowers, shrubs and trees in Kentucky.</p>

The code above calls an image that I've uploaded to the server, supplies a bit of padding to push that image away from the left side a bit and also adds the type I've included in that area. You, however, can add anything you want – including code for an ad banner.

How easy was that? And, you don't need to mess with CSS or the mast head image to add an image or an ad to that masthead. Phew!