selective printing

brunette · #1 (**permalink**) Aug 22nd, 2006, 14:32

I'd like users to able to print the pages of my site without ending up with bits of the layout and images printing out too. Do I need to create a text-only version of every page of my site to achieve this, or is there another way to do it?

Liina

moojoo · #2 (**permalink**) Aug 22nd, 2006, 14:35

You want to use a print style sheet. Make a sep css file and link to it like so. In that file you can specify your print properties, what elements are visible and not visible etc...

Code: Select all

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

A print style sheet may look something like this:

Code: Select all

body {
    font-family: Times;
    font-size: 12px;
    color: #000;
}

#calendar, #sidebar, #nav, #navmenu, #menubar, #menubar li a, form, fieldset, legend, #footer, .view, .email, .directions, .directorylist, #sidebar, #sidebar li a {
    display: none;
    visibility: hidden;
}

a:link, a:visited, a:hover {
    color: #000;
    text-decoration: underline;
}

.memview {
    border:0;
    padding: 0;
}

brunette · #3 (**permalink**) Aug 22nd, 2006, 17:48

hello moojoo

thanks for your quick reply. I am not 100% good at CSS so I am not a bit sure about your asnwer. Do you mean to put <link rel="stylesheet" href="print.css" type="text/css" media="print" />
on the home.html and to create a new page.css, then to put the A print style sheet code on the print.css?
hope to hear from you asap.

brunette

moojoo · #4 (**permalink**) Aug 22nd, 2006, 17:50

Just make a whatever.css file and in your HTML put the below in the <head> section

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

You should also link to a normal style sheet as well same method but use media="screen" instead.

For Example I have this in every page on my site:

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

brunette · #5 (**permalink**) Aug 22nd, 2006, 18:25

hi moojoo

I have done it, but it won't work as I need. I have just checked the print browse and there is still text with images and buttons when I opened the page. Here is code under <head> in the page hmtl

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

here is code in maintext.css

.style6 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

I have copyied the text from you and pasted it on print.css

is there something wrong?

moojoo · #6 (**permalink**) Aug 22nd, 2006, 18:34

All that is doing is applying that font and size to anything associated with the class .style6. You need to specify what you don't want printed such as:

img, #foo, #farg {
display:none;
visibility:hidden;
}

or whatever. Also make sure you are pointing to the files correctly i.e. if you have a css folder it would be /css/foo.css vs just foo.css.

brunette · #7 (**permalink**) Aug 23rd, 2006, 13:16

Hi

I have tried it and it works well, but there is still blank part of the page when the images are invisibles.

I ask if it is possible to use the printing selective on template html.

moojoo · #8 (**permalink**) Aug 23rd, 2006, 16:36

Yo can do various things like form#foo p, input {display:none;} etc etc.. You can be very very selective on what prints and what does not. So if I understand correctly you are getting empty white space above or below your content when print preview is activated? Post a url etc so I can take a look.

BTW:

form#foo p, input {display:none;} would do this: hide any form with the id of foo and subsquently it's paragraphs if any and any inputs.

brunette · #9 (**permalink**) Aug 23rd, 2006, 17:59

hi

url? my web hosting is closed for a while and I'll open it soon.

here is my page html that is connected to two pages print and foo.css.
here is page.html

Code: Select all

 
<head>
<link rel="stylesheet" href="css/foo.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/print.css" media="print" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

here is print.css

Code: Select all

body {
    font-family: Verdana;
    font-size: 12px;
    color: #000;
}
#calendar, #sidebar, #nav, #navmenu, #menubar, #menubar li a, form, fieldset, legend, #footer, .view, .email, .directions, .directorylist, #sidebar, img, #sidebar li a {
    display: none;
    visibility: hidden;
}
a:link, a:visited, a:hover {
    color: #000;
    text-decoration: underline;
}
.memview {
    border:0;
    padding: 0;
}

here is foo.css

Code: Select all

body {
 background-color: ##FFFFCC;
}
body, td, th {
 color: #FFFFFF;
}
h1, h2, h4 {
 color: #330000;
}
h3, h5, h6 {
 color: #996666;
}
a {
  color: #006666;
}
img, #foo, #farg {
display:none;
visibility:hidden;
}

i am not good enough at CSS. I ll be grateful for your help. say what is something wrong there.

moojoo · #10 (**permalink**) Aug 23rd, 2006, 19:17

Well for starters you are using code specific to a site I did a while back, so unless you have the same structure i.e. ID's, classes etc it isn't going to work for you. Those samples I gave you were just samples. You need to modify them to your needs.

i.e. if your link to your css file is foo.css then you need a file called foo.css in the location specified. Also if you want an element not to print in print.css you need to specify that element in print.css i.e. ul, ul li a {display:none;} or whatever.

For Example:

a:link, a:visited, a:hover {
color: #000;
text-decoration: underline;
}

The above will make every link black and underlined regardless of its state.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Printing	Jack Franklin	Webforumz Cafe	5	Jun 13th, 2008 12:04
Printing Frames in IE	osmenthe	JavaScript Forum	1	Jun 12th, 2006 21:31
Printing	bigdavemmu	Web Page Design	1	Sep 22nd, 2005 19:23
Printing Problem	saud	PHP Forum	3	Jul 25th, 2005 16:37
printing	spinal007	Web Page Design	2	Nov 17th, 2004 13:37

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
selective printing