Template Changes

This is probably going to be too much detail, so if you already know how to edit CSS and change colors on web pages, you'll probably want to just skip this post. If it's over your head, there are tons of HTML and CSS tutorials on the web; Google is your friend.

First things first. I chose the layout-2-both BANS template for this page. There are a few things that I don't like about the template that I'll change first. The first is the line between the header and the body:



It isn't going to work with my design, so I'll edit it out; you can use the BANS editor for all of these edits. To remove it, just delete the following lines from the CSS file, styles.css:

#line {
background-image: url('images/linebg.gif');
background-repeat: repeat-x;
height: 32px;
width: 100%;
}

Next, let's get rid of the title that overlays the header. The BANS headers all have an image on the right and a blank space on the left. The default templates use this blank space for the title of your page. I like to do it myself in the header, so this part can be removed. It's in the header.php template file. Look for the following section and remove it (don't forget to save):

<h1 id="title">
<a href="<?php print URL_PATH.">"> <?php print SITENAME."";?></a>
</h1>

Finally, I'll make the header image the right size so that at least it shows up correctly. The section that needs to be changed is back in styles.css:

#header {
margin: 0;
padding: 0;
height: 180px;
width: 100%;
background-color: #e8e8e8;
}

.headerimg {
margin: 0;
background: url('images/logo.jpg') no-repeat;
height: 180px;
width: 968px;
}

You can see that the default image width for this template is 968 pixels and the height is 180 pixels. My image is 968 by 334, so I have to change the height to 334 in two places:

#header {
margin: 0;
padding: 0;
height: 334px;
width: 100%;
background-color: #e8e8e8;
}

.headerimg {
margin: 0;
background: url('images/logo.jpg') no-repeat;
height: 334px;
width: 968px;
}

Now that the basics are out of the way, I'll work on the rest of the template. That will be in the next post.