Para decorar las entradas navideñas (y para otras muchas cosas más)

Los habituales de La Bitácora del Tigre tal vez se hayan fijado en que he añadido a la “entrada pegajosa” del pasado viernes unos motivos navideños, a tono con el contenido y propósito del artículo. Pues bien, se trata del efecto del plugin Art Direction, que acabo de descubrir a través del blog de Matt Mullenweg. Esta extensión permite modificar cualquier entrada del blog añadiendo los correspondientes estilos CSS o incorporando algún efecto JavaScript, por lo cual resulta muy útil como recurso para ocasiones especiales, o simplemente para alterar la plantilla del blog.

El plugin añade al interfaz de edición de WordPress dos botones, que ofrecen la posibilidad de insertar estilos CSS o código JavaScript. Además, ambos elementos se pueden añadir de forma global o sólo a una entrada individual. En el primer caso, cualquier modificación será visible en todas las páginas del blog que incluyan dicha entrada (páginas de archivo, de índice, de categorías, de búsquedas); en el segundo, en cambio, las alteraciones realizadas sobre un artículo sólo podrán verse en la página individual que le corresponda.

Por si a alguien le interesa saber lo que he hecho, lo explico a continuación. En primer lugar, he encerrado toda la entrada en una capa, con el código

<div id="navidad">;...</div>

. Acto seguido, le he aplicado unos cuantos estilos:

  • Un fondo ad hoc, elaborado a partir de los iconos de Christmas Holiday Icons. El fondo está situado en la posición superior derecha de la capa, y no se repite ni en horizontal ni en vertical.
  • Una ligera modificación del tipo de letra, el color y la altura de las líneas.
  • Un sangrado de los párrafos que forman parte de la entrada, para impedir que se superpongan sobre la barra vertical de motivos navideños.

El código es el siguiente:

#navidad {
background-image: url(http://www.labitacoradeltigre.com/wp-content/themes/tarski/images/navidad.jpg);
background-repeat: no-repeat;
background-position: right top;
font-family: Georgia, Garamond, "Times New Roman", serif !important;
font-size:1.0em;
line-height: 70%;
color: #330033;
}
#navidad p {
margin-right: 1.2cm;
}

Seguro que cualquier diseñador con talento sería capaz que lograr efectos mucho mejores y más impresionantes, pero a mí me basta, al menos de momento.

Compartir
  • Add to favorites
  • BarraPunto
  • Bitacoras.com
  • BlinkList
  • blogmarks
  • del.icio.us
  • Digg
  • email
  • Facebook
  • Google Bookmarks
  • Diigo
  • Live
  • Meneame
  • MisterWong
  • MySpace
  • Netvibes
  • NewsVine
  • Reddit
  • RSS
  • StumbleUpon
  • Technorati
  • Twitter

Etiquetas: , ,

Este blog utiliza moderación de comentarios; por tanto, bajo ciertas condiciones puede producirse un cierto retraso entre el envío del comentario y su aparición en el blog. Si su comentario no se publica inmediatamente, por favor no lo envíe por segunda vez.

En los comentarios se pueden utilizar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>