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

Hay muchos cambios que se pueden realizar para personalizar una tabla de contenidos de Blogger sólo con CSS modificando las propiedades que ya tenga o añadiendo otras nuevas. El color y el tamaño de las letras son algunas de las cosas más visuales, por eso dedicamos el otro día a modificar estos valores, mientras que hoy vamos a ver otros ajustes que podemos hacer. Para ello usaremos sobre todo tres propiedades de CSS: border, margin y padding. Las tres propiedades se corresponden al borde del objeto (una línea más o menos gruesa que puede llevar color), el margen exterior y el margen interior. También debes saber que los márgenes no los podemos pintar de color, son transparentes y muestran el color que hay detrás. Haciendo cambios con esta propiedades podemos mover los elementos que forman parte de la barra de contenidos y modificar el espacio que ocupa. La idea es hacerlo todo paso a paso, y por eso se alargará un poco.

Para hacer todos estos cambios partimos del código donde lo dejamos el último día.

#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,green 0%,yellowgreen 40%); 

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow),color-stop(1,green));

} 

.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;

}

.labl a{

color:#006633;

} 

.labl:first-letter{t

ext-transform:uppercase;

} 

.new{

color:orange;

font-size:140%;

font-weight:bold;

font-style:italic;

}  

.postname{

font-weight:normal;

} 

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

} 

Modificar el borde de la Tabla de Contenidos

Trabajaremos sobre el selector #TOC , cambiando alguna de sus propiedades, en función de lo que quieras hacer: quitar el borde, hacerlo más grueso, cambiarle el color, redondear las esquinas del borde, añadir una separación interior con el contenido.

Quitar el borde de la tabla de contenidos.
Lo más sencillo es colocar la propiedad border con 0px, así lo podrá recuperar más adelante si cambias de opinión. Si quieres también puedes eliminar la línea border entera.

#toc{

width:99%;

margin:5px auto;

border:0px 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,green 0%,yellowgreen 40%); 

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow),color-stop(1,green));

}

Un borde grueso con bordes redondeados.
A continuación vamos a realizar tres cambios, reducir un poco el ancho, dividiendo el 90%. El borde lo hacemos grueso, de 20px, y además se hace redondeado añadiendo la propiedad border-radius, dándole un valor de 45px, mucho más elevado de 20px para que esté redondeado por fuera y por dentro.

#toc{
width:90%;
margin:5px auto;
border:20px solid #006633 ;
border-radius:45px ;
-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,green 0%,yellowgreen 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow),color-stop(1,green));
}

Separa el contenido interior del borde la tabla.
Para eso sólo tenemos que añadir la propiedad padding y darle el valor que nos interesa, por ejemplo 20 píxeles. Lo que vamos a conseguir es que todos los textos se separen y las barras de los titulares queden dentro.

#toc{
width:90%;
margin:5px auto;
border:1px solid #006633 ;
padding:20px;
-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,green 0%,yellowgreen 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60, greenyellow),color-stop(1,green));
}

Personalizar las barras de las etiquetas.

Otro elemento importante de esta tabla de contenidos son las barras que encabezan cada grupo de artículos, para personalizarlas tendremos que modificar las propiedades del selector .LABL.

Mover la barra a la derecha.
Cambiamos la propiedad margin, que cuando se expresa completo tiene cuatro valores, el primero para el margen superior, el segundo el margen derecho, luego el inferior y el último valor el margen derecho. En este ejemplo asigno los valores de 0px, -10px, 0px y 30px. Observa que los cambios que hacemos en LABL. no afectan para nada a los títulos de los posts que se quedarán en el mismo sitio. Para que no se salga la imagen de la barra por la derecha también necesitaras reducir el tamaño de la tabla (la propiedad width de ·TOC al 90% ).

.labl{
color:#006633;
font-weight:bold;
font-size: 120%;
margin: 0px -10px 0px 30px;
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;
}

Incrementar los dos margenes laterales para reducir el tamaño de la barra
Bueno es bastante descriptivo, cuando más se incremente el margen externo más pequeño será el espacio que quede para la barra. Este ejemplo es con un borde de 70px por derecha e izquierda, aunque puedes jugar con margenes asimétricos.

.labl{
color:#006633;
font-weight:bold;
font-size: 120%;
margin: 0px 70px 0px 70px;
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;
}

Modificar el espacio interior entre la etiqueta y los bordes.
Para mover una cantidad fija de pixeles hay que usar la propiedad padding, que como antes tiene 4 valores, uno para cada lado. Con esta propiedad sólo vamos a modificar el espacio superior e inferior por lo que modificamos la propiedad para que quede con 20 píxeles arriba y 10 abajo. Para los bordes laterales, como es texto sólo importa el lado al que está ajustado. Normalmente es el lado derecho, pero lo dejamos en 0px porque vamos a centrar el texto. Añadimos bajo el comando text-align, y el valor center. Con este comando conseguimos que el texto tenga el mismo espacio por la derecha y la izquierda.

.labl{
color:#006633;
font-weight:bold;
font-size: 120%;
margin: 0px 70px 0px 70px;
padding:20px 0px 10px 0px;
text-align:center;
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;
}

Bueno se pueden hacer bastantes diseños jugando con estas variables, de forma que puedas hacer que tu blog sea único. Como por ejemplo esta de arriba. La idea es ir probando los códigos en un editor de HTML y CSS hasta conseguir lo que a uno le gusta y luego reemplazar el nuevo código que tu mismo te hayas hecho. Espero que la serie de los tres artículos para personalizar la tabla de contenidos te haya gustado.