[opencms-dev] Printable View module/jsp

[Rene Hinojosa]

Greetings,

If you use stylesheets, you don't have to build a printable view module. Stylesheets will take care of it for you. just do something like this:


print.css
--------------------------
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 22px;
        background-color: white;
}
h1 {
	font: bold 1.75em/1.75em;
	margin: 1.5em 0 0 0;
}
h2 {
	font: 1.5em/1.5em;
	margin: 1.5em 0 0 0;
}
p {
	margin: 0;
}
a:link {
	color: #95122c;
}
a:visited {
	color: 261146;
}
a:hover {
	text-decoration: underline;
	font: bold;
}

#top {
	display: none;
}
#left {
	display: none;
}
#content {

}
#right {
	display: none;
}
#footer {
	display: none;
}

#mainNav {
	display: none;
}
#searchBox {
	display: none;
}
--------------------------------------------------end of file -------------------------------------------------------
screen.css
-----------------------------
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 22px;
	color: #000;
	background-color: #d2a579
}
h1 {
	font: bold 1.5em/1.5em;
        line-height: 1.0;
	margin: 1em 0 0 0;
}
h2 {
	font: 1.25em/1.5em;
        line-height: 1.0;
	margin: 1em 0 0 0;
}
p {
	margin: 0;
}
a:link {
	color: #95122c;
}
a:visited {
	color: 261146;
}
a:hover {
	text-decoration: underline;
	font: bold;
}

a.sNav:link {
	color: 000000;
	text-decoration: none;
}

a.sNav:visited {
	color: 000000;
	text-decoration: none;
}
a.sNav:hover {
	text-decoration: underline;
	font: normal;
}

a.nav:link {
        background: #CCCCCC;
        padding: 0px 5px 0px 5px; 
	color: #95122C;
	text-decoration: none;
}

a.nav:visited {
        background: #CCCCCC;
        padding: 0px 5px 0px 5px; 
	color: #95122C;
	text-decoration: none;
}
a.nav:hover {
        background: #CCCCCC;
        padding: 0px 5px 0px 5px; 
	text-decoration: underline;
	font: bold;
}

a.nav:active {
        background: #CCCCCC;
        padding: 0px 5px 0px 5px; 
	text-decocation: underline;
	font: bold;
}

#top {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #95122c;
	border: 0px;
	height: 80px;
	color: cccccc;
	font-weight: bold;
	font-size: 1.5em;
}
#left {
        font: 8pt;
	position: absolute;
	top: 110px;
	left: 0px;
	margin: 3px;
	padding: 3px;
	border: 0px;
	width: 120px;
}
#content {
	margin: 0px 150px 5px 150px;
	padding: 10px;
	background-color: #fff;
	border: 0px;
}
#right {
	position: absolute;
	top: 110px;
	height: 350px;
	right: 0px;
	margin: 2px;
	padding: 0px;
	border: 0px;
	width: 110px;
}
#footer {
	margin: 0px 150px 0px 150px;
	padding: 1px;
	background-color: #ccc;
	border: 0px;
	text-align: center;
}

#mainNav {
	font: 10pt;
	margin: 0px 0px 0px 0px;
	padding: 0px 1px 0px 1px;
	background-color: #95122c;
	border: 0px;
	color: CCCCCC;
	font-weight: bolder;	
}

#searchBox {
	position: absolute;
	margin: 0 5 5 0;
	padding: 1 5 0 5;
	//right: 0px;
}
------------------------------------------------------------end of file ---------------------------------------------------------------

As you can see, these two files are similar but the print.css doesn't render the other elements on the page. When you print the page, css automatically strips the navigation, header, and footer. You have to include them into your main template. I also created one additional stylesheet called edit.css. This one is used when you edit your pages.

Using stylesheets makes creating your site a lot easier. It maintains the look and feel you desire throughout the site and when you want to change your site, all you have to do is create a new stylesheets and voila, everything is changed. More info on stylesheets can be found at
w3c.org. Another site which has stylesheet examples is www.meyerweb.com/eric/css/edge , eric meyer uses css for just about everything on this site.

Rene

>>> mario.wallnoefer at msk-informatik.at 08/21/03 03:12AM >>>
Dear List,

for a customer i have to make a printable view of every page.

in each page there is a "printer icon", when you click on that,
a new window is displayed with all the content of the current page, without
navigation and header and footer.

Does anyone have an idea how to do that ??


thanks
Mario

_______________________________________________
This mail is send to you from the opencms-dev mailing list
To change your list options, or to unsubscribe from the list, please visit
http://mail.opencms.org/mailman/listinfo/opencms-dev