> For the complete documentation index, see [llms.txt](https://docs.goaffpro.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goaffpro.com/affiliate-portal-customization/advanced-customization/css-customizations.md).

# CSS Customizations

### Here are some CSS customizations that you can make in your affiliate portal:

### Remove badges from the affiliate dashboard

To remove the badges showcasing the commission rate and the discount value of the coupon from the affiliate dashboard:

<figure><img src="/files/1B9H6scpGpZDLlaYeZ88" alt=""><figcaption><p>Affiliate dashboard badges</p></figcaption></figure>

Go to the Look and Feel > Affiliate Dashboard > Custom CSS section and paste the following code in there:

```css
.badge {
visibility: hidden;
}
```

After this, click on **Submit**.

<figure><img src="/files/WkPJOX5zlUQkcCC7fBNB" alt=""><figcaption><p>Add the code and click on Submit</p></figcaption></figure>

The badges will be removed from the affiliate dashboard.&#x20;

<figure><img src="/files/wvvihsz6nOTePTWlgEk8" alt=""><figcaption></figcaption></figure>

### Remove overlay from the landing page banner

To remove the overlay from the landing page banner:

<figure><img src="/files/rUBTXAw42D8ftsE8TsC7" alt=""><figcaption><p>Banner overlay</p></figcaption></figure>

Go to the Look and Feel > Affiliate Dashboard > Custom CSS section and paste the following code in there:

```css
#hero_background { 
background-blend-mode: lighten !important;
 }
```

After this, click on **Submit**.

<figure><img src="/files/SE5OQlDHHJEy8HtQojZs" alt=""><figcaption><p>Add the code and click on Submit</p></figcaption></figure>

The overlay will be removed from the landing page banner.

<figure><img src="/files/rbazLFLttSHd4iwSESy3" alt=""><figcaption></figcaption></figure>

### Customize the color of the affiliate portal footer

To customize the color of the footer section:

<figure><img src="/files/AiwjW5V1UWtOzInc3pAG" alt=""><figcaption><p>Affiliate portal footer</p></figcaption></figure>

Go to the Look and Feel > Affiliate Dashboard > Custom CSS section and paste the following code in there:

```css
.bg-light.border-top.border {
background-color: #xxxxxx !important;
}

/* Replace the #xxxxxx with the hex color of your choice */
```

After this, click on **Submit**.

<figure><img src="/files/YbykQIC2Y1dZSgaLj1TX" alt=""><figcaption><p>Add the code and click on Submit</p></figcaption></figure>

The footer color will get set as per the color you set (in the code).

<figure><img src="/files/CJiY0n1FoG9qa0jDcCu2" alt=""><figcaption></figcaption></figure>

## Align the signup page heading to the center&#x20;

To align the signup page heading to the center:

<figure><img src="/files/Wt6b1QnDTfHZxD4PIMqq" alt=""><figcaption><p>Signup page heading</p></figcaption></figure>

Go to the Look and Feel > Affiliate Dashboard > Custom CSS section and paste the following code in there:

```css
.text_on_bg {
    text-align: center;
}
```

After this, click on **Submit**.

<figure><img src="/files/ug8F2cFJxvC4pqOhA5F7" alt=""><figcaption><p>Add the code and click on Submit</p></figcaption></figure>

The heading on the signup page will get centered.&#x20;

{% hint style="info" %}
This will also apply to the heading on the login page of the affiliate portal.
{% endhint %}

<figure><img src="/files/gCgM3gVIAK868J4KD6TI" alt=""><figcaption></figcaption></figure>