Versión imprimible del blog via CSS

Aunque no sea una práctica muy común, hay personas que aún imprimen páginas de sitios en Internet; Así que, ¿por qué no facilitarles una versión imprimible de nuestro blog? Con ayuda de la regla @media podemos agregar un CSS específico para dispositivos de impresión.

Para mi blog, que usa la plantilla Sandbox, he definido estas reglas CSS en la versión imprimible:

@media print {
div#wrapper {width:100%;}

div#wrapper * {width:auto;}

div#header {
	height:auto !important;
	margin:0 !important;
	padding:0 !important;
}

#blog-title {
	text-align:center;
	margin:0 !important;
	padding:0 !important;
}

#wpcombar,#blog-description, div#footer, #wpstats, 
div.sidebar, #globalnav,.navigation {
	display:none !important;
	margin:0;
	padding:0;
}

div.container {
	margin:0;
	padding:0;
}


h2.entry-title { padding:0 !important; }

.comments { display:none; }

a,a:visited {
	color:black !important;
	text-decoration:none;
	border-bottom:1px dotted #333;
}

}

Fácilmente puede ser adaptado a otras plantillas sin necesidad de un plugin adicional. Básicamente hay que dejar el contenido real y ocultar aquellos elementos que no sean de importancia en la versión imprimible como:

  • La descripción del blog.
  • La navegación.
  • La barra lateral.
  • Los comentarios del post.
  • El formulario de envío de comentario.
  • El footer.

Puedes considerar eliminar paddings, colores y otros adornos en el texto innecesarios. Si imprimen alguno de los post de este blog, deber verse como similar a esto:

Versión imprimible de un post

Etiquetas: diseño, ,

4 comments

  1. Armonth · October 11, 2007

    Javier quizá te interesen un artículo que escribí al respecto (en realidad dos pero en el primero hay enlace al segundo):

    Plantillas CSS para impresión y 9 consejos. Lo más importante supongo que será usar el CSS para mostrar los enlaces 🙂

  2. pedro · October 11, 2007

    jajaja, yo soy de los que imprime páginas de la Web XD
    Es que en mi casa no tengo conexión a Internet y cuando me conecto por celular, es muuuuuuuuy lento. Así que mejor imprimo los artículos interesantes y me los llevo para leer por las noches… aparte que la vista descansa un poco más que leyendo desde el monitor 😉

  3. Huasito del Flow · October 15, 2007

    No todos podemos modificar nuestro CSS amiguito 😦

    Saludos y sigue con tu blog 😉 la lleva

  4. Javier Aroche · October 15, 2007

    Armonth, gracias por el enlace. Veo que me faltan unos punto a tomar en cuenta….

    Pedro, jejejejejee.

    Huasito, cierto para eso necesitas Custom CSS.

    Saludos

Comments are closed.