Avisos
Vaciar todo

[Resuelto] Colores para el badge de etiquetas  

 
Miguel
 Miguel
Usuario eminente

Hola de nuevo,

Estoy tratando de configurar desde la configuración CSS de Astra los colores de los badge de etiquetas para el widget de post de Elementor.

He añadido varias líneas de código para personalizar esos colores. Como ejemplo:

.tag-trabajo .elementor-post__badge {
background-color: #4b8a4b
!important;
}

Esto funciona en todas las páginas estáticas (inicio y las demás). El problema viene cuando abres un post y miras a la barra lateral (donde haya rticulos recomendados y ultimos articulos). Los colores se desconfiguran habiendo dos casos:

1 - Todos los articulos recomendados, sus badges de etiqueta cogen el color de la etiqueta del artículo abierto (el que en ese momento tengo abierto en la página).

2 - Segunda opción: arbitrariamente coge unos colores para unos articulos y para otros, muestra el color de la etiqueta del articulo abierto (como en el primer punto).

¿Por qué puede estar pasando esto? He revisado la configuracion de colores primarios de mi tema y de Elementor y todo parece estar OK. ¿A alguien le ha pasado esto¿

Agradezco la asistencia de antemano. Adjunto imagen de la barra latera donde el color de los badges de las etiquetas se muestra erroneamente. Gracias y saludos

badges todos del mismo color

 

Contenido solo visible a usuarios registrados

Respondido : 13/05/2021 5:07 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Miguel

Pude revisar y tu código esta correcto sin embargo hay una discrepancia cuando entramos al post, lo que sucede es lo siguiente al ser tu código CSS algo general y no mas especifico, cuando entramos al post el ya posee la clase de la categoría que le corresponde entonces toma como mayor importancia todas las badges que tengas presentes en dicho post.

Cambia tus códigos apuntando directamente a los badges que se encuentren dentro del elemento grid de los post, por ejemplo:

.tag-trabajo .elementor-post__card .elementor-post__badge {
background-color: #4b8a4b !important;
}

Saludos

Esta publicación ha sido modificada el hace 1 año por Bruno
Respondido : 13/05/2021 5:22 pm

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

Miguel
 Miguel
Usuario eminente

@bruno-vichetti Muchas gracias por la respuesta!
Tienes razón, la jerarquía del objeto es más lógica como propones.

No obstante y tras haber añadido el código, el resultado sigue siendo el mismo. He probado tanto con el CSS de Astra como con los ajustes de CSS para el widget de Elementor y no ha dado resultado.

Pero curiosamente justo este post si muestra todos los colores correctamente: https://viviryviajarensrilanka.com/como-montar-guest-house-hostel-en-sri-lanka/

O algo estoy haciendo mal o hay un ajuste lógico que me escapa. ¿Qué puede ser esta vez?

Gracias y saludos

Respondido : 13/05/2021 5:42 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Miguel

Recuerda que el ajuste sugerido debe aplicarse para todos los fragmentos de código donde modifiques el fondo de las badges, en efecto en el siguiente post funciona correctamente https://viviryviajarensrilanka.com/como-montar-guest-house-hostel-en-sri-lanka/ ya que has ido cambiando lo que te he sugerido, sin embargo verifica que apliques la regla para todas.

También si en tu sitio tienes algún plugin que gestione cache recuerda borrarla cada vez que actualices tu código CSS

Saludos!

Respondido : 13/05/2021 5:51 pm

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

Miguel
 Miguel
Usuario eminente

Hola de nuevo @bruno-vichetti

Anteriormente cuando me pasaste esa mejora en el código, lo apliqué a todos los tags y desafortunadamente sigue sin dar resultado. He probad tanto a añadirlo en los ajustes de Astra como metiendo el CSS en elementor.

Acabo de limpiar la cache y tampoco veo resultados. No se si puede estar relacionado con los colores primarios o algun conflicto con los queries de los tags que uso para el widget de los posts. A decir verdad no se me ocurren muchas opciones mas.

PS - es curioso que solo funcione para tag-trabajo (el que compartiste) pues realmente lo he aplicado a todos y he mirado en detalle el no haberme equivocado con ningun caracter o espacio

Respondido : 13/05/2021 6:27 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Miguel,

Ya he podido percatarme de lo sucedido inspeccionando a fondo el código de tu post, por ejemplo en el siguiente https://viviryviajarensrilanka.com/como-comenzar-un-negocio-en-sri-lanka-sin-inversion-mi-experiencia/

La clase .tag-negocios se presenta antes que todo en la estructura general del post así que a pesar de que las demás badges ya tienen un CSS definido por jerarquía siempre tendrá prioridad la que este por encima de los elementos. 

Vamos a cambiar la forma en la que apuntamos los badges con el siguiente código, tómalo de referencia para que lo apliques a todas las demás.

.elementor-grid .tag-crazy .elementor-post__badge{
background-color: #7E158C !important;
}

Nos cuentas como te va, Saludos

Respondido : 13/05/2021 7:09 pm

Cursos Gratuitos WordPress

Miguel
 Miguel
Usuario eminente

Wow Bruno eres un figura !! Ha funcionado! Muchas gracias!

Una pregunta antes de cerrar el hilo: ¿cómo has llegado a la conclusión de que había que tocar el .elementor-grid? Ni siquiera lo había visto anteriormente cuando inspeccionaba los estilos con la herramienta para desarrolladores.

De nuevo mil gracias!

Respondido : 13/05/2021 10:07 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Miguel,

Este elemento lo obtuvo del div superior al elemento que quieres modificar, te comparto una imagen:

image

Si vez directamente donde te marco es la clase general que abarca la sección y que aplicará luego las siguientes que tienes por jerarquía.

Nos comentas si podemos dar el tema como resuelto, un saludo 🖐️ 

Respondido : 13/05/2021 10:24 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Miguel
 Miguel
Usuario eminente

@argenis Muchísimas gracias por la aclaración! Lo tengo muy cuenta para la próxima.

Gracias por el cable y saludos desde España 🙂 

Respondido : 13/05/2021 11:03 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Miguel,

Encantados siempre de poder ayudar, si tienes alguna otra duda recuerda que puedes crear un nuevo tema y con todo gusto lo atenderemos.

un saludo 🖐️ 🤓 

Respondido : 13/05/2021 11:15 pm

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