Print.css and your website’s logo

Posted by Sibran - 15/10/07 at 03:10:16 pm

Every website needs a print style sheet, especially informative websites. I thought about a little trick, to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper.

Preparation

Make a image in Photoshop that you want to be printed. You can use your company logo and/or the url.

Integration

1. At the print.css somewhere between the <head>-tag
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />

2. Insert this code in your html/php/aspx/… file:
<div id="print-logo"><img src="/img/YOUR-IMAGE.gif" alt="Whatever" /></div>
OR a better solution is <img src="/img/YOUR-IMAGE.gif" alt="Whatever" id="print-logo" /> (thanks Nathan)

You can place this code wherever you want, I prefer after the <body>-tag of before the </body>-tag. This way, your logo will be presented at the top or bottom of your entire content.

3. Insert this code in your general style sheet:
#print-logo {display:none;}

4. Insert this code in your print style sheet:
#print-logo {display:block;}

Result

If someone prints your webpage, your logo and/or url is displayed on the printed page. Here are some examples that I made:

Google
Yourwebsite
Ess
Icons

You can find a lot of free icons on the web, check the post of Smashing Magazine “Freebies Round-Up“

If you define your print style sheet, don’t forget to define your body tag font size and font family. It’s more fun to read Tahoma or Arial, then Times New Roman.

Only print what is necessary. Navigation, footer or header are necessary in your website, but when you print a webpage, you only need the important content parts.

16 Comments »

RSS feed for comments on this post. TrackBack URI

  1. I actually do this already, but be aware that the image(s) will also appear on your page if viewed with CSS turned off. In my case the branding appears as css background images so it is a desirable thing to have the substitute show when CSS is disabled.

    Comment by Dave — October 16, 2007 #

  2. Yes indeed, that’s exactly the way I work. The brand logo is in the css background, mostly with an “a-tag displayed blocked” around it to keep it linked.

    If css is disabled, the branding logo of the printing ID will be displayed.

    Comment by Sibran — October 16, 2007 #

  3. Using a background image is not a good solution, as background images are rarely printed. Use the img folks

    Comment by steve — October 16, 2007 #

  4. Did you read my post? :)
    That’s what my post is all about, using an image for printing, but not showing in your html…

    You could position your websites logo as in image in your html, but from time to time, you don’t have the opportunity that your logo is at the top or bottom of your page. That’s why I wrote this article about.

    Comment by Sibran — October 16, 2007 #

  5. Yeah, we have problems to print backgrounds, so this solution is very good to solve this problem :)

    Comment by Carlos Eduardo — October 16, 2007 #

  6. Like dave said above. If the user has css disabled your image will show up. A better solution if your layout will allow it is just to simply have your logo in an image field in the header where it will appear when printed.

    However, if your layout doesn’t allow and for use of this technique there’s no real need for the extra div tag that I can think of. Alls the extra div tag does is adds to your markup.

    You could simply tac-on a id or class tag onto the image and simply use something on the lines of img#print-logo {display:none;}, img.print-logo {display:none;}

    Cheers

    Comment by Nathan — October 17, 2007 #

  7. [...] Print.css and your website’s logo Mit einem kleinen Trick lässt sich beispielsweise das Logo einer Web-Seite ganz bequem in die Druckversion einfügen. [...]

    Pingback by Nachlese Oktober 2007 - Die Seiten des Monats | Nachlese | Dr. Web Weblog — November 13, 2007 #

  8. [...] Print.css and your website’s logoEvery website needs a print style sheet, especially informative websites. This article presents a little trick, to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper. [...]

    Pingback by Best Of October 2007 | Best of the Month | Smashing Magazine — November 13, 2007 #

  9. [...] Print.css and your website’s logoEvery website needs a print style sheet, especially informative websites. This article presents a little trick to give your printed page the logo and/or url, or whatever picture you would like to see on the printed paper. [...]

    Pingback by Best Of October 2007 | Blog — November 13, 2007 #

  10. [...] sure you check: - What Beautiful HTML Code Looks Like - Print.css and your website’s logo (an article I wrote) - BlueprintCSS 101 - A List Apart: Findings From the Web Design Survey - [...]

    Pingback by Ess - Sibran Lens » Blog Archive » The best of October 2007 by Smashing Magazine — November 13, 2007 #

  11. [...] Print.css and your websiteâ??s logoEvery website needs a print style sheet, especially informative websites. This article presents a little trick to give your printed page the logo and/or url, or whatever picture you would like to see on the printed paper. [...]

    Pingback by { Studio Rhoad } Media Design & Photography» Blog Archive » Best Of October 2007 — November 13, 2007 #

  12. Your company logo should probably be in your HTML and not as a CSS background image because it’s content, not decoration. That way you don’t have to bother about changing its display depending on whether its for the screen or print. You can still put an image in a hx tag if it needs it and give it appropriate alt text for those who have images off.

    Comment by John Faulds — November 14, 2007 #

  13. [...] Print.css and your website’s logo 每个网站都需要有一个让打印出来的页面很漂亮的样式表,尤其是信息类网站.本文介绍了一些技巧,教你如何美化 [...]

    Pingback by 2007年10月小结 | mashableCN — November 16, 2007 #

  14. [...] 6、如何编写打印CSS？ [...]

    Pingback by 行搏客 » Smashing Magazine 2007年10月最佳 — November 19, 2007 #

  15. very interesting, but I don’t agree with you
    Idetrorce

    Comment by Idetrorce — December 15, 2007 #

  16. Forgive me for coming into this conversation late, but mine is an end-user problem that I have never as a self-confessed amateur been able to suss. It would be best for me to just ask the Q’: What, if any, is the best format to use when saving a graphic, i.e., logo, for sending across, say, a network that will always be printed perfectly…or at least resemble the logo while not throwing up any pixilation? If anyone is still concerned with this, an explanation would be appreciated. Thanks, Kai

    Comment by Kai — April 25, 2008 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.