Current status of the Ning Platform is always available on the Ning Status Blog.

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.

How to set up your print stylesheet

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

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

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed. (There are many different media you can use for stylesheets, such as for handheld, TV, projection etc. - see a full list of media typesfor more.)

What to put in your print stylesheet

The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don't need to repeat any colour or branding CSS commands as they'll already be taken from the main stylesheet.

Generally speaking, you'll want your print stylesheet to make the following happen when users hit that print button:

Remove unwanted items

Usually it's just your organisation logo and page content that you'll want to appear on the printed version of the web page. You'll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.

There may be certain isolated items you'd prefer weren't printed so you can simply assign theseclass="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: nonecommand:

#header, #nav, .noprint {display: none;}

You may also want to remove certain images and adverts, especially animated images as these won't make sense when printed.

Format the page

There's nothing worse than printing off a web page to find the last few words of each line cut off. It's also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you'll need are:

width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and<table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:

#container, #container2, #content {width: 100%; margin: 0; float: none;}

Change the font?

Some print stylesheets do change the font size (often to 12pt) but this isn't generally a very good idea. If users increase text size on the screen then the text will print in this larger font size... unless you specify a fixed font size in the print stylesheet.

Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.

Do also bear in mind that background images and colours don't print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.

Links

Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:

a:link, a:visited {color: #781351}

For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It's otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example and find out how to do this by reading this Improving link display for print article.

Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don't do this on a live website!). Keep adding commands until you're happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

You've now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you'd be mad not to use one!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Nice!
  • Hector,

    I am looking for the simplest method of printing a Ning Blog Post. Preferably a simple "Print" button that produces a PDF of the post to be downloaded.

    Does what you are talking about above have anything to do with that? Also, I am not comfortable modifying any HTML code for my site unless it is a drop dead simple cut and paste into an obvious place easy to find.

    I am a total newbie to Ning and NCS. I am open to you steering me in the right direction if need be.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Scott Bishop and Bizz are now friends
10 hours ago
Suzie Nielsen is now friends with Bizz and Rosas † Negras
yesterday
snow wolf aka lisa adams updated their profile
yesterday
Katherine Virginia Johnston updated their profile
Friday
Rosas † Negras replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"you are welcome ... any question, as you can see, we are all ready to help you"
Thursday
Scott Bishop replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
"This is great but you lost me at <script>, lol. 
Are you for hire or can you recommend someone? 
Th…"
Thursday
Cindy Dean Mccoy posted a discussion
 Did anyone else do the "Thank you for your loyalty" survey and never hear back from the manager ab…
Thursday
Bizz replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"Hi Suzie
First off I would say don't worry about all the SEO stuff as you have a good member base a…"
Thursday
Suzie Nielsen replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"Thank you! Nice site!
 "
Thursday
Alex Ning Support replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"Hello David,
It's true, we take a 5% fee of each transaction, plus Stripe or PayPal takes their fee…"
Thursday
Alex Ning Support replied to Anastasia_Ning_Support's discussion
Activity feed update
"Hello Kinga,
Would you mind specifying what you mean by 'The Discussion group changes'?
If you mean…"
Thursday
Florian Ehrlichmann, First Visit Of Ecom, Zacchary and 12 more joined Ning Creators Social Network
Thursday
More…

Meanwhile, you can check our social media channels