Snippets - Little bits of code to make you happy

Using a Print Stylesheet

16 December 2009 | Aram Balakjian | CSS, Templates

Often people want to be able to print webpages without all the menus and graphics and with all the content fitting correctly onto a page. To do this you need to create a separate print stylesheet. It would look something like this:

All you need to do to include a Print stylesheet in your page is to run a seperate Requirements call and specify that it is for print within the init() function of your Page_controller.

mysite/code/Page.php

Requirements::css("themes/MyTheme/css/print.css","print");

Then you just need to add some print styles to Print.css, something like this:

themes/MyTheme/css/print.css

#sidebar, 
#header, 
#navbar, 
#footer {
	display: none;
}
#container, 
#content{
	width: 100%; 
	margin: 0; 
	float: none;
}

Aram Balakjian

Aram is a web developer running London based agency Aab Web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Visit Aram's website: www.aabweb.co.uk

3 Comments

RSS feed for comments on this page RSS feed for all comments

MRKDevelopment
21/11/2010 11:22am (1 year ago)

One thing I don't like about this is it isn't in the theme.

This is far from Ideal because all code to do with views should be separate in a strict sense as you want to be able to switch out themes without having to adjust controller code.

If you include css in the way suggested you would have to re write a lot PHP code if you choose to change theme.
ian holmes
12/01/2011 12:27pm (1 year ago)

You can have both the screen and print media styles in the same css sheet - just use:

@media screen {

}

and

@media print {

}

This means less code to change and only one http call to download one css file for the whole site.
Pete Bacon Darwin
12/05/2011 1:44pm (9 months ago)

@MRKDevelopment:
I have found that I can achieve the requirement inside the template by adding the extra parameter in the template command:

<% require themedCSS(print, print) %>

This lives in the theme's template .ss file. The first parameter refers to the name of the css file stored in the theme's css folder. The second parameter is the media format, in this case "print".