Help > Forum > Users > Hide or change the crown and shield icon that appears on moderator and administrator avatars

Hide or change the crown and shield icon that appears on moderator and administrator avatars

A crown icon appears toward the bottom-right corner of the avatar for administrators of the forum and a shield icon appears toward the bottom-right corner for moderators. The shield icon will only appear for a moderator if the content is related to the categories that the moderator has been assigned to. These icons help users quickly identify the people who help oversee the content in the forum or in certain categories.

You can hide or change the icons by following the instructions below:

  1. Log in to your Website Toolbox account.
  2. Click the Appearance link.
  3. In the Appearance menu, click the HTML link.
  4. Paste one or more of the CSS codes shown below into the Forum Head Tag HTML Code text box.

    To hide both icons:

    <style>
      .image-wrapper > i.moderator_user, .image-wrapper > i.admin_user {
        display: none !important;
      }
    </style>
    

    To hide the administrator icon:

    <style>
      .image-wrapper > i.admin_user {
        display: none !important;
      }
    </style>
    

    To hide the moderator icon:

    <style>
      .image-wrapper > i.moderator_user {
        display: none !important;
      }
    </style>
    

    To change the administrator icon:

    <style>
      .image-wrapper > i.admin_user:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(URL/ADDRESS OF ICON GES HERE);
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
    

    To change the moderator icon:

    <style>
      .image-wrapper > i.moderator_user:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(URL/ADDRESS OF ICON GES HERE);
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
    
  5. Save your changes.


If you still need help, please contact us.