Différencier les icônes de bouclier Admin et Modérateur

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

J’ai reçu le même retour d’un de nos modérateurs. Y a-t-il eu des progrès/idées pour différencier les icônes d’administrateur/modérateur au cours des 2 dernières années ?

[Lilly]

je ne l’ai vu nulle part dans ce sujet mais j’utilise CSS sur mon forum pour créer des boucliers de couleurs différentes pour les modérateurs et les administrateurs pour les messages (si les administrateurs sont membres des groupes de modérateurs). dans mon cas, les mods obtiennent des boucliers dorés et les admins des boucliers gris. mais on peut utiliser n’importe quelle couleur dans ces propriétés de couleur bien sûr.

css commun

// * changer la couleur du bouclier dans les messages en différenciant les utilisateurs admin et mod * //

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

je ne me suis pas donné la peine de le faire pour les cartes d’utilisateur ou les profils, mais je suppose que je pourrais trouver comment faire.

vous pouvez également changer la couleur des noms d’utilisateur des modérateurs et des administrateurs dans les messages pour les différencier davantage :

// * changer la couleur des noms d'utilisateur en différenciant les admins et les mods * //

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

[Turtle]

Le changement de couleur du bouclier n’a pas fonctionné - il est toujours resté gris pour les deux. Le sélecteur a-t-il changé depuis la publication de ceci ?

[NateDhaliwal]

Possible. Une inspection rapide de la page peut vous aider à déterminer la classe.

[Canapin (Coin-coin le Canapin)]

L’icône s’appelle désormais d-icon-shield-halved.

[Lilly]

oui le nom de l’icône a changé, il devrait donc être comme ceci

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

résultat

[Turtle]

Merci Lilly ! Et… CocoQuark, quelle que soit l’orthographe.

[Heliosurge (Dan DeMontmorency)]

[citation=“Lilly, post:35, topic:106114, full:true”]
oui, le nom de l’icône a changé, donc ça devrait ressembler à ça

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

[/citation]

Je me demandais juste si nous voulions échanger, par exemple, l’icône d’administrateur avec le chapeau de magicien, échanger la couleur avec display none et ensuite ajouter une ligne avec .d-icon.d-icon-wizard ? (Je ne suis pas sûr du chapeau de magicien fa sous la main)

[Turtle]

Le fa est :
fa-solid fa-hat-wizard
Alors quel serait le CSS, alors ? Si je voulais changer l’icône d’administrateur en hat-wizard ?

[Canapin (Coin-coin le Canapin)]

@Turtle

Alors, quelle serait la feuille de style CSS ? Si je voulais changer l’icône d’administrateur en « hat-wizard » ?

La même feuille de style CSS.
La classe sera toujours d-icon-shield-halved, peu importe l’icône que vous avez remplacée, si vous utilisez cette méthode de remplacement :

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 manière la plus simple de faire cela est comme avec le même code ci-dessus, mais aussi le code de remplacement d’icône dans l’onglet head-tag comme ceci :

dans

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

</script>

résultat :

[Turtle]

Est-ce que cela fonctionnera pour que les administrateurs aient le chapeau et les modérateurs le bouclier ? Ou cela les remplace-t-il tous comme sur l’image, et si oui, y a-t-il une solution ?

[Lilly]

vous pourriez peut-être hacker un CSS conditionnel ou du code dans le script là-bas. mais c’est un remplacement d’icône pour tous.

[Turtle]

En fait, même l’icône du wizard ne fonctionne pas en ce moment. J’ai utilisé le code exact dans la tête que vous m’avez donné.
Je peux réessayer, c’était peut-être un bug ou quelque chose comme ça.

[Canapin (Coin-coin le Canapin)]

Avez-vous ajouté l’icône de chapeau de sorcier dans le paramètre du site SVG icon subset ?

[Jagster (Jakke Lehtonen)]

Ceci est une question hors sujet, mais j’aimerais conserver le demi-bouclier pour les modérateurs. Mais j’aimerais beaucoup afficher le chapeau de sorcier avec les administrateurs ^[1]

Mais je ne peux pas remplacer le demi-bouclier par le chapeau, à cause des modérateurs.

Oh mon dieu…

@Turtle

Est-ce que cela fonctionnera pour que les administrateurs aient le chapeau et les modérateurs le bouclier ? Ou cela remplace-t-il simplement tout le monde comme sur l’image, et si oui, y a-t-il un moyen de contourner cela ?

Je devrais vraiment commencer à lire les sujets Désolé.

---

1. J’ai quelques femmes d’âge mûr sur mon forum, et elles sont fans de Potter ; cela les agacerait tellement ↩︎

[Jagster (Jakke Lehtonen)]

@Lilly

je n’ai pas pris la peine de le faire pour les cartes d’utilisateur ou les profils

Sur mon forum, cela s’affiche uniquement sur la carte d’utilisateur et les profils, mais pas sur les sujets.

Une idée de ce que j’ai encore fait?

[Heliosurge (Dan DeMontmorency)]

Shield svg pour le code révisé.

@Lilly

le nom de l’icône nya a changé, donc ça devrait être comme ça

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

résultat