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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

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

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

Cascading Style sheets, themes, media and alternative style sheets


Go to End


10 Posts   4835 Views

Avatar
KatB

Community Member, 105 Posts

21 February 2008 at 2:07pm

Edited: 21/02/2008 2:12pm

How should I add a print style sheet? Or should that already be included in layout.css as part of the file using @media (and so on, so that typography.css also has a print media section)?

Should I include alternative style sheets in the same way?

How do I add titles to my links to the CSS files in my themes?
so that

<link rel="stylesheet" type="text/css" href="mysite/css/typography.css" />

becomes

<link rel="stylesheet" type="text/css" media="screen" title="new"  href="mysite/css/typography.css" />

?

What is the smartest way to include a special style sheet that is only in existence for one page and is quite large?

(Did that make any sense?)

Avatar
Design City

38 Posts

21 February 2008 at 9:38pm

Hi Kat,

Silverstripe's current handling of style sheets via the Requirements class (http://doc.silverstripe.com/doku.php?id=requirements) isn't the greatest. If you're trying to do anything specific with the stylesheets (like adding a print style sheet, adding alternative style sheets or serving IE stylesheets via MS conditional comments), you really need to hard code them into the template rather than using the requirements system.

There's some discussion of the reasons behind this and some possible solutions on the Silverstripe Development group (http://groups.google.com/group/silverstripe-dev/browse_thread/thread/b8bd6dd5ede2f84f) so feel free to hae a read if you're that way inclined and a comment if you want to add something.

In the meantime before it's fixed, I'd say the best way to include a print stylesheet and any alternative stylesheets is with a standard link:

<link href="mysite/css/layout.css" rel="stylesheet" type="text/css" media="print" />
<link href="mysite/css/layout.css" rel="stylesheet" type="text/css" media="all" title="alternative" />

Now, in terms of including a single stylesheet for a given page, you can either hard code it into that page's template, or perhaps more usefully use the Requirements class to include it only on pages of that pagetype.

Avatar
Willr

Forum Moderator, 5523 Posts

21 February 2008 at 10:11pm

For a site wide print stylesheet the best way is to use Requirements::themedCSS("print.css", "print"); in your Page_Controller -> init method (where the other files are included.)

Avatar
Design City

38 Posts

21 February 2008 at 10:13pm

Excellent Willr! Do you know what code that actually spits out onto the page?

Avatar
Willr

Forum Moderator, 5523 Posts

21 February 2008 at 10:21pm

Edited: 21/02/2008 10:23pm

That produces -> "<link rel="stylesheet" type="text/css" media="print" href="/themes/blackcandy/css/print.css" />"

Also might be helpful - http://api.silverstripe.com/default/Requirements.html#themedCSS

Avatar
KatB

Community Member, 105 Posts

22 February 2008 at 1:46pm

Edited: 22/02/2008 1:50pm

does themedCSS have extra options? Does it have an option for a title?

Answer: no

Avatar
Willr

Forum Moderator, 5523 Posts

22 February 2008 at 1:58pm

How do I add titles to my links to the CSS files in my themes?

You don't need title tags on your stylesheet link. Why would you put a title tag on your css file? I can't ever say Ive seen a title tag on a css file

Avatar
KatB

Community Member, 105 Posts

22 February 2008 at 6:04pm

It's not about need! It's about choice and alternatives. :) You can offer more than one style for your audience to choose from.

If you give a link a title, then it's preferred, but if you don't give one then it is persistent. A persistent style sheet will cascade through all the alternatives.

A preferred can be turned on and off :)

A List Apart: Alternative Style: Working With Alternate Style Sheets
by Paul Sowden

Go to Top