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.

Archive /

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

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

Page specific stylesheets


Reply


5 Posts   2308 Views

Avatar
thebestsophist

Community Member, 7 Posts

20 April 2008 at 7:56am

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.

Avatar
Willr

Forum Moderator, 5513 Posts

20 April 2008 at 12:14pm

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

Avatar
Sean

Forum Moderator, 922 Posts

20 April 2008 at 11:08pm

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.

<?php
class MyPage extends Page {
...
}
class MyPage_Controller extends Page_Controller {
function init() {
parent::init();
Requirements::themedCSS('MyPage');
}
}
?>

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.

Sean

Avatar
Sam

Administrator, 685 Posts

21 April 2008 at 1:04pm

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() {
parent::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
array_reverse($classes);

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

Avatar
Sean

Forum Moderator, 922 Posts

21 April 2008 at 1:23pm

Good idea!