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.

Themes

Discuss SilverStripe Themes.

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

Setting Order of required themedCSS files


Reply

6 Posts   1571 Views

Avatar
Silverfish

2 November 2011 at 11:09pm Community Member, 59 Posts

Hi everybody,

I'm loading some CSS files with i.e. <% require themedCSS(layout) %>in my main template (Page.ss). In several included layout templates (i.e. HomePage.ss) I load additional CSS files (i.e. require themedCSS(home)).

In the generated code css files are loaded in reversal order, i.e.
<link rel="stylesheet" type="text/css" href="http://localhost:8060/themes/mysite/css/home.css?m=1320227911" />
<link rel="stylesheet" type="text/css" href="http://localhost:8060/themes/mysite/css/layout.css?m=1320076828" />

Since i would prefer to overwrite the general css declarations in layout.css with the specific declarations in home.css, i need to change the order in which the CSS files are loaded.

Anyone any hint if and how this is possible?

Thanx for any answer! :)

regards
SF

Avatar
Willr

4 November 2011 at 6:39pm Forum Moderator, 5511 Posts

No easy way to control the order for any requirements. You can control order a little easier if you use the Requirements PHP api as thats a bit more predictable.

class Page_Controller extends ContentController {

function init() {
parent::init();

Requirements::themedCSS('layout');
}

..

class HomePage_Controller extends Page_Controller {

function init() {
parent::init(); // will require page::init

Requirements::themedCSS('home');
}

Avatar
Silverfish

8 November 2011 at 12:23am Community Member, 59 Posts

Hi Willr,

thx for your answer!

Source Code says:

   public function init() {
      parent::init();

      // Note: you should use SS template require tags inside your templates
      // instead of putting Requirements calls here. However these are
      // included so that our older themes still work
      Requirements::themedCSS('layout');
      Requirements::themedCSS('typography');
      Requirements::themedCSS('form');
   }

so I don't know if this is deprecated and will be eliminated in future versions?

Currently i'm doing a workaround, passing Silverstripe CSS mechanics with i.e.:

   <link rel="stylesheet" type="text/css" href="themes/mysite/css/form.css" media="all" />
   <link rel="stylesheet" type="text/css" href="themes/mysite/css/global.css" media="all" />
   <link rel="stylesheet" type="text/css" href="themes/mysite/css/typography.css" media="all" />
   <% if ClassName == HomePage %>
      <link rel="stylesheet" type="text/css" href="themes/mysite/css/home.css" />
   <% end_if %>

What exactly are the advanteges by loading CSS files via Requirements:: that i miss by doing this?

Regards
SF

Avatar
Matty Balaam

23 November 2011 at 7:29am Community Member, 69 Posts

I've always wondered the same about the message about Requirements. Is this outdated guidance in the now rather dated BlackCandy theme?

Avatar
Willr

23 November 2011 at 9:45am Forum Moderator, 5511 Posts

Actually what you should be doing these days is using Requirements::combine_files() so you send as few CSS files as possible.

It's personal preference as to use either the PHP requirements api or the template one, personally I think that message in Page.php is wrong. Including it in the PHP code is often the best (or only way) to do it.

Avatar
Matty Balaam

24 November 2011 at 1:39am Community Member, 69 Posts

Top advice! I'm already combining my Javascript files, so that makes sense to me.