How to add a custom header for the Arras theme

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!

45 Comments

  1. Bravo on the guide write-up! I love to edit my blog with my own requirements. That is the reason why I chose self-hosting my blog. The possibilities of editing CSS are endless this way :)

    • Thanks! You are very right, it’s much better to have the option to customize. So far, I’ve found that the CSS changes are painless and quite easy to make too.. finding out what to do – searching through the forums – is what takes more time.

  2. Hi There,
    I am trying to use your sage wisdom to get my site’s banner up. I have uploaded both a png and jpg file into the images/icons folder. I don’t have a logo, just a banner. Below is the css I have (which has not worked so far):

    /*.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/jwj2-01.jpg) no-repeat; width: 960px; height: 86px; display: block;}
    /*.blog-name a:link,

    Can you help me figure out what I’m missing?

      • The link to my website is: http://www.journeywithjanelle.com

        Do I need to delete the original “header.jpg” file from the images/icons bin?

        I also realized only some of the code I had was copied when I originally posted this. Here’s the full three lines of code that you reference in these instructions…

        /*.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/jwj2-01.jpg) no-repeat; width: 960px; height: 86px; 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; }/*

        • I can’t access your site because it automatically redirects me to your blogspot blog (which doesn’t appear to use the Arras theme).
          Anyway – no, you don’t have to delete the original header.jpg; all you need to ensure is that jwj2-01.jpg (your header image) has a height of 86 px and a width of 960 px.

          • Hi there, I customized my header with a different size image, but now I can’t change my theme settings to display featured news or latest headlines on the homepage. When I change settings it gets rid of all page formatting. I think that the sizing may have messed up the formatting for other settings- Any thoughts, does that make sense?

            /*.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/logo1212.gif) no-repeat; width: 960px; height: 150px; display: block;}
            /*.blog-name a:link, .blog-name a:visited { text-indent: -9000px; background: url(../../images/icons/logo1212.gif) no-repeat; width: 595px; height: 124px; display: block; }*/

  3. Just thought I would drop you a line and say I very much appreciate you posting this on your blog. I’ve found it very useful. You have a very nice blog and some interesting reads. Some of the subject matter are thing I’m not all too familiar with, but I love learning and reading about new things. Thanks again!

      • Good question. I’m not sure if you mean simply the button or the software I am using for the forum so I’ll explain both.

        As you know, Arras theme currently only allows you to display Links, Pages or Categories. There is a work-around, though. Sort of. What you can do is tell Arras theme to use Links as the menu. Then tell it what Link category you want to use. Of course you need to make the category first.

        What I did was tell the links to go to my various categories and also some pages as well as a forum I have in a subdomain. This lets you display pages, links and categories in a round-about way. Of course, you have nested pages which show up in your drop down menu, so you would lose that functionality since it is simply a link showing up.

        Oh, and the link order cannot be sorted easily. In fact, I’m not even sure how they can be sorted in the menu yet. On my page, for example, you would expect ‘Contact’ to show up on the far right, near or at the end. However, I cannot seem to find a way to adjust where they display in the menu,

        As for the forum software, it is phpBB3.

        • Thanks, I was asking about the software you used.

          I suspect the link orders would be displayed based on their id numbers, so if you change the id of “contact me” to a higher number it will get displayed last. (Delete it and re-create it, it will automatically get a higher number).

          • Unfortunately the only way I’ve found is to delete and re-create them. There was a plugin that addressed this issue of how links display in blog rolls etc, but it does not seem to work in the new WordPress.

  4. I also tried to follow your instructions in editing the code for a custom header with no luck. Now, it might be that the server isn’t parsing it immediately (one of the many pains I deal with using Yahoo hosting), or there does exist the possibility I just didn’t follow them as well as I thought. I’ve tried it a couple of time however, with no luck. Can you think of anything I’m doing incorrectly?

    I’ve directly edited the default.css (but renamed the original to default_old)

    I’m using Arras 1.3.6 and WP 2.9.1 at http://fairchild6.com


    #header { background: #1e1b1a; border-bottom: 5px solid #383332; padding: 0 0 15px 0; }
    #branding { width: 960px; margin: 0 auto; }
    .logo { max-width: 590px; float: left; margin: 20px 0 0 10px; }
    .blog-name { font-family: 'Trajan Pro'; font-weight: bold; font-size: 22px; margin: 0; line-height: 1em; display: block; text-transform: uppercase; }
    /*.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; }*/
    .blog-name a:hover { }
    .blog-description { line-height: 1em; display: block; font-size: 11px; font-weight: bold; color: #7d716d; margin: 0; padding: 5px 0 0; text-transform: uppercase; }

    This is my “header” section in it’s entirely. Any help would be greatly appreciated and thank you in advance.

    • Looks right to me. Just make sure the logo file your_logo.jpg is in the correct folder and that the image is exactly 960×150. Also make sure that your_logo.jpg is being recognized as an image file and not a text file (I’ve had that happen sometimes, no idea why).

  5. Pingback: AajPruned « Avant Garde Bloggies Awards

  6. Pingback: Final Nominations in Avant Garde Bloggies Awards – 2009 « Visceral Observations

  7. I’m trying to install a custom header on my wordpress page and the image appears to be super small in the corner or the screen. Can anybody tell me where I have gone wrong? Here is the code:

    /* header */
    #header { background: #000000; border-bottom: 10px solid #383332; padding: 0 0 80px 0; }
    #branding { width: 960px; margin: 0 auto; }
    .logo { max-width: 590px; float: left; margin: 20px 0 0 10px; }
    .blog-name { font-weight: bold; font-size: 0px; margin: 0; line-height: 1em; display: block; text-transform: uppercase; }
    /*.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/logo.jpg) no-repeat; width: 450px; height: 22px; display: block; }*/
    .blog-name a:hover { }
    .blog-description { line-height: 1em; display: block; font-size: 0px; font-weight: bold; color: #7d716d; margin: 0; padding: 5px 0 0; text-transform: uppercase; }

    – I’m new at this and need to know what I did wrong. Any help would be good.

    Thanks!

    Sam

  8. You Rock – Thanks for the post.

    My code line numbers were a bit off, but once I found the right code it was a snap.

    Also, had to use a full path (http://) instead of a relative path for the image.

    Other than that, it worked great.

  9. Pingback: Avant Garde Bloggies Awards 2009: Finalists « Visceral Observations

  10. Pingback: Best How-to Post « Avant Garde Bloggies Awards

  11. Hello,
    This is the best post I’ve found relating to custom headers in Arras. I have tried your advice and almost get there, but not quite.

    I’ve posted a .jpg of my result on my site so you can see what I’ve come up with:

    Below is my entire css.default header section. I have tried masking all the lines, one line at a time and everything I can think of and still can’t manage to get a clean banner. Any further advice would be greatly appreciated. THANK YOU! Chris

    /* header */
    #header { background: #8B0000; border-bottom: 5px solid #DAA520; padding: 0; }
    #branding { width: 980px; margin: 0 auto; padding: 0 0 20px; }
    .logo { max-width: 590px; float: left; margin: 21px 0 0 10px; }
    .blog-name { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; font-size: 30px; margin: 0 0 3px; line-height: 1em; display: block; text-transform: none; letter-spacing: 1px; font-weight: 700; }
    /*.blog-name a:link, .blog-name a:visited { color: #DAA520; text-decoration: none; }*/
    .blog-name a:link, .blog-name a:visited { text-indent: -9000px; background: url(../../images/icons/DSBanner1a.jpg) no-repeat; width: 960px; height: 150px; display: block;}
    /*.blog-description { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; line-height: 1em; display: block; font-size: 18px; font-weight: 700; color: #DAA520; margin: 0; padding: 3px 0 0; text-transform: uppercase; }*/

  12. Hi there,

    Thank you for the info.But,after doing what you have said,my logo is hidden behind the banner (I guess).So,how?

    This is my work:

    /* header */
    #header { background: #1e1b1a; border-bottom: 5px solid #383332; padding: 0; }
    #branding { width: 980px; margin: 0 auto; padding: 0 0 20px; }
    .logo { max-width: 590px; float: left; margin: 21px 0 0 10px; }
    .blog-name { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; font-size: 22px; margin: 0 0 3px; line-height: 1em; display: block; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
    /*.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/18high1.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; }*/
    .blog-description { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; line-height: 1em; display: block; font-size: 11px; font-weight: 700; color: #7d716d; margin: 0; padding: 3px 0 0; text-transform: uppercase; zoom: 1; *display: inline; }

    Any idea?

    • Yes, that is how the theme is designed. You can try increasing the width from 960 to 1000 or so, but if I remember correctly, that does not work. The other way is to just change the header background from white to a color picked from your banner, so there is continuity.

  13. Ciao to all!
    There is any limitation about the images used in the style? For example, I tried to substitute the topnav.jpg with another jpeg, but it doesn’t show. Is there any rule that I have to follow? Size? Number of colors?
    After, I will try to modify also the header :-)

  14. Hello this appears to be simple, but I cannot find what you mean by 72, 73 and 74. If would be easier for newbies like me to know what these refer to. That is the text they refer to? Can you please help me out?

    • Sure, there is always that option :) But if your hosting provider does not have a source code editor, you can download and use a free editor like Crimson Editor. It will show you the line numbers.

  15. Hi there!

    Thank you for taking time to make a tutorial about this subject.. However..

    I tried following the steps to edit legacy.css, and this is what I came up with:

    /* header */
    #header { background: #1e1b1a; border-bottom: 5px solid #383332; padding: 0; }
    #branding { width: 980px; margin: 0 auto; padding: 0 0 20px; }
    .logo { max-width: 590px; float: left; margin: 21px 0 0 10px; }
    .blog-name { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; font-size: 22px; margin: 0 0 3px; line-height: 1em; display: block; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
    /*.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/myawesomebizbanner.jpg) no-repeat; width: 960px; height: 150px; display: block;}
    /*.blog-description { font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; line-height: 1em; display: block; font-size: 11px; font-weight: bold; color: #7d716d; margin: 0; padding: 3px 0 0; text-transform: uppercase; }*/

    My image height is 150px, and width 960px
    Arras theme version is 1.5.0.1
    I uploaded the new legacy css back into themes/arras/css/styles
    And I uploaded the image using FileZilla into the correct folder, which is http://myawesomebiz.com/public_html/wp_content/themes/arras/images/icons

    But nothing changes once I upload the edited css files back into my site.

    I noticed something strange though. After uploading the new css into my site.. I tried to download the css again into my computer; after checking the legacy.css that I edited, it all went back to the original code.. Everything I edited disappeared. I made sure that I overwrote the old file by the way.

    my site is http://myawesomebiz.com

    I hope you can help me.. Thank you in advance.. :)

  16. Hi, I am completely new to websites and CSS and everything. I have followed all of your directions and have tried to incorporate tips from others’ comments–all to no avail. My custom header appears to be where it’s supposed to be (because it is clickable), but I can’t see it.

    Here is my code (I don’t know why it appears with the large spaces in between. That’s how it looks on HostGator’s text editor. Hope it’s still understandable):

    My web site is: fanempower.com

    /* header */
    #header { background: #1e1b1a; border-bottom: 5px solid #383332; }
    .logo { max-width: 590px; float: left; font-weight: 700; font-family: ‘Segoe UI’, Arial, Helvetica, sans-serif; text-transform: uppercase; }
    .blog-name { font-size: 22px; letter-spacing: 1px; }
    /*.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(http://fanempower.com/public_html/wp-content/themes/arras/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(http://fanempower.com/public_html/wp-content/themes/arras/images/icons/logo.png) no-repeat; width: 450px; height: 22px; display: block; }*/
    .blog-description { font-size: 11px; color: #7d716d; }

    I would really appreciate your help! Thank you!

  17. We stumbled over here coming from a different web page and thought I
    might as well check things out. I like what I see so now i’m following you.

    Look forward to exploring your web page yet again.

  18. See, it is the springs that allow us to be able to lift the heavy garage
    door using just a slight bit of force. It often comes
    in two varieties one with dual flexible sides and one that has a hard
    side and a flexible side that looks a lot like wood
    molding. If your garage door is old and worn out, a new one can do a lot to improve the look
    of your home.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>