> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Underlined title

This guide will show you how to create colourful thick underlines for your titles.

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_2slkw9.png)

#### Step 1/4

Copy this code:

```
<style>
.custom-underline {
background-image: linear-gradient(0, #ffec78, #ffec78);
background-repeat: no-repeat;
background-size: auto 0.25em;
background-position: bottom 5px left;
}
</style>
```

#### Step 2/4

Paste it into your **Settings** -> **General settings** > **Global <body> HTML code** section:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_12n4rjs.png =550x550)


#### Step 3/4

Replace the colour code with your own one (note that you should enter the same code twice):

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_xumu2u.png =500x500)

#### Step 4/4

Pick the title you want to edit and wrap it with these HTML tags:

```
<span class="custom-underline">Your Title</span>
```


![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_1k16603.png =500x500)

#### Done!

Open the live version of your website to see the results:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1mkxzmd.png)

#### Advanced customization

You can customize the thickness of the underline by editing this value:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1u3bbda.png)

For example, it can be `0.4em` (thicker), or `0.1em` (thinner).

You can move the underline up or down by editing this value:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_crpvlx.png)

For example, you can set it to `15px` to move the underline up, or to `2px` to move it down.