Cambiar Colores de Insignias por Defecto (Bronze, Silver, Gold)

Desarrollador
1

¿Es posible cambiar los colores de las insignias de oro, plata y bronce a 3 colores que combinen mejor con los colores de nuestro tema? Nos gustaría cambiarlos para que combinen un poco mejor.

2

No soy un mago de CSS, pero esta sería mi solución… Simplemente cambia los colores a lo que quieras para que coincidan mejor con los colores de tu tema a continuación. También te recomiendo leer este tema, me fue muy útil en el pasado, ya que me ayudó a aprender a hacer cosas geniales con mi sitio.

Bronce

.badge-card .badge-contents .badge-icon.badge-type-bronze .fa {
    color: #cd7f32 !important;
}

Plata

.badge-card .badge-contents .badge-icon.badge-type-silver .fa {
    color: silver !important;
}

Oro

.badge-card .badge-contents .badge-icon.badge-type-gold .fa {
    color: #e7c300 !important;
}
6 Me gusta
4

Leyenda. ¡Muchas gracias!

5

¿Solo usas la inspección para encontrar cosas? Cambié todo, pero ahora estoy intentando trabajar en los que se muestran en la tarjeta de usuario. ¿La inspección de Chrome es la forma de intentar averiguar cómo se llaman las cosas?

6

Sí, solo inspecciona los elementos para encontrar la clase de lo que necesitas para hacer personalizaciones. También encuentro útil la guía de estilo.

3 Me gusta
7

¡Increíble! Esa guía de estilo es clave. Literalmente me ayudó a ajustar todo (estilo antes del lanzamiento). ¿Sabes si se puede acceder a la sección de administración desde allí? No pude encontrarla. Lo único que queda por abordar es el color de los usuarios por nivel de confianza. Intenté inspeccionar pero nada cambiaría este pequeño contenedor de color bronce. Esta es la tarea final y estoy decidido a terminarla hoy, jaja

Screenshot 2023-07-30 at 8.02.18 AM
Screenshot 2023-07-30 at 8.02.18 AM560×222 4.31 KB

8

eso está en el panel de administración, así que los usuarios normales no lo verán de todos modos. pero aquí tienes:

TL 1:

.user-metrics .table-cell.user-basic {
    background: [insert color code or variable here];
}

TL 2:

.user-metrics .table-cell.user-member {
    background: [insert color code or variable here];
}

TL 3:

.user-metrics .table-cell.user-regular {
    background: [insert color code or variable here];
}

TL 4:

.user-metrics .table-cell.user-leader {
    background: [insert color code or variable here];
}
4 Me gusta
9

¡Increíble! Mi TOC te lo agradece mucho. :joy:

1 me gusta