Avisos
Vaciar todo
Buenas¡
Estoy intentando cambiar los colores de un cuadro modificando el CSS de esa página y no doy con la forma (soy bastante novato)
He localizado con el "firefox developer" el código e incluso he hecho el cambio ahí para comprobar que queda como quiero pero copio el código en la ventana del CSS de esa página y no me aparecen los cambios.
Esta es la web: https://www.fidias.net/clon-formacion/
Quiero cambiar el menú de pestañas que aparece debajo de "CURSOS DISPONIBLES". Lo que quiero cambiar es el color del borde de los cuadritos (donde pone "ver todo" y "Certificaciones") para que tenga un borde y un relleno diferente, y que además cambie cuando esté o no seleccionada esa pestaña, además de cambiar el tipo de fuente.
He empezado por sacar el código para cambiar el borde y lo he pegado sin éxito:
}
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a {
border-color: #ec6b00;
}
.wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-tab > a {
border-width: 3px;
}
Y la fuente directamente no he sabido que código coger, ya que la única línea de código que tengo localizada es esta (he cambiado la fuente por MONTSERRAT)
}
html, body, body.page, .wf-container > * {
font: normal 16px / 27px "Montserrat", Helvetica, Arial, Verdana, sans-serif;
font-style: normal;
font-variant-caps: normal;
font-weight: normal;
font-stretch: normal;
font-size: 16px;
line-height: 27px;
font-family: "Montserrat", Helvetica, Arial, Verdana, sans-serif;
font-size-adjust: none;
font-kerning: auto;
font-optical-sizing: auto;
font-variant-alternates: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-language-override: normal;
font-feature-settings: normal;
font-variation-settings: normal;
word-spacing: normal;
color: #0c0c0c;
Entiendo que me falta algo por poner...
Gracias¡
Respondido : 26/02/2020 1:13 pm
Hola
Con respecto a los cuadros del tab, prueba con el siguiente código CSS:
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a:focus,
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a:hover{
background-color:red;
}
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a,
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a{
background-color:blue;
border:4px solid green;
}
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab.vc_active > a{
border-color:yellow;
background-color:lightblue;
}
Luego con respecto a la fuente, qué tipo de letra quieres usar?, de manera general la fuente ya debería estar cargada o usar un tipo de fuente estándar para la web.
Para agregar código CSS en WordPress revisa: https://www.webempresa.com/blog/como-agregar-codigo-css-en-wordpress.html
PD. Cambia los colores por los que quieres.
Saludos.
Respondido : 26/02/2020 4:47 pm
Hola John¡ Muchas gracias por tu respuesta, siento la tardanza pero hasta hoy no he podido sentarme a probarlo y no se cambia nada en el diseño.
Yo estoy añadiéndole el código dentro de la misma página, en el icono superior derecho del engranaje, y como puedes ver sigue saliendo la configuración por defecto ( https://www.fidias.net/clon-formacion/)
¿Alguna idea de porqué puede ser?
Un saludo y gracias de nuevo¡
Respondido : 03/03/2020 5:35 pm
Hola
El código si funciona, pero depende en donde lo agregues, tendría que sobreescribir al código que tienes por defecto, es decir cargar después.
También es posible que no funcione si tiens algún plugin de optimización, ya que tendrías que limpiar cache, igualmente al probar refresca o limpia cache del navegador.
Si tienes un tema hijo puedes agregarlo al final del style.css del tema hijo
Otra opción sería forzar la prioridad colocando important, es decir el código quedaría:
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a:focus,
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a:hover{
background-color:red!important;
}
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a,
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab > a{
background-color:blue!important;
border:4px solid green!important;
}
.wpb-js-composer .vc_tta-color-orange.vc_tta-style-classic .vc_tta-tab.vc_active > a{
border-color:yellow!important;
background-color:lightblue!important;
}
Saludos.
Respondido : 03/03/2020 8:10 pm
Tienes toda la razón, he probado con la opción de "important" y sin problema.
Muchas gracias de nuevo¡¡
Respondido : 03/03/2020 9:14 pm
Hola Adán,
Excelente, me alegra que pudieses solucionarlo.
;mucha gracias por consultarnos y por tu preferencia y confianza en Webempresa. Cualquier otra consulta o problema que tengas con tu sitio web no tardes en consultarnos para poder ayudarte.
Nos leemos pronto en el foro, saludos 🙂
Respondido : 03/03/2020 10:17 pm
