Títulos de la sidebar personalizados I: colores, fuentes y bordes

http://diyva.blogspot.com.es/2009/02/titulos-de-la-sidebar-personalizadosi.html

Hoy vamos a ver cómo personalizar los títulos de la sidebar de una forma sencilla, con colores, bordes, etc. Y en un próximos post, personalizaremos los títulos pero con alguna imagen.

El título de los blogs se puede personalizar en la etiqueta .sidebar h2{ que se encuentra en /* Sidebar Boxes en las plantillas Rounders (2,3 o 4) ; si usas la plantilla Mínima, verás /* Sidebar Content en lugar de /* Sidebar Boxes.

Pero en algunas plantillas, no se encuentra la etiqueta .sidebar h2{ así que todo será cuestión de agregarla debajo de /* Sidebar Boxes (/* Sidebar Content):

.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;}

Éste es el código base que podremos personalizar de las siguientes formas.

CAMBIANDO EL COLOR DE FONDO

En background: #FFF; podremos cambiar el color del fondo del título de la sidebar. Si deseas saber cómo cmbinar colores y los códigos hexadecimales de los mismo, mira » esta entrada.

PERSONALIZANDO EL TEXTO

Puedes centrarlo o ubicarlo hacia la derecha agregando lo siguiente:

text-align: center; para centrar
text-align: right; para ubicarlo a la derecha

COLOCANDO BORDES

► Si deseas que tenga un borde del mismo color, grosor, estilo y que rodee todo el título, coloca:border: 1px solid #000000; donde puedes cambiar el grosor, estilo y color de borde.

► Pero si quieres que el borde no rodee todo el título o que cada lado tenga un color diferente y diferente estilo,entonces usa algunos de estos código si es que sólo deseas bordes en algunos lados o úsalos todos para dar diferentes estilos:

border-bottom: 2px dotted #C94093; borde inferior
border-left: 1px solid #78B749; borde izquierdo
border-right: 3px solid #3D81EE; borde derecho
border-top: 2px dotted #f2984c; borde superior

► Y si quieres aplicar otros estilos de borde,en lugar de solid, agregas:

dotted


double


dashed


ridge


solid


inset


groove

Ya sabemos la teoría, es momento de ponerlo en práctica; en un futuro post, veremos cómo personalizar los títulos de la sidebar pero con imágenes (de fondo, íconos, etc)