Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Headers of various widths

Go to End

2 Posts   1065 Views


Community Member, 8 Posts

24 July 2010 at 3:17pm

Hi all,

I was wondering how I would go about creating headers of different widths for different pages of my site. I was thinking that my home page would have a tall header, but all the subsequent pages would have narrower headers, but I'm not sure how to program this. I have been attempting to do a google search for such a thing, but I guess I just can't type in the right keywords or something to find what I'm looking for. I know that it's possible because I've seen it on other people's pages, but even after sneaking a peek into their page sources I still don't know how to do it.

Does this require writing two layout.css's or two's? Or is there a way to get the files to know when they are on a main page and when they are not? Thanks.


Forum Moderator, 5523 Posts

24 July 2010 at 10:35pm

Not sure how different you want to make it but you could simply use the current template file but apply a id or class to the body tag which will allow you to style different pages with different css values.

For example edit your body tag in to something like <body class="page-$URLSegment"> then you can style headers using #header {] but if you want different styles on the homepage you can use .page-home #header to select simply the header of the homepage.