Jump to:

3431 Posts in 1025 Topics by 864 members

Template Questions

SilverStripe Forums » Template Questions » Requirements css order

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

Page: 1
Go to End
Author Topic: 1937 Views
  • Tonyair
    Avatar
    Community Member
    81 Posts

    Requirements css order Link to this post

    Hello, guys, I'm trying to lower size of my css files so i require base css files inside Page.ss and special ones (depended from displaying page) in Page Layout files, but styles from the layouts's files are included upper then from Page.ss

    I'm getting this:

    ..
    <link rel="stylesheet" type="text/css" href="**/searchResults.css" />
    <link rel="stylesheet" type="text/css" href="**/layout.css" />
    <link rel="stylesheet" type="text/css" href="**/typography.css" />
    <link rel="stylesheet" type="text/css" href="**/form.css" />
    ..

    And this is my source code:

    Page_Controller:

    public function results($data, $form){
    ...
    return $this->customise($data)->renderWith(array('Page_results', 'Page'));
    }

    Page.ss
    ..
    <head>
    ..
    <% require themedCSS(layout) %>
    <% require themedCSS(typography) %>
    <% require themedCSS(form) %>
    ..
    </head>
    <body>
    ..
    $Layout
    ..
    </body>
    ..

    Page_Results.ss
    ..
    <% require themedCSS(searchResults) %>
    ..

  • TotalNet
    Avatar
    Community Member
    181 Posts

    Re: Requirements css order Link to this post

    The ordering of requirements CSS and JScript is a constant cause of headaches for me, the only long-term solution will be to add a "priority" to them I think.

    For now though, you should be able to get the css to appear at the end of the requirements stack by putting it in your classes controller init function:

    public function init() {
    parent::init();
    ...
    Requirements::themedCSS('searchResults.css');
    }


    I've had to use this technique to implement conditional comments for IE6/7 etc.

    hope that does the trick

    EDIT: of course search is in the page controller ... you might get away with putting it in the results() function.

    Rich

  • Tonyair
    Avatar
    Community Member
    81 Posts

    Re: Requirements css order Link to this post

    Looks like double logic (first - choosing template, second - choosing stylesheet), but thx.

    That's my solution for rounded corners:

    if( self::ie_detect() ) {
          Requirements::javascript("mysite/javascript/jquery.curvycorners.packed.js");
    }

    .rounded { border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -o-border-radius:10px;}

    Cheers

  • Willr
    Avatar
    Forum Moderator
    5482 Posts

    Re: Requirements css order Link to this post

    <link rel="stylesheet" type="text/css" href="**/searchResults.css" />
    <link rel="stylesheet" type="text/css" href="**/layout.css" />
    <link rel="stylesheet" type="text/css" href="**/typography.css" />
    <link rel="stylesheet" type="text/css" href="**/form.css" />

    In this case I usually just use more specific selectors in searchResults than layout, its not like javascript where you'll get undefined errors. CSS cascades fine if you simply use more specific selectors.

    Because of how the template parser works I would have thought it have included the ones at the top of the page in a top down approach. Sounds like a bug. I like implementing a priority value (1-100) is a bit too much for this sort of thing.

  • Tonyair
    Avatar
    Community Member
    81 Posts

    Re: Requirements css order Link to this post

    sometimes u can't use specific selectors for example i'd like to include jquery plugin.

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: Requirements css order Link to this post

    If you're trying to use "searchResults.css" to override styles that are in one of the other stylesheets, then you will need to place it at the bottom of the call stack.

    Browsers read and use both CSS and JavaScript in the order their called. This is why you get "undefined" errors if you call a jQuery extension before calling the base jQuery pack. In the case of CSS, the browser just renders what it finds and if it finds another call that affects an element in a later call, then it simply overwrites the previous call.

    The cascading in CSS goes as follows:

    For styles called in the same level (say, in external stylesheets), the last call takes precedence.
    For styles called in different levels, the read order is: external stylesheet, embedded stylesheet, inline style (with each one overriding the one before, so inline styles always overwrite everything else)
    More specific styles overwrite less specific styles, so "a { color: blue; }" will be overwritten by ".nav a {color: red; }" will be overwritten by ".nav #top a {color: green;}"

    1937 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.