jQueryUI ThemeRoller styles not displaying in print version

Question

I'm using ThemeRoller and jQueryUI on my page and the styles are not being applied to the print version.

Is there a setting somewhere in jQueryUI that would change media to all instead of screen? Or is there something else that's preventing these styles from being applied to the print version.

Print is different for certain broswers and printers. That is why the print version should always be as basic as it can possibly be. — James Hay, Aug 12 '11 at 02:53

Seth · Accepted Answer · 2011-08-17T16:57:52.517

6

Background images applied in CSS do not print (by default). If this is the issue you are seeing it could be why. Are there specific things that aren't printing?

edited Aug 17 '11 at 16:57

answered Aug 10 '11 at 23:42

Seth

6,240
3
28
44

1

For this answer to be correct, you need to qualify your "do not print" statement with "by default in most browsers." See my answer for how you get this to work. – Sumo Aug 17 '11 at 16:42
Looks like this is the reason for the styles not showing up. Guess what I need to wait for is themeroller to make a good looking print version, or at least unhide the un-selected accordion content divs. – Jerry Aug 19 '11 at 17:19

Sumo · Answer 2 · 2011-08-17T16:41:14.367

In most browsers, printing background colors and images is disabled. You need to enable that before you will be able to see the styles properly when printing.

In IE, do a print preview, then click the Page Setup button. You'll see a Print Background Colors and Images checkbox.

In FireFox, do a print preview, then click the Page Setup button. You'll see a Print Background (colors & images) checkbox.

In Chrome, you can't without the IETAB extension unfortunately. See this support thread.

And, to prove that background images applied in CSS do in fact print when the setting in the browser is turned on, take the following code and put it in a basic HTML page. Open it up in IE, FireFox, or other browsers that support the image printing setting. Then, toggle the setting on/off. You'll see the small arrow image appear/disappear in the print preview.

    <style type="text/css">
        .link {
            background: url(http://www.famfamfam.com/lab/icons/silk/icons/control_play.png) no-repeat;
        }
        .link a {
            padding-left: 18px;
        }
    </style>

    <div class="link">
        <a href="#">Test Link</a>
    </div>

score 0 · Answer 3 · answered Aug 17 '11 at 19:59

You can resolve this simply by ensuring that the jQuery Theme Roller CSS file has the media attribute. It has nothing to do with jQuery UI, it is in the intrinsic nature of browsers.

change

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="screen" />

to this (or add both)

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

jQueryUI ThemeRoller styles not displaying in print version

3 Answers3