[PATCH] Add CSS for printer for website

Xin Li delphij at delphij.net
Thu Apr 17 07:31:39 UTC 2014


-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

Hi,

I noticed that our website is pretty ugly when being printed.
Attached is a simple patch that basically hides various unwanted
elements when media is print.

Comments?  (No re-indent is done to make it easier to review).
-----BEGIN PGP SIGNATURE-----

iQIcBAEBCgAGBQJTT4NYAAoJEJW2GBstM+nsJe8P/0IStoHHutpZaHOjOhtkHiBV
pkR5llJ5R5Czqh+SOxTnSRQQKvRqG/MkaIxevcGh5tLrgk/sBcVFliItLFG1xEy+
klomsxkP3fdaHagaWIpJN2z+Wd1doxBIb1nY/834DtnlK2HBV6CzT8WMtURuue1d
f3W1Ix2bGMnCAvGxUARnQJdY1aRIyV0RUy8V/ZnUD9I03Q2BmJ1gGGFh1x3DT2jC
Tn3b6qgmf/w9dAQvQdq1jySVAygXYRKIVsGjMXQmSq9bKXGZgaFUBsbdVmx6ghG9
UOu+5dp6hO2gjZfhIZ3kX9gee8POO9xHl/LaT6FT5hBUkpYg7ghm5XeZ+tcA4H6n
kviv2dOnkbrwJrmUnRyZUqnt3mBCP2yoUBTOpkjv/tmyA41k39d/dQ2LMFvh0tMO
lsk8KZlPPOoSNz5EoBCOp1zv/7HPydYh5xDYp1RuxGc/i5Z2b4700O6iUdhG9IQ2
yBCD4SheDTGxD8rs2yNZMiZCDU1q5DCuaAyBwwIrbKRrVuKvMCV3AypXMStGRznS
/qZ0KMk/3kLhyUyrzH+IBgvJSmJdtRD7JIjKUayI3n/1oQYMeh2kASNy4IwU2XWz
IHKd8FsYj70YBCQjUWf8Kay/SImdkiRGlAtPqneqMHq+02QJ5GDhOonWapvCogqe
dkK1K/sirPEFL4mAUqKx
=xUTI
-----END PGP SIGNATURE-----
-------------- next part --------------
Index: en_US.ISO8859-1/htdocs/layout/css/layout.css
===================================================================
--- en_US.ISO8859-1/htdocs/layout/css/layout.css	(revision 44592)
+++ en_US.ISO8859-1/htdocs/layout/css/layout.css	(working copy)
@@ -62,6 +62,7 @@
 
 /* Search */
 
+ at media screen {
 #search {
   position: relative;
   text-align: right;
@@ -108,7 +109,12 @@
   color: #666;
   padding: 2px 2px 2px 5px;
 }
+}
 
+ at media print {
+#search { display: none; }
+}
+
 /* Mirror Select */
 
 #mirror {
@@ -471,6 +477,7 @@
 
 /* Secondary Pages */
 
+ at media screen {
 #sidewrap {
   float: left;
   width: 166px;
@@ -488,7 +495,13 @@
   margin-left: 170px;
   padding-top: 15px;
 }
+}
 
+ at media print {
+#sidewrap, #rightwrap { display: none; }
+#contentwrap { margin-left: 16px; padding-top: 15px; }
+}
+
 /* Footer */
 
 #footer {
Index: en_US.ISO8859-1/htdocs/layout/css/navigation.css
===================================================================
--- en_US.ISO8859-1/htdocs/layout/css/navigation.css	(revision 44592)
+++ en_US.ISO8859-1/htdocs/layout/css/navigation.css	(working copy)
@@ -6,6 +6,7 @@
 
 /* Site Navigation */
 
+ at media screen {
 #topnav {
   text-align: left;
   color: #666;
@@ -378,3 +379,14 @@ div#menu ul ul ul li:hover ul {
   padding-left: 10px;
   padding-right: 10px;
 }
+}
+
+ at media print {
+#topnav, #topnavleft, #topnavright, #topnavlist { display: none; }
+#menu { display: none; }
+#languagenav, #languagenavlist { display: none; }
+#searchnav, #searchnavlist { display: none; }
+#sidenav { display: none; }
+#feedlinks { display: none; }
+.rightnav { display: none; }
+}
Index: share/xml/xhtml.xsl
===================================================================
--- share/xml/xhtml.xsl	(revision 44592)
+++ share/xml/xhtml.xsl	(working copy)
@@ -42,7 +42,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=&xml.encoding;" />
 	<xsl:copy-of select="/xhtml:html/xhtml:head/xhtml:meta"/>
 	<link rel="shortcut icon" href="&enbase;/favicon.ico" type="image/x-icon" />
-	<link rel="stylesheet" media="screen" href="&stylesheet;" type="text/css"/>
+	<link rel="stylesheet" media="screen,print" href="&stylesheet;" type="text/css"/>
 	<xsl:copy-of select="/xhtml:html/xhtml:head/xhtml:link"/>
 	<xsl:call-template name="process.rss.link"/>
 	&header1.googlejs;


More information about the freebsd-doc mailing list