Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Page specific stylesheets

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

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

Page: 1
Go to End
Author Topic: 2224 Views
  • thebestsophist
    Avatar
    Community Member
    7 Posts

    Page specific stylesheets Link to this post

    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.

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Page specific stylesheets Link to this post

    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

  • Sean
    Avatar
    Forum Moderator
    921 Posts

    Re: Page specific stylesheets Link to this post

    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

  • Sam
    Avatar
    Administrator
    679 Posts

    Re: Page specific stylesheets Link to this post

    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);
    }
    }

  • Sean
    Avatar
    Forum Moderator
    921 Posts

    Re: Page specific stylesheets Link to this post

    Good idea!

    2224 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.