[Resuelto] Cambios diseño con CSS  

 
Adán
 Adán
Usuario eminente

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
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

Respondido : 26/02/2020 4:47 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Adán
 Adán
Usuario eminente

@jmarreros

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
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

Respondido : 03/03/2020 8:10 pm

Cursos Gratuitos WordPress

Adán
 Adán
Usuario eminente

@jmarreros

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
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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 🙂

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

Respondido : 03/03/2020 10:17 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Por favor Iniciar Sesión o Registro