> ## Documentation Index
> Fetch the complete documentation index at: https://docs.leaderos.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Roles

> Create custom roles with the permissions set by you within the website. You can set these roles manually to the user or when a purchase is made in-store.

### How to create a role?

Go to **Dashboard > User Management > Roles > Add New**. You can add a role by providing the following information:

* **Name:** Enter the name of the role.
* **Priority:** Enter the priority of the role. The role with the highest priority will be given preference.
* **Username CSS:** Write CSS code for the role's username.
* **Badge CSS:** Write CSS code for the role's badge.
* **Is Staff Role:** Enable this option if you want to make this role a staff role.
* **Permissions:** If you enable the "Is Staff Role" option, you can set the permissions for the staff role. You can learn more about permissions [here](/using-leaderos/permissions).

<Warning>
  Use **"!important"** in the CSS code to override the default CSS. For example, **"color: red !important;"**
</Warning>

<img src="https://mintcdn.com/leaderos/1_0zbNsz4Hsaw6wS/images/using-leaderos/create-role.png?fit=max&auto=format&n=1_0zbNsz4Hsaw6wS&q=85&s=d4a335abca8c193b56387033881a223e" alt="Image" width="1708" height="1366" data-path="images/using-leaderos/create-role.png" />

#### Example CSS code for a role

**For Username:**

```css theme={null}
color: #ff0000 !important;
```

**For Badge:**

```css theme={null}
color: #fff !important;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(255,0,0,1) 100%) !important;
```

**Preview:**

<img src="https://mintcdn.com/leaderos/1_0zbNsz4Hsaw6wS/images/using-leaderos/role-preview.png?fit=max&auto=format&n=1_0zbNsz4Hsaw6wS&q=85&s=5f9fff2ebcc6727d3916b25c6f48bbd0" alt="Image" width="504" height="258" data-path="images/using-leaderos/role-preview.png" />

### How to add avatar border to a role?

You can design avatar borders to display custom roles for your users like Hypixel forum. To design avatar borders, go to **Dashboard > Appearance > Custom CSS**. You can add the following CSS code to add an avatar frame to a role:

<Warning>
  Please replace `ROLE_ID` with the role class you want to add the avatar frame to. To find the role id of a role, go to **Dashboard > User Management > Roles** and click the **"Edit"** button next to the role.
</Warning>

```css theme={null}
.avatar-ROLE_ID {
  position: relative;
  width: 74px;
  height: 74px;
  display: inline-block;
}

.avatar-ROLE_ID::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -2px;
  background: url('https://hypixel.net/styles/hypixel-v2/images/avatar-frames/vip.png') no-repeat center center;
  background-size: cover;
  z-index: 2;
}
```

<img src="https://mintcdn.com/leaderos/1_0zbNsz4Hsaw6wS/images/using-leaderos/forum-avatar-border.png?fit=max&auto=format&n=1_0zbNsz4Hsaw6wS&q=85&s=6148d3ae72951fae2e5ad96f0efd01ae" alt="Image" width="542" height="464" data-path="images/using-leaderos/forum-avatar-border.png" />