# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.goaffpro.com/affiliate-portal-customization/advanced-customization/css-customizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.