Graphicalwonder

CSS + Master Pages + Printing

Mar 31

Shane PerranASP.NET 2.0, SharePoint, SharePoint 2007 1 Comment

The project I am currently working on has tossed me into the deep-end of Visual Studio 2005 and Master Pages.

Part of this journey is comprehending the “Theme” approach to CSS in the App_Themes Directory versus my much accustomed to way of embedding my stylesheets.

For example when I want to include a print stylesheet I normall embed this in the page:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

While creating my print stylesheet I realised there is no way for me to add the media=print to the web.config theme reference which looks like this:

<pages styleSheetTheme="Default" />

After a little quick digging with a team-member we quickly discovered (new to both of us) a standard for print which we had no idea existed. The ability to embed your print stylesheet at the END of your main stylesheet using @ media print { }

So bascially you simply copy/paste everything from your print CSS file and place it at the end of your main CSS file inside of:

@ media print { /* Insert your print stylsheet here */ }

It’s true what they say, you learn something new every day. This seemed worth sharing as I had no idea you could do it until now and I consider myself fairly well versed when it comes to CSS.