7 thoughts on “Replacing the website header when printing web pages

  1. Why not just use an image that prints nicely? Either a gif (with the transparency corrected), or a png?

    And why Javascript? Could you not include both logos on the page, and show/hide using CSS?

    I’m interested to know what made you go with this solution!

  2. Two questions asking the same thing: why didn’t I just include both images in the HTML and use CSS to hide the print header?

    As I said in the post, “As there are over 20 styles—in true Blue Peter style—for speed, I chose to use (double—sided) JavaScript.”

    A “style” in TERMINALFOUR (T4) Site Manager-speak, the content management system we use at St Andrews, equates to a page layout, more or less. They sort of equate to themes in WordPress.

    I heavily underestimated how many we have: I said over 20 styles, we actually have 114 for the main University website, and 437 for all the websites within Site Manager. Each one would need to be edited manually to insert the print-only header in the right place, and this would take days of work. Even if the whole web team turned their hand to it.

    And not only editing the HTML files, but also making sure that the various CSS files had the code to hide the print-only header, and show it again in the various print stylesheets.

    I didn’t have weeks to do this; I had at most two days. We had to get this done quickly, partly for political reasons, partly because we’re in the middle of a pretty massive project and couldn’t assign any more resource to it. It had to be a quick win on a tight schedule.

    And that is why I chose to use JavaScript: for speed. Almost every page on the main University site pulls in a JavaScript file called jquery-common.js, almost every page pulls in the common site-wide style sheet and the print style sheet.

    So rather than days and days of manually editing T4 styles I took the practical option and injected the appropriate code into the page with JavaScript. It broke three sections of the site, which I regret, but I quickly fixed it within a minute or two of finding out.

    The next time we need to edit the styles, or embark on a site-wide redesign, then we’ll move the print-only header into the HTML. Until then this works fine.

  3. I suppose that when all a website’s supported browsers support SVG, it would be possible to have one SVG logo that looks good both on-screen and in print, and optionally change its display in print via CSS (say, making it black-and-white instead of colour, and revealing more detail if required).

  4. @Tavis — agreed, although our colour and mono crests/logos are completely different. But the principle would be the same.

    Like I said, obviously, not clearly enough in the original post: we needed to get this done really quickly which was why I chose the option went went with.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s