How to attach a print CSS file [#1528596]

Apologies up front if this has already been documented somewhere but I’ve tried searching for a way to do this without success.

I have a working Omega sub-theme that I would like to add a CSS file to for printed output.

I’ve tried the standard approach of adding the following line to the .info file for the sub-theme:

stylesheets[print][] = grgprint.css

This adds the print style sheet but it appears before the sub-theme style-sheets so the print styles get overridden by the subsequent screen styles.

I’ve also tried adding the following lines to the .info file for the sub-theme:

css[grgprint.css][name] = 'Your custom print styles'
css[grgprint.css][description] = 'This file holds the print CSS of your theme.'
css[grgprint.css][options][weight] = '99'

This adds the CSS file but it’s not media specific and therefore is applied to the screen too:

... @import url("http://grg7test/sites/all/themes/grg_theme/css/grgprint.css?m2bj6j");

Could you tell me if it is possible to add a CSS file for just media=”print”?

Many thanks.

Comments

Comment #1

dlshannon CreditAttribution: dlshannon commented 17 April 2012 at 01:10

Steve,
I had a related problem and took a different approach, but my solution may also apply to you.
I'm on Bartik and just wanted the sidebars to print. So, I copied Bartik's print.css into my sub-theme, modified it, added the print.css pointer to my sub-theme.info file, and nothing happened. I flushed caches countless times, refreshed the page countless times, you name it. My sub-theme's print.css was being ignored. After 4 hours of experimentation I finally discovered that all I needed to do was reselect my sub-theme in Admin/Appearance.
As to the specifics:
1. I added "stylesheets[print][] = css/print.css" as the last stylesheet declaration in sub-theme.info.
2. I deleted some of the code in my sub-theme's copy of print.css to get the sidebars to print.
3. I accidentally discovered that I needed to reselect my sub-theme.
I hope this helps.

Comment #2

mlecha CreditAttribution: mlecha commented 19 April 2012 at 18:13

Hi,

I added:
stylesheets[print][] = css/print.css

To the end of my omega based theme.info file and it seems to work fine.

Turned off the div and sections I didn't want to print:

#zone-branding, #zone-menu, #breadcrumb, #region-sidebar-first, #region-sidebar-second, .node-links, .field-name-field-recipe-tags {
	display:none;
}

And to fix text that was running off of the paper and not printing:

#region-content, #zone-content {
	width: auto; 
	margin: 0 5%;
	padding: 0; 
	border: 0;
	float: none !important;
	color: black; 
	background: transparent;
}

Comment #3

steve65140 CreditAttribution: steve65140 commented 30 November 2012 at 15:57

Many thanks.

I've tried both proposals and the print style sheet is still being loaded before the Omega width specific style sheets (global, default etc.) so these are overriding what's in the print style sheet.

Comment #4

letrotteur CreditAttribution: letrotteur commented 13 December 2012 at 18:59

Actually, Found out you could use something like this

; PRINT STYLESHEETS

css[vdm-print.css][name] = Styles pour impression
css[vdm-print.css][description] = Styles generaux pour impression
css[vdm-print.css][options][weight] = 20
css[vdm-print.css][options][media] = print

in your .info file wich output

<style type="text/css" media="print">link_to_stylesheet</style>

I assume default is 'all' and you can pass other options with the [options][media] =

Comment #5

Willysino CreditAttribution: Willysino commented 28 January 2013 at 12:06

thanks "dlshannon" without your help I would have been impossible to discover that tiny detail

Comment #6

fubhy CreditAttribution: fubhy commented 28 January 2013 at 12:25

Status:

Active

» Fixed

Comment #7

11 February 2013 at 12:30

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #8

james.nt@ameexusa.com CreditAttribution: james.nt@ameexusa.com commented 12 August 2014 at 15:04

Issue summary:

View changes

This might help someone!

The print.css file changes will be visible only in the print dialog window and not in the new tab that is opened by the print module. There are few settings in the Print module like

1. Open the printer-friendly version in a new window
2. Send to printer
etc.. in config/user-interface/print

But the print.css will only appear on "send to printer" dialog and cannot be seen on the new window that is opened when you click the link because you are still in the screen media and not in print.

Before all this, the important step is to enable or call the print.css file from your template info file with the below syntax
stylesheets[print][] = css/print.css