How to add a custom header for the Arras theme

By
Lekhni
Published: November 18, 2009Posted in: Blogging

The Arras theme has a custom header option, though that fact is not readily apparent. You cannot change to a custom header through the Theme options pages. You will need a very minimal amount of CSS editing. If you’ve never done any CSS editing before, you have come to the right place :)

After the 4th or 5th inquiry about adding a custom banner header (and after noticing how many Google searchers come to my blog every day looking for a way to customize the Arras header), I have decided to write a post explaining how to add a custom header, and also how to achieve a look like mine – which looks more like a bigger logo than a custom header.

All this info (though probably not in this detail) is also available in the Arras theme forums, but you will have to spend some time hunting for it.

Uploading a Custom Header

Step 1: Create a custom header. If you want a banner header, make sure the dimensions are 960 x 150 pixels.

Step 2: Upload the header. You can do this 2 ways – (a) use wordpress’s media upload feature to upload, or (b)upload it through your hosting service to the same folder as the theme’s existing header image. If you are using option (b), you should upload it to /public_html/wp-content/themes/arras-theme/images/icons.

It doesn’t really matter which folder you use. Just remember that if you are uploading it to your theme folder and you delete the theme in future, the header file will also get deleted, so keep a backup.

Step 3: Modify the CSS file. Unfortunately, you cannot do this through the theme editor within WordPress. You will have to login to your web hosting service and edit the code through your hosting service’s editor (or download it and edit it – you don’t really need DreamWeaver to edit, just Notepad should do it).

You have 2 options here too – you can modify the default stylesheet, or create a new stylesheet, leaving the default one as it is. You can do this because Arras has the option of creating a new stylesheet – users.css, which overrides the default stylesheet.

If you are going to modify the default stylesheet (like me), then make sure you save a copy of the old stylesheet. You can download it to your computer, and also save a copy online (rename it as default-old.css). You will find the default.css file in this folder – /public_html/wp-content/themes/arras-theme/css/styles.

If you’d rather leave default.css alone, then copy all the text in default.css into users.css and start editing users.css. You will find users.css in this folder – /public_html/wp-content/themes/arras-theme/css.
Arras will automatically start using users.css.

The CSS modifications are minimal, and very simple. These are the changes you need to make :

Comment line 72. (i.e. add /* and */ respectively before and after the text)

Uncomment line 73 (i.e. remove the /* and */) and include link to your uploaded custom header.

Comment line 74

It will now look something like this:

/*.blog-name a:link, .blog-name a:visited { color: #FFF; text-decoration: none; }*/
.blog-name a:link, .blog-name a:visited { text-indent: -9000px; background: url(../../images/icons/your_logo.jpg) no-repeat; width: 960px; height: 150px; display: block;}
/*.blog-name a:link, .blog-name a:visited { text-indent: -9000px; background: url(../../images/icons/logo.png) no-repeat; width: 450px; height: 22px; display: block; }*/

Here, your_logo.jpg is the custom header you have uploaded. If you have uploaded using WordPress’s media uploader, make sure to change the path to your uploaded location.

Don’t panic if the line numbers are off by a few numbers. I know the latest theme version has some changes. Basically, look in the /*header*/ section.

Uploading a Custom Sized Logo

What if you don’t want a banner header, but just a larger sized logo? You’ll notice that the default theme only allows a 450×22 sized logo, which might be too small for some.

One way is to edit line 74 to make the logo sized larger – say 450×150 or whatever you want.

My solution to that was to create a banner header with the same background color as the header background.

To change the header background color, go to line 68:

/* header */
#header { background: #e0e0e0; border-bottom: 5px solid #d0d0d0; padding: 0 0 0px 0; }

The #d0d0d0  is the gray you see in my header. You can change it to whatever color you’d like.

Be Sociable, Share!