Personalización de La Coctelera

Para poder personalizar La Coctelera es necesario tener algunos conocimientos de CSS. Si queremos, además, modificar el comportamiento de nuestro blog (por ejemplo, para introducir comentarios numerados), necesitaremos saber algo de Javascript.

Debes tener en cuenta que este artículo no es una guía para aprender CSS o Javascript. Si quieres aprender a maquetar páginas con CSS o a añadirles funcionalidades con Javascript, consulta los abundantes recursos que encontrarás en la red.

En este artículo te explicaremos cómo añadir una hoja de estilo a tu blog de una forma sencilla, y pondremos un ejemplo con algunos estilos básicos.

Las hojas de estilo en La Coctelera no se pueden tocar.

¿Y entonces? Tranquilos, no se pueden tocar las hojas de estilo originales, pero eso no quiere decir que no podamos hacernos hojas de estilo nuevas. Y ahí está la gracia del asunto.

Cuando vayamos a hacer una hoja de estilos personalizada debemos tener en cuenta que nuestros estilos sobrescribirán los estilos que tenga nuestro blog según la plantilla que hayamos elegido.

Por ejemplo, supongamos que quieres cambiar la letra que viene por defecto para los artículos del blog usando, por ejemplo, la tipografía Georgia, muy elegante ella. Vamos a crear un fichero que se llame cuerpo.css, tan simple como esto:

body {
  font-family: "Georgia";
}

Puedes crear el archivo con lo que te parezca: Notepad, Vi, Emacs...

Vale, ya tenemos un archivo CSS, simple como un moco colgando de la nariz de un bebé. Ahora tenemos que decirle a nuestro blog que use esta hoja de estilos. Para ello nos vamos a nuestro panel de administración del blog. Sí, el panel de toda la vida, donde publicas tus historias.

Lo siguiente que tienes que hacer es subir el archivo CSS, igual que si fuera una foto que vas a publicar. Cuando acabes de subir el archivo, La Coctelera te dirá dónde está ubicado, como puedes ver en esta ilustración.

Ahora solo resta copiar la dirección que nos da La Coctelera. Guárdala, que nos hará falta dentro de un momento. Puedes copiar la dirección pulsando encima con el botón derecho y eligiendo la opción «copiar».

Finalmente tenemos que decirle a nuestro blog que tiene que utilizar la nueva hoja de estilos. Para eso tenemos que ir a la sección «Sobre mí» del panel de administración del blog y añadir el siguiente código:

<style type="text/css">
  @import url("http://www.lacoctelera.com/myfiles/adastra/cuerpo.css");
</style>

Por supuesto, entre comillas tienen que pegar la dirección que copiaron anteriormente para subir el fichero. Para finalizar guardas los cambios, ¡y comprueba los resultados!