This is a tutorial on how to customize the header in the ‘Epsilon’ Theme for WordPress. You can download this theme here.
This is what your header will look like after installing and activating the theme: (your links may be different depending on what you have already created)
First open the header file in wp-content/themes/epsilon/header.php using a text editor or, which I will be using, Dreamweaver.
Locate the following code:
| <div> <h1><a href=”<?php bloginfo(‘siteurl’);?>/” title=”<?php bloginfo(‘name’);?>”><?php bloginfo(‘name’);?></a></h1> <h2><?php bloginfo(‘description’); ?></h2> </div> |
This DIV tag contains the Blog Title and Tagline.
If you wish to delete the tagline, which in this case is TEST BLOG, just select and delete the following line from the above code:
| <h2><?php bloginfo(‘description’); ?></h2> |
Now for that pesky Blog Image:
The easiest way to change it would be to create a picture of your choosing with the same dimensions as the one provided, which for quick reference is 300w X 55h. (If you do do this make sure you create a PNG file which the one provided is.) Then name your image ‘logo.png’ and save it in the folder wp-content/themes/epsilon/images overwriting the one provided and upload it to your server.
The second, and more difficult, way gives you more control over the overall appearance. To go this route, open the stlye sheet (wp-content/themes/epsilon/style.css in your text editor and scroll down and locate the following code, which is around line 74:
| #top { height:100px; margin:auto; background:#f4f4f4 url(images/top.jpg) top repeat-y; width:1000px; border-bottom:1px solid #c3c3c3; } .blogname {
} } |
This is the “brains” of the blog title, and where you will do your damage!
I will explain what a few of these line of code are, then create a quick example for you and then let you go from there.
height:100px; - is the height of the entire header. You will need to adjust this accordingly to the size of your image so that the logo does not overlap the category links.
width:500px; - is the width of your image. Make this match the width of whatever you create.
font-size:45px; – is the size of your text if you didn’t have a picture. You need to also make this the same size as your image as this is the size of the clickable link around your image.
background:url(images/logo.png) no-repeat; – is the link to your image. Chage this to whereever your image is and to the name of your image.
The rest of it is fine left alone, if you do decide to play around with any of the code make sure you create a backup of the file encase you get carried away, mess something up, and can’t figure out how to correct it! This is always important when modifying any files.
Now for the example
I used photoshop to create the following image with dimensions 400w X100H, named it ‘sweetblog’ and saved it as a png.
I uploaded it to the same place as the original image and in my style.css file I change the following code. (compare it with the top to see the changes, I color coded them red for easy comparison)
| #top { height:130px; margin:auto; background:#f4f4f4 url(images/top.jpg) top repeat-y; width:1000px; border-bottom:1px solid #c3c3c3; } } } |
This is what I have now
Well there you have it, now try it for yourself. If your have any questions just let me know and I will be glad to help you out.
Popularity: 2% [?]
