Differenziare le icone scudo di Admin e Moderatore

[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)]

Ho ricevuto lo stesso feedback da uno dei nostri moderatori. Ci sono stati progressi/idee per differenziare le icone dell’amministratore/moderatore negli ultimi 2 anni?

[Lilly (Lillian Louis)]

non l’ho visto da nessuna parte in questo argomento, ma uso il CSS sul mio forum per creare scudi di diversi colori per moderatori e amministratori nei post (se gli amministratori sono membri dei gruppi di moderatori). nel mio caso, i mod ottengono scudi dorati e gli admin grigi. ma si può usare qualsiasi colore in quelle proprietà di colore ovviamente.

css comune

// * cambia il colore dello scudo nei post differenziando gli utenti admin e mod* //

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

non mi sono preoccupato di farlo per le schede utente o i profili, ma suppongo che potrei scoprirlo.

puoi anche cambiare il colore dei nomi utente di moderatori e amministratori nei post per distinguerli ulteriormente:

// * cambia il colore dei nomi utente differenziando admin e mod* //

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

[Turtle]

Il cambio di colore dello scudo non ha funzionato: è rimasto dello stesso grigio per entrambi. Il selettore è cambiato da quando è stato pubblicato questo?

[NateDhaliwal]

Possibilmente. Un’ispezione rapida della pagina può aiutarti a determinare la classe.

[Canapin (Coin-coin le Canapin)]

L’icona ora si chiama d-icon-shield-halved.

[Lilly (Lillian Louis)]

Sì, il nome dell’icona è cambiato, quindi dovrebbe essere così

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

risultato

[Turtle]

Grazie Lilly! E… CocoQuark, come diavolo si scrive.

[Heliosurge (Dan DeMontmorency)]

@Lilly

il nome dell’icona è cambiato quindi dovrebbe essere così

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

Mi stavo solo chiedendo se volessimo scambiare, diciamo, l’icona dell’admin con il cappello da mago, scambiare il colore con display none e poi aggiungere una riga con .d-icon.d-icon-wizard? (Non sono sicuro del cappello da mago fa a portata di mano)

[Turtle]

Il fa è:
fa-solid fa-hat-wizard
Quindi quale sarebbe il css, allora? Se volessi cambiare l’icona dell’amministratore in hat-wizard?

[Canapin (Coin-coin le Canapin)]

@Turtle

Quindi quale sarebbe il CSS, allora? Se volessi cambiare l’icona dell’amministratore in hat-wizard?

Lo stesso CSS.
La classe sarà ancora d-icon-shield-halved indipendentemente dall’icona che hai sostituito, se utilizzi questo metodo di sostituzione:

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 (Lillian Louis)]

Il modo più semplice per farlo è come con il stesso codice sopra, ma anche il codice di sostituzione delle icone nella scheda head-tag come questa:

in

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

</script>

risultato:

[Turtle]

Funzionerà in modo che gli amministratori possano avere il cappello e i moderatori lo scudo? O li sostituirà tutti come nell’immagine, e in tal caso, c’è un modo per aggirarlo?

[Lilly (Lillian Louis)]

beh potresti essere in grado di modificare il CSS condizionale o del codice nello script lì. ma quella è la sostituzione delle icone per tutti.

[Turtle]

In realtà, nemmeno l’icona dello wizard funziona al momento. Ho usato il codice esatto nella testa che mi hai dato.
Posso riprovare, forse era un glitch o qualcosa del genere.

[Canapin (Coin-coin le Canapin)]

Hai aggiunto l’icona del cappello da mago nell’impostazione del sito SVG icon subset?

[Jagster (Jakke Lehtonen)]

Questa è una domanda OT, ma vorrei mantenere lo scudo intermedio per i moderatori. Ma mi piacerebbe molto mostrare il cappello da mago con gli amministratori ^[1]

Ma non posso sostituire lo scudo intermedio con il cappello, a causa dei moderatori.

Oh Dio…

@Turtle

Funzionerà in modo che gli amministratori possano avere il cappello e i moderatori lo scudo? O li sostituirà tutti come nell’immagine, e se è così, c’è un modo per aggirarlo?

Dovrei davvero iniziare a leggere gli argomenti Scusa.

---

1. Ho poche donne di mezza età nel mio forum, e sono fan di Potter; questo le infastidirebbe così tanto ↩︎

[Jagster (Jakke Lehtonen)]

@Lilly

non mi sono preoccupato di farlo per le schede utente o i profili

Sul mio forum viene visualizzato solo sulla scheda utente e sui profili, ma non sugli argomenti.

Hai qualche idea su cosa ho combinato di nuovo?

[Heliosurge (Dan DeMontmorency)]

Scudo svg per codice rivisto.

@Lilly

il nome dell’icona è cambiato quindi dovrebbe essere così

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

risultato