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.

Template Questions /

Requirements css order


Reply


6 Posts   1983 Views

Avatar
Tonyair

Community Member, 81 Posts

25 June 2010 at 12:58am

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) %>
..

Avatar
TotalNet

Community Member, 181 Posts

25 June 2010 at 10:53am

Edited: 25/06/2010 10:59am

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

Avatar
Tonyair

Community Member, 81 Posts

25 June 2010 at 5:33pm

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

Avatar
Willr

Forum Moderator, 5513 Posts

26 June 2010 at 3:59pm

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

Avatar
Tonyair

Community Member, 81 Posts

27 June 2010 at 3:49am

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

Avatar
Shauna G

Community Member, 52 Posts

15 July 2010 at 2:46pm

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