When I was redesigning the theme for SS!AB, I wanted to make the title of the blog look a certain way. Unfortunately, the font design I settled on was not easily done with HTML and CSS. So instead of using text for the title, I put the title into the banner image using Photoshop.

Understanding the Elements

I liked the way the banner now looked, but I wanted it to be easy for readers to return to the index page. I prefer when the whole banner can be clicked to return to the index, rather than having another link on the sidebar or in the list of Pages. Also, I know that I am used to putting my mouse on a blog’s title and clicking to return to the index page, and I’m probably not alone. I did a lot of searching for a solution, and I found that Lorelle’s guide contained the perfect solution for me. To understand the elements that will be changed, take a look at what the blog title and description look like with minimal formatting.

As you can see in the screenshot, there are two basic elements. The first element is simply a link that displays the name of your blog, and the second element is some text that displays your blog’s description. The first step to making your banner clickable is to ensure that there is a label associated with each element, so that you can later use the CSS stylesheet to tell the browser how to display code that has a special label. Many themes may already have a label defined, but if not, you will need to add labels to your header.php file.

Editing the HTML

The HTML in header.php:

<div id="header">

<h1 id=”blog-title”>
<a href=”<?php echo get_settings(’home’) ?>/” title=”<?php bloginfo(’name’) ?>” rel=”home”><?php bloginfo(’name’) ?></a>
</h1>

<div id="blog-description"><?php bloginfo('description') ?></div>

</div>

One way to add a label to a chunk of HTML code is to insert id="NAME_OF_THE_LABEL" into the HTML tag as an additional attribute. In this block of HTML code, there are 3 labels defined:

1. header: This label defines the DIV that contains both the blog title and description.
2. blog-title: This label defines the H1 that only contains the blog title. Note that the H1 that contains the blog title is also a link. The target of the link is a Wordpress php call. This section is the key to making your banner clickable.
3. blog-description: This label defines the DIV that contains your blog’s description. This description is also generated through a Wordpress php call.

Editing the CSS

The CSS in style.css:

#blog-title a {
position:absolute;
left:0px;
top:0px;
width:950px;
height:165px;
}

#blog-description {
color: #163a54;
margin-top: 130px;
margin-left: 30px;
font-weight: bold;
}

The strategy is to make the link in the blog-title section bigger to contain the entire banner image. The banners I use at the moment are 950 pixels wide and 165 pixels high. Therefore, we want the link (denoted as A) in the blog-title to have the exact same area as the banner image. We also want to anchor this link in the top left corner (i.e. 0 pixels from the left, and 0 pixels down), so that the link will also be in the exact same position as the banner image.

The CSS also contains instructions on the color and positioning for code that contains the label blog-description. If you don’t want to display your blog’s description, you can either delete this section from your HTML file, or add the display:none property to the label parameters in the CSS file.

Hiding the Title

The CSS in style.css:

#header a {
color: #aacfec;
text-decoration: none;
}
#header a:hover {
color: #aacfec;
}

Note that the text link of your blog’s title is still displayed in the top left corner (for SEO purposes). The last step is to make this text blend in with your banner image. I used the Photoshop Eyedropper tool to acquire the RGB values, but there are resources online for matching colors as well. I matched the color of all links in the header DIV to the background of the banner image, so that the text appears invisible. However, search engines can still see this text, and you can too if you highlight the top left corner.