Logo Plus Existing Title Text

The first option is to keep the default title text and add a logo to the right or the left of it. This will involve editing the header file, the style sheet, and uploading the logo to your server. All of this could be accomplished in a number of ways, but there's only space enough to show you one.

The first step is to create a properly sized version of your logo in a .gif or .png format so its background can be transparent. To know the size, just look in your style sheet for the height given to the area containing the title and description for the site. In the case of the default theme, the CSS name for the area is headerimg and it's 192 pixels tall. I want my logo to fit easily within that, so I'm going with a height of 120 pixels.

Now take a look at the HTML code for the part of the header I'm going to be working with, as highlighted in the theme editor in Figure 27-3.

Figure 27-3

I can see that headerimg, containing my title and description, is a distinct division (div) inside a larger division called header. Because I want my logo to be on the left side of the title, it will need a CSS rule that says keep it to the left of headerimg. I'm also going to need HTML code to tell WordPress where to find my logo and it looks like this:

<img id="logo" src="<?php bloginfo('template_directory');?>/images/logo.gif" />

The bloginfo('template_directory') command is a WordPress template tag so that no matter which theme I'm using, it will look in the proper folder on the server. The id="logo" is a unique identifier that I can use in my CSS style sheet to make the logo image do whatever I want.

I place this code for the logo into my header.php file just before the headerimg division, and click Update File to save changes to the header file. Using my FTP program, I upload the logo.gif file into the images folder of the default theme.

If I don't do anything with my CSS style sheet, the header will look like the top half of Figure 27-4 (I had to highlight the white title or it wouldn't have been visible).

Figure 27-4

Clearly, that's not what I want. Using the theme editor, then, I'll update the CSS rules for the title and description. Currently they're both centered, so I need to change their text alignment so that they'll be flush left to the logo, like so:

font-size: 4em; text-align: left;

#headerimg .description { font-size: 1.2em; text-align: left;

I also need to add some rules to govern the logo itself; keep it to the left of the title and ensure it's not up at the top left of the header. The resulting CSS looks like this:

float: left; padding-top: 40px; padding-left: 200px; padding-right: 25px;

After saving the style sheet, you can see the changes in the lower half of Figure 27-4.

Of course there's much more you could do to customize the header area. Notice all the space over on the right. With adjustments to your header template file you could, for example, place a banner in that space announcing current specials, or whatever you like.

You can do more with branding by also changing the background image, and that's something I cover in Lesson 29.

Bigger Blogging Profits

Bigger Blogging Profits

Are You Ready to Start Writing? Times are very hard, and there is no reason to assume or imagine that things are going to improve any time soon. The world as a whole has undergone some very traumatic changes over the last few years, and the financial situation in most countries seems grim.

Get My Free Ebook

Post a comment