How To Make Custom Headers For Each Page

by Matt on July 1, 2009

Here are the few lines of CSS I used:

.custom #header { background: #000; }
.history_page #header { background: #ffd000; }
.designers_page #header { background: #203ffe; }
.about_page #header { background: #ccc; }

Making custom headers for each page is as easy as typing. Thanks to Thesis, this process takes seconds, whereas with other themes, it may take hours of sweat and tears. As far as naming each page, you should use a unique name that simplistically identifies that page. For that very reason, I use the format pagename_page. So, if your page is called “Mechanisms”, consider using mechanisms_page. You may certainly use something non-related, such as so_fresh, but that isn’t relevant and may cause confusion later.

If you have any more questions, please contact ThesisTutor [at] gmail [dot] com.

Don’t Forget To Upgrade To The Thesis Developer’s Option!

{ 2 trackbacks }

{ 13 comments… read them below or add one }

Bostin August 21, 2009 at 6:28 am

Hi Matt,
You do good work here sir. I’ve just been throwing myself into thesis the past day or so and am playing around with it before I implement it to my site.
My specific question on this video is. I’ve got the the idea about different colors, but would like to play around with images. So, ok, stole the code for background images from your twitter tutorial. However, I would like the image to align to the right, so that it won’t interrupt the site title, tag…I’ve tried background-position: right; and various others but the image just disappears. Thoughts! Thanks!

Reply

Bill Petro November 7, 2009 at 8:30 pm

Matt,

This is an answer to a question I’ve asked, unsuccessfully, on the Thesis forum.

Embellishment: how can I customize each page’s header with a different GRAPHIC?

Thanks.

Reply

Matt November 8, 2009 at 11:16 am

@Bill
.custom #header { background: url(http://youraddress.com/where_your_file_is/your_pic_name.pictype) no-repeat; }
Let me know if that works.

Reply

Jeff February 10, 2011 at 7:30 pm

I had problems with that so I used

.custom #header {background-image: url(‘http://youraddress.com/where_your_file_is/your_pic_name.pictype‘); background-repeat: no-repeat; width: 959px; height: 282px; text-indent: -9999px; }

This set the size as well for me.

Reply

Ben of BenandJacq January 16, 2010 at 10:50 pm

Sweet. I was looking to have a unique “skin” (not just header) for each different page in my nav menu, and this is going to be awesome. The tip about the css class is perfect! Thanks so much for the tip!

Reply

Lena January 22, 2010 at 1:29 pm

Matt – that was awesome! Thank you. You were quick and easy to understand. I’m off like a herd of turtles! Zoom!

Thanks,
Lena

(:

Reply

Asif Chowdhury August 17, 2010 at 3:56 pm

Wow thats a nice tutorial. I’ll definitely do that in my blog.

Bless you

Reply

Asif Chowdhury August 17, 2010 at 3:59 pm

Hey I have question.

Can I do it with every posts permalink, when it shows on a different page?

Bless you

Reply

Russell Fisher September 15, 2010 at 5:52 pm

Matt, How do you do this exact tutorial if you have made a Flash header. What I want is the flash header to only load on the home page and on all other pages in the site I want a JPEG image as the header. It will be the same for all other pages. Any help would be great.

Reply

Kyle Kosup October 12, 2011 at 6:16 pm

Hi Russell,

Did you ever find out how to do this? I’m trying to do the same thing.
Tried 40 different things…starting to go crazy… any help greatly appreciated!

Thanks!

Reply

Reko November 23, 2010 at 3:51 pm

The video stopped on me. Just when I was learning something… Sad face.

Reply

Matt December 5, 2010 at 7:19 pm

I need to get it on blip.tv. the quality and load time is teh sigh…

Reply

Be A DJ January 8, 2012 at 12:20 am

WoW

I can’t believe I just found this site.
I have been struggling with this for a long time and hats off to you for the solution

Cheers,
-Ron

Reply

Leave a Comment

Previous post:

Next post: