Comments on: How to add a custom header for the Arras theme

By: MW

MW — Wed, 06 Jul 2011 22:11:58 +0000

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!

By: Aisha - Fitness Motivator

Aisha - Fitness Motivator — Sun, 03 Jul 2011 23:35:28 +0000

Thank you so much for this tutorial! As someone who’s not so great with html, it really helped me and I was able to upload a pretty header, yay!

By: rakesh kumar

rakesh kumar — Wed, 29 Jun 2011 22:23:02 +0000

Thanks a lot.I was looking for this for a long time.

By: Emily Post

Emily Post — Tue, 17 May 2011 17:37:57 +0000

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; }*/

By: melardenio

melardenio — Tue, 19 Apr 2011 06:56:02 +0000

I’m still having problem with my arras theme. I wanted to add adsense on the Headers.. anyone here already done it?

By: Gil

Gil — Wed, 30 Mar 2011 11:58:35 +0000

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..

By: Lekhni

Lekhni — Wed, 16 Mar 2011 22:15:00 +0000

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.

By: Kirby

Kirby — Wed, 16 Mar 2011 21:35:02 +0000

How do I find the line numbers? Do I need to count from top to bottom line by line?

By: Lekhni

Lekhni — Wed, 16 Mar 2011 12:21:34 +0000

Line numbers.