Si abrimos el editor de HTML, veremos los valores de CSS por defecto bajo la sección de Tabs:
/* Tabs ----------------------------------------------- */
Por defecto, el menú de Páginas se ve así:
Veamos ahora algunas modificaciones.
Podemos cambiar el borde general del menú, aunque no cubre el ancho completo (para ello hay otras variables a modificar).
.tabs-inner .section:first-child {border: 5px solid #006699;}
Aquí le pusimos un borde rojo, con puntas redondeadas. Ojo que también modificamos el borde para que tenga un valor 0.
.tabs-inner .section:first-child {border: 0px;}
.tabs-inner .section:first-child ul {
margin-top: 0;
border: 2px solid #f89e9d;
border-radius: 50px;
}
También podemos cambiar el color y grosor de cada borde por separado.
.tabs-inner .section:first-child ul {
margin-top: 0;
border-top: 2px solid Red;
border-left: 3px solid Purple;
border-right: 5px solid Blue;
border-bottom: 5px solid Green;
}
Al fondo de las pestañas le podemos cambiar el color, poner un borde bajo y ajustar los márgenes.
.tabs-inner .widget ul {
background: Silver;
border-bottom: 2px solid Red;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
El color del fondo puede ser transparente (aquí no se nota mucho pues el fondo es blanco), y el ancho puede ajustarse para que cubra (casi) todo el ancho de la página. Los valores son variables, hay que calcularlo en cada caso.
.tabs-inner .widget ul {
background: transparent;
margin-left: -40px;
margin-right: -40px;
}
Cambiamos el font de las pestañas y el espacio en ellas.
.tabs-inner .widget li a {
padding: 15px 12px;
font: 12px;
text-transform: uppercase;
color: #e22c2b;
}
Tal vez querramos modificar el borde de la primera pestaña (uno nunca sabe).
.tabs-inner .widget li:first-child a {
border-$startSide: 4px solid #f89e9d;
}
Y finalmente podemos modificar las pestañas que son seleccionadas.
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
background-color: Salmon;
text-decoration: underline;
}
