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.


Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page specific stylesheets


5 Posts   2295 Views


20 April 2008 at 7:56am Community Member, 7 Posts

Is there a good way to call page-specific stylesheets into the header (and this is the really important part) below where the CMS inserts all the stylesheets set by _config.php?

I'm developing a site where several of the pages are going to have a lot page specific stylings. Since stylings are rendered in the order they are called, I need the styles for the individual page to come after the stylesheets common to all pages, or else they get canceled. While I could put !important at the end of every style, it isn't the optimal method.


20 April 2008 at 12:14pm Forum Moderator, 5511 Posts

You could apply in the template - <body id="$URLSegment"> then in your css file use this ID in your stylesheet files. Eg on the home page the html output will be <body id="home"> then in the css you could do p { style of something } #home p { style of something on with a body id of home.

This method only really works if you know the cms user isnt going to change the url segment!. Another method is that if each different page style has its own page type then use the page type to send various css files


20 April 2008 at 11:08pm Forum Moderator, 921 Posts

For each specific page that requires an additional stylesheet, do they have their own page type, in other words, are they not just of the default "Page"?

If they have their own page type, you can tell the controller to add an additional stylesheet into the <head> of the HTML document, without adding it to the template itself.

class MyPage extends Page {
class MyPage_Controller extends Page_Controller {
function init() {

Then, if you access a page that has "MyPage" applied to it, the MyPage.css file will be added, provided that it exists within the theme you're currently using! It should also appear after the themedCSS() stylesheets that are set on Page.php, so you don't have to call !important all the time.

Alternatively, the $URLSegment on the <body> element would work if you're just using the page-type of "Page" for all your pages, as Will said, but it's a bit fragile, as the URLSegment value can change when someone changes the title of a page.

My suggestion would be that if you haven't already, create the additional custom page types like the example above, and apply it to any page in the CMS that requires a specific stylesheet. Create an additional page type for any page that requires a separate stylesheet. This would be the optimal solution, rather than relying on $URLSegment being a correct value.



21 April 2008 at 1:04pm Administrator, 685 Posts

Sean's approach would work well, because there's generally a tight relationship between the class of the page you're using and the behaviour / display / etc of the page.

This piece of code is a slight improvement: it will automatically include stylesheets based on the class hierarchy, which means that you don't need explicitly include the stylesheet on each of your page classes.

class Page_Controller {

function init() {
// Build an array of classes: array( 'SubclassOfMyPage', 'MyPage', 'Page' );
$class = $this->class;
while($class && $class != "SiteTree") {
$classes[] = $class;
$class = get_parent_class($class);

// Reverse that so that the CSS files are included in the right order

// Include each one of those
foreach($classes as $class) Requirements::themedCSS($class);


21 April 2008 at 1:23pm Forum Moderator, 921 Posts

Good idea!