Diferenciar iconos de escudo de Admin y Moderador

[codinghorror (Jeff Atwood)]

Given the surprising level of difficulty, maybe we should just leave this be… not like it is broken the way it is.

[cosdesign (Cos)]

I know it’s late but I just want to share my solution to display that admin crown ( so far only on topic’s page ) by using CSS and JS. I could also use some help cause for some reason my js code is not working…I can see it in that inline theme js file but still not working ( works well on jsfiddle though )

CSS

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

}

JS ( to display the title on hover - but as I said is not working when I include it inside )
Working Jsfiddle demo

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");

[dandv (Dan Dascalescu)]

Recibí la misma opinión de uno de nuestros moderadores. ¿Algún avance/idea para diferenciar los iconos de administrador/moderador en los últimos 2 años?

[Lilly]

no lo vi en ningún lado en este tema, pero uso CSS en mi foro para hacer escudos de diferentes colores para moderadores y administradores en las publicaciones (si los administradores son miembros de grupos de moderadores). en mi caso, los mods obtienen escudos dorados y los admins grises. pero uno puede usar cualquier color en esas propiedades de color, por supuesto.

css común

// * cambiar el color del escudo en las publicaciones diferenciando usuarios administradores y moderadores* //

span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-alt {
    color: #969696;
  }
}

no me he molestado en hacerlo para las tarjetas de usuario o perfiles, pero supongo que podría averiguarlo.

también puedes cambiar el color de los nombres de usuario de moderadores y administradores en las publicaciones para distinguirlos aún más:

// * cambiar el color de los nombres de usuario diferenciando administradores y moderadores* //

span.username {
  &.moderator a {
    color: #d5b907;
  }
  &.admin a {
    color: #969696;
  }
}

[Turtle]

El cambio de color del escudo no funcionó; todavía se veía del mismo color gris para ambos. ¿Ha cambiado el selector desde que se publicó esto?

[NateDhaliwal]

Posiblemente. Una inspección rápida de la página puede ayudarte a determinar la clase.

[Canapin (Coin-coin le Canapin)]

El icono ahora se llama d-icon-shield-halved.

[Lilly]

sí, el nombre del icono cambió, así que debería ser así

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

resultado

[Turtle]

¡Gracias Lilly! Y… CocoQuark, como sea que se escriba.

[Heliosurge (Dan DeMontmorency)]

@Lilly

el nombre del icono cambió, así que debería ser así

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

Solo me preguntaba si queríamos intercambiar, por ejemplo, el icono de administrador con el sombrero de mago, intercambiaríamos el color con display none y luego agregaríamos una línea con .d-icon.d-icon-wizard? (No estoy seguro del sombrero de mago fa de inmediato)

[Turtle]

El fa es:
fa-solid fa-hat-wizard
Entonces, ¿cuál sería el CSS si quisiera cambiar el icono de administrador a hat-wizard?

[Canapin (Coin-coin le Canapin)]

@Turtle

Entonces, ¿cuál sería el CSS? Si quisiera cambiar el icono de administrador a hat-wizard.

El mismo CSS.
La clase seguirá siendo d-icon-shield-halved independientemente del icono con el que hayas reemplazado, si utilizas este método de reemplazo:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Lilly]

La forma más fácil de hacer esto es como con el mismo código anterior, pero también código de reemplazo de iconos en la pestaña de etiqueta de encabezado como esta:

en

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('shield-halved', 'hat-wizard')

</script>

resultado:

[Turtle]

¿Funcionará para que los administradores tengan el sombrero y los moderadores el escudo? ¿O simplemente los reemplaza a todos como en la imagen, y si es así, hay alguna forma de evitarlo?

[Lilly]

bueno, podrías hackear un CSS condicional o algún código en el script de allí. pero eso es un reemplazo de iconos para todos.

[Turtle]

En realidad, ni siquiera el icono del asistente funciona ahora mismo. Usé el código exacto en el encabezado que me diste.
Puedo intentarlo de nuevo, tal vez fue un fallo o algo así.

[Canapin (Coin-coin le Canapin)]

¿Agregaste el ícono del sombrero de mago en la configuración del sitio SVG icon subset?

[Jagster (Jakke Lehtonen)]

Esta es una pregunta fuera de tema, pero me gustaría conservar el escudo medio para los mods. Pero me gustaría mucho mostrar el sombrero de mago con los administradores ^[1]

Pero no puedo reemplazar el escudo medio por el sombrero, por los moderadores.

Oh Dios…

@Turtle

¿Funcionará para que los administradores tengan el sombrero y los moderadores el escudo? ¿O simplemente los reemplaza a todos como en la imagen, y si es así, hay alguna manera de evitarlo?

Realmente debería empezar a leer los temas Lo siento.

---

1. Tengo pocas mujeres de mediana edad en mi foro, y son fans de Potter; ¡eso las molestaría mucho ↩︎

[Jagster (Jakke Lehtonen)]

[cita=“Lilly, publicación:31, tema:106114”]
no me he molestado en hacerlo para las tarjetas de usuario o los perfiles
[/cita]

En mi foro solo se muestra en la tarjeta de usuario y los perfiles, pero no en los temas.

¿Alguna idea de qué he hecho mal otra vez?

[Heliosurge (Dan DeMontmorency)]

Svg de escudo para código revisado.

[quote=“Lilly, post:35, topic:106114, full:true”]
sí, el nombre del icono cambió, por lo que debería ser así

span.username {