Una vez que conocemos la composición del blog vamos a desglosar el código.
---
Todas las plantillas empiezan con los créditos. Le siguen las variables y tras ellas empieza lo que son las órdenes de estilo o sección CSS.
Después vienen los códigos de las secciones y elementos, el HTML.
---
Los créditos son como los títulos de las películas, así que pasaremos de ellos. Para lo único que nos sirven es para conocer el modelo de plantilla que estamos usando.
---
Las variables. He hecho varias entradas acerca de ellas.
Hay dos grupos de variables, las que corresponden a los colores y las de las fuentes que se aplican a cada zona del blog.
Cada modelo de plantilla tiene unas cuantas "de serie"; algunas tienen muchas, otras tienen pocas, (la scribe, por ejemplo, adolece de falta de variables), pero eso no es problema pues podemos añadirle casi tantas como queramos. si no las usamos no pasa nada, pero son muy útiles para configurar el blog sin tener que andar tocando el código cada vez que queramos cambiarle la combinación de colores.
Solo hay que tener en cuenta algunas reglas básicas a la hora de crearlas y de aplicarlas.
Al crearlas seguir las directivas de las que haya. Si una variable existente se escribe así: bgcolor, no añadir una así: sidebarBgColor.
Que en cada definición el nombre que le des se ha de escribir de dos maneras: todo junto y todo separado. Así la variable para el color de fondo de la sidebar sería sidebarbgcolor o sidebarBgColor en su primera definición, que corresponde al nombre, (la diferencia dependerá de como se escriban las ya existentes) y Sidebar Background Color en la segunda, que corresponde a la descripción, siempre. (Aquí no hay diferencias entre plantillas).
Y al añadirlas a un código hacerlo siempre exactamente como la has nombrado, si está todo en minúsculas o no, precedida del símbolo del dólar y terminando con un punto y coma, así: (siguiendo con el ejemplo del fondo de la sidebar)
background-color:$sidebarbgcolor;
ó
background-color:$sidebarBgColor;
(Si lo que vas a poner es una imagen sólo has de poner background).
---
¡Bien! Vamos a ver qué encontramos en el CSS de la plantilla.
(El orden en que te lo diga puede variar dependiendo de la plantilla que uses.)
---
En primer lugar tenemos el body o cuerpo del blog.
En él suele haber un background (fondo general) y algunas órdenes que indican que la zona aprovechable estará centrada y otras consideraciones que no se suelen tocar.
Puede seguirle la descripción del blockquote, o no, depende de la plantilla, aunque últimamente suele salir en todas.
---
A continuación tenemos la descripción de los enlaces. En algunas sale encabezada por un Link styles.
Hay tres o cuatro opciones, a:link a:visited a:hover y en algunas a:active.
Todas tienen dos características comunes el color y si el texto se va a ver con o sin subrayado.
Si en las variables solo vienen de serie dos posibilidades para los enlaces, habrá un linkcolor para el enlace normal a:link y un visitedlinkcolor para el resto.
Podemos añadir la variable para el link llamado hover, que es cuando ponemos el ratón encima pero sin pinchar.
En cuanto al subrayado, quitando lo de underline y cambiándolo por none haremos que desaparezca la raya debajo del enlace.
---
Le sigue la zona útil ó outer-wrapper, en la que hay el header, o cabecera, el main ó zona de las entradas y la sidebar. Suelen presentarlas como wrapper, ya que definen la zona contenida. Luego se ven los contenidos aparte.
---
Si vas a añadir una sidebar, aquí es donde debes pegar el código de la nueva, preferiblemente debajo de la ya existente, y no por que la colocación del código en el CSS sea importante, sinó simplemente por una razón práctica. Te será más fácil encontrar el código si sigue un cierto orden, en caso de querer modificar algún dato.
Por ejemplo, cuando añado una menubar a una plantilla, si la coloco debajo de la cabecera, ahí, debajo del header, es donde pego el código.
---
Sigamos.
Tras las definiciones de las zonas generales empiezan las de sus contenidos; post, entradas, que empieza por la fecha, date header, sigue con el título. post h3, post, entradas y con el post footer, o pie del post.
---
Tenemos también las definiciones de la sidebar, fondos, márgenes etc.
---
En algunas hay definiciones de los comentarios, aunque no le he metido mano y no se a qué se refiere, si a lo que vemos cuando entramos en una entrada individual, o al formulario, aunque imagino que es la primera opción.
---
El Perfil, Profile, en el que podemos quitar el margen y variar la posición de la imagen cambiando el float de $startSide a $endSide.
---
Tenemos también unas definiciones de los elementos. Están encabezadas por la palabra de la ubicación y widget.
Así los elementos de la sidebar empiezan con .sidebar .widget, las entradas son .main .widget y los elementos del pie de página .footer .widget
A veces sidebar y main comparten directrices. Si queremos darle a unos unas órdenes diferentes a los otros, se puede separar, borrando, por ejemplo, .main .widget y colocándolo debajo de la llave de cierre } copiando todas las órdenes que hay para que siga funcionando.
De esta manera podemos hacer que los elementos de la sidebar tengan un color diferente del fondo de las entradas, y variar los márgenes de unos y otros independientemente.
---
La zona denominada Layout define la trasera del blog, lo que vemos cuando queremos editar los elementos o añadir alguno.
---
Y finalmente encontramos el HTML.
Es la zona donde están definidas todas las cosas que contiene el blog y su ubicación exacta; por ello aquí si que importa su colocación.
Si quieres poner una nueva sidebar, por ejemplo a la izquierda del blog, de manera que las entradas queden entre ambas, has de pegar el código encima de las definiciones del blog, de lo contrario la colocará en otro sitio.
En otras entradas explicaré más detalladamente el CSS y el HTML.
En ella puede editar el título (como ves he cambiado lo de FAVORITO por Mi tuneadora), y, si tiene más de un blog, pinchar en la flecha azul para elegir en cual de ellos quiere colocarlo.
Una vez decidido, pinchar en Añadir artilugio y al momento lo verá en su blog. Y solo tendrá que colocar el elemento donde quiera.
