Personalizar una tabla de contenidos en Blogger con CSS (2)

Después de insertar la tabla de contenidos en un página, vamos a modificar dos aspectos de su apariencia a través de los códigos CSS. Por un lado los colores y por otro el tamaño de las letra, dejando otras posibilidades de personalización de la tabla de contenidos para el tercer y último post. Ayer insertamos el Javascript en la página y el código CSS en el interior de la plantilla. Así que lo primero será volver a abrir la plantilla de Blogger y buscar dentro del CSS la zona  donde dejamos esta línea.

/* Indice de contenidos TOC
----------------------------------------------- */


En el CSS encontraremos que tenemos 7 selectores que nos dan una idea de lo que podemos modificar.

#toc / Es el selector de toda la tabla de contenidos.
.labl / Es el selector de la barra de las categorías.
.labl a. / Es el selector del enlace de cada categoría.
.new / Es el selector de grupo de las palabras ¡New!
.postname / Es el selector de grupo de los nombres de los posts
.postname li / Es el selector individual de los nombres de los posts

Los colores del código CSS los podemos detectar de forma fácil porque son un código que empieza por el signo # y va seguido de 3 ó 6 números. Como por ejemplo #012345 y #333 bueno a veces también pueden ser letras hasta la F, como por ejemplo #ABCDEF y #3EE.

Para que lo veas claro en el código CSS que vamos a modificar tienes marcado en azul todos los códigos de los colores, en rojo los selectores y en lila las propiedades que tienen color.

#toc{

width:99%;

margin:5px auto;

border:1px solid #2D96DF; 

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); 

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); 

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

} 

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px; 

background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); 

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); 

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px; 

-webkit-border-radius:4px; box-shadow:3px 3px 1px #bbb; 

-moz-box-shadow:3px 3px 1px #bbb;
-webkit-box-shadow:3px 3px 1px #bbb;
display:block;

}
.labl a{

color:#fff;

}
.labl:first-letter{t

ext-transform:uppercase;

} 

.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

} 

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); 

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

} 

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

} 

Para los siguientes ejemplos voy a usar tres colores, el verde claro #00CC00, el verde oscuro #006633 y un tono azulado muy claro #CCFFCC. Pero para tu blog tendrás que personalizarlo de acuerdo a tus necesidades, así que los nuevos colores hexadecimales que necesites para cambiar el CSS los puedes coger los códigos de esta tabla o bien usar este generador. Y para hacer pruebas lo mejor es que uses un editor de HTML y CSS somo por ejemplo, este.

Cambiar el color del borde de la tabla de contenidos

Sencillo, el color del borde está en el selector #TOC es suficiente con cambiar el número por el del color que quieras.

#toc{

width:99%;

margin:5px auto;

border:1px solid #006633 ; 

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); 

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); 

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

Cambiar el color de las barras de etiquetas.

Todo lo que tiene que ver con las etiquetas, está en el selector .LABL, como ves hay varias características. COLOR: el primero es el color de las letras, pero como todos los títulos son enlaces, esta línea de código no sirve de nada y lo puedes borrar. Luego tenemos el código BACKGROUND, que es el que da el color del fondo, que como puedes ver en principio es un gradiente entre dos colores azules, uno oscuro y uno claro. Como puedes ver en la imagen de abajo vamos a convertir el gradiente al revés, con el color más claro a la izquierda y el verde a la derecha. El código BORDER: es el color del borde la barra de etiquetas, que lo vamos a dejar en el ejemplo igual, en azul oscuro. Por último está la sombra de la barra de etiquetas que lo cambiaremos a verde claro.

Además de cambiar los colores haremos que las letras sean de mayor tamaño, añadiendo el siguiente código. font-size: 120%;

Este es el código de LABL modificado.

.labl{

color:#006633;

font-weight:bold;
font-size: 120%;

margin:0 -5px;

padding:1px 0 2px 11px; 

background:-moz-linear-gradient(right,#00CC00 0%, #CCFFCC 40%); 

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20, #CCFFCC),color-stop(1,#00CC00)); 

border:1px solid #2D96DF;

border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;

box-shadow:3px 3px 1px #006633; -moz-box-shadow:3px 3px 1px #006633;-webkit-box-shadow:3px 3px 1px #006633;

display:block;

}

Pero como ves en la imagen es necesario, que las letras que ahora son blancas tengan un color más oscuro, así que cambiamos el código #fff por verde oscuro #006633, negro #000, o el color que desees.

.labl a{

color:#006633;

} 

Cambiar el color y el tamaño de la palabra New!

Ahora ya dominarás los cambios de color, pero además de cambiar el número del código también puedes definir el color con una palabra inglesa, por ejemplo orange, pink, blue, yelow o green. Para cambiar el tamaño hacemos lo mismo que antes, añadiendo font-size y un % que sea más grande de 100%. 

.new{

color:orange;
font-size:140%;

font-weight:bold;

font-style:italic;

} 

Cambiar el color del gradiente de fondo de los artículos
Para el siguiente cambio voy a volver a usar palabras, aunque de la misma manera puedes usar códigos. Para eso he modificado 4 códigos de color, los dos valores #CCFFCC los cambio por green y el blanco #FFF lo cambio por un verde amarillento. El código quedaría así.

.postname{
font-weight:normal;
background:-moz-linear-gradient(right, greenyellow 0%, green 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow ),color-stop(1, green));
}

Truco final para el fondo de la tabla de contenidos
Como verás el gradiente sólo se aplica a las líneas donde está cada uno de los posts, pero quedna franjas blancas, por suerte, esto lo podemos solucionar de una forma muy sencilla. Tienes que cortar las dos lineas del código donde está el background con el gradiente, y después de cortarlas las pegas en el selector #TOC, que quedará así.

#toc{
width:99%;
margin:5px auto;
border:1px solid #006633;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
background:-moz-linear-gradient(right,#CCFFCC 0%,#fff 40%); 
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow ),color-stop(1, green));
}

Espero que os haya resultado útil para personalizar la tabla y para aprender un poco más del CSS. Mañana completaremos el tercer post de personalización de la tabla de contenidos, para que veas como podemos mover los elementos que tenemos. Y en los próximos días iré escribiendo sobre las diferentes propiedades de CSS y CSS3, para que así puedas aprender a fondo el lenguaje que da color y efectos visuales a tu blog.