Personalizar los códigos.
En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo.
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}
Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}
En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
- Si queremos que la línea sea punteada: dotted
- Si queremos que sea a rayas: dashed
- Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
- Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.
.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
margin-top: 0; /* margen arriba*/
margin-left: -30px; /* margen izquierda*/
margin-right: -30px; /* margen derecha*/
}
.tabs-inner .widget li a {
display: inline-block;
padding: 20px;/*espacio entre pestañas*/
font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
color: #fff; /* color del texto*/
border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li:first-child a {
border-$startSide: none; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #8fb59e; /*Color cuando pasamos con el ratón*/
background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
text-decoration: none; /* sin subrayado de enlace*/
}
En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.
Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! ;)
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}
Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}
En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
- Si queremos que la línea sea punteada: dotted
- Si queremos que sea a rayas: dashed
- Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
- Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.
.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
margin-top: 0; /* margen arriba*/
margin-left: -30px; /* margen izquierda*/
margin-right: -30px; /* margen derecha*/
}
.tabs-inner .widget li a {
display: inline-block;
padding: 20px;/*espacio entre pestañas*/
font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
color: #fff; /* color del texto*/
border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li:first-child a {
border-$startSide: none; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #8fb59e; /*Color cuando pasamos con el ratón*/
background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
text-decoration: none; /* sin subrayado de enlace*/
}
En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.
Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! ;)
De todas formas cualquier dudita ya sabes, me lo cuentas en los comentarios de aquí abajo :)
Ahora vamos a colocar el código en nuestra plantilla para que nuestro menú quede así de bonito.
Vamos a Plantilla
Hacemos una Copia de Seguridad
Le damos a Editar HTML
Después borramos todo lo que hay desde ese primer código hasta este otro:
.tabs-inner .section
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none;}Este anterior también se elimina.
En su lugar pegamos el código que hayamos elegido de los anteriores que os he compartido.
Guardamos y Listo!
Para que el proceso te resulte mucho más fácil te dejo el vídeo tutorial :)
Comentarios
Publicar un comentario