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

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Headers of various widths

2 Posts 1387 Views

ThereBeDragonsHere

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 Page.ss'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.

Willr

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

Return to top