css Archives | Aldosoft

The Thesis theme for WordPress is arguably the most advanced premium theme for WordPress-driven web sites. It combines fantastic layout flexibility (1-, 2-, and 3-columns, in various arrangements) with strong design customizability (colors for virtually every element are customizable, plus borders, padding, fonts and sizing, etc.) and terrific typography. Out of the box it looks great in all major web browsers, and can be customized wildly to achieve incredible diversity in visual design.

But, oddly, printing pages from a Thesis-based site will often remind you of how the web looked in 1996. That’s because by default the Thesis theme applies its styling only to on-screen display. Printing is entirely unstyled:

Thesis on-screen vs. printed

The gory details of the how and why are in a DIYThemes forum posting I made a couple days ago, Thesis prints unstyled by default. This is not good. Fortunately, it is possible to extend Thesis with PHP code, in ways that most themes would never dream of, and this gives us options for better printing.

The beginning of a solution is to add a stylesheet for print; the recommended placement is in thesis/custom/print.css. Then you add the link tag to your site via a hook function in your custom_functions.php file:

function add_print_stylesheet() {
    echo "\n";
    echo '<link rel="stylesheet" href="' . THESIS_CUSTOM_FOLDER . 
         '/print.css" type="text/css" media="print" />';
    echo "\n";
}
add_action('wp_head', 'add_print_stylesheet');

Now you have an active, but empty, print.css stylesheet. You still have unstyled content when you print. What’s next?

There are two approaches you can take:

Create a new print.css stylesheet from scratch, adding only the minimum styling required to make printouts look the way you want. Ultimately, this can produce the best results.
Import the on-screen stylesheets into the print stylesheet, and then add further additions, customizations, and overrides from there.

The second option will result in printouts looking exactly like your site does in a web browser. For some kinds of content this will not be ideal, but for most pages it’s better than being completely unstyled when printed, and it is a lot easier than writing a new stylesheet from scratch. If you’re looking for the quickest way to get to “pretty good,” this is the way to go.

To do it, put this in your print.css file:

@import url("../style.css") print;
@import url("layout.css") print;
@import url("custom.css") print;
#sidebars {
    display: none;
}

The #sidebars block removes your sidebars when printing. This is what most sites will want to do, but if you don’t, just delete lines 5-7.

Tag: css

Apply Thesis Styles in Print