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:
Comments
4 responses to “Versión imprimible del blog via CSS”
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 🙂
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 😉
No todos podemos modificar nuestro CSS amiguito 🙁
Saludos y sigue con tu blog 😉 la lleva
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