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

So, lo so che è tardi, ma voglio condividere la mia soluzione per mostrare quella corona da amministratore (al momento solo nella pagina dei topic) utilizzando CSS e JS. Potrei anche aver bisogno di aiuto perché, per qualche motivo, il mio codice JS non funziona. Lo vedo nel file inline del tema JS, ma non funziona ancora (funziona bene su jsfiddle, però).

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 (per mostrare il titolo al passaggio del mouse - ma come ho detto, non funziona quando lo includo dentro )
Demo funzionante su Jsfiddle

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Amministratore della comunità");

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

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]

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]

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]

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

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

@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