Personalizando la widebar con pestañas

Lo prometido es deuda y aquí algunas ideas para personalizar la widebar con pestañas.
En realidad los cambios no son cosa del otro mundo pero es cierto que el aspecto cambia considerablemente, para aligerar un poco el trabajo voy a explicar donde podéis hacer las modificaciones.
Ubicamos en la plantilla el código correspondiente a los estilos que añadimos en la CSS:


/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

Añadir color de fondo a pestañas

Comenzaremos con el color de las solapas o pestañas, todos sabemos que para modificar un fondo lo hacemos en background así que buscamos en nuestro código:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Modificando background: #EEE; por otro color estamos modificando el color de las pestañas 2 y 3
Para cambiar el color de la pestaña 1 lo haremos en:
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}

Color de fondo en contenido
Vamos a darle color a ese fondo que es la continuación de las pestañas, donde añadimos el contenido y para ello buscamos:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
De esta forma cambiamos el color de fondo que precede a las pestañas 1, 2 y 3

Añadir imagen de fondo a contenido
Ahora vamos ir un poco más lejos y los atrevidos pueden añadir una "imagen de fondo" en lugar de color.
Sustituimos background: #FFF; por background:url('aquí la url de tu imagen de fondo');
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
Quedaría algo así:

.tabberlive .tabbertab {background:url('aquí la url de tu imagen de fondo'); padding:5px;border:1px solid #CCC;border-top:0;}

Color del texto.
Si modificamos el color de las pestañas puede que el texto pase desapercibido o no resalte lo suficiente para ser legible así que cambiamos el color del texto en:

ul.tabbernav li a:link { color:#369;}

ul.tabbernav li a:visited { color: #369;}

ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}

En esas tres líneas cambiaremos color:#369; por el color escogido.

Bordes.
Ahora vamos con los bordes, ya sabemos que en border podemos modificar el borde.
Donde solid es el tipo de borde y con px (pixels) determina el grosor del borde. Al mismo tiempo cambiaremos el color en #453135;

Borde superior de la caja:

ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #453135;}

Borde que rodea las pestañas:

ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}

Borde que rodea el contenido de las pestañas:

.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}

Efecto Hover.
Las pestañas viene con efecto hover, dicho efecto nos permite definir su aspecto, nos daremos cuenta porque al pasar el puntero sobre las pestañas cambian de color.
Efecto hover de la pestaña 1 modificamos el color en:

ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}

Efecto hover de las pestañas 2 y 3

ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}

ElHackerZ