# How do you customize colours of your GOL IBE front-end?

***

1. Log in to the <mark style="color:blue;">Admin Console.</mark>
2. Navigate to the correct section:

* **For Dealers**: Go to <mark style="color:blue;">**Dealer > FRONT-END SETTINGS.**</mark>
* **For Agencies**: Go to <mark style="color:blue;">**Dealers > Select the Dealer > FRONT-END SETTINGS**</mark>**.**

1. **Explore the Color Customization Options:**\
   In this section, you will find the following categories for color customization:

* **Background :** Refers to the background of your <mark style="color:blue;">GOL IBE</mark> site. For example, if you select green, your site’s background will appear green.
* **Progress Bar:** This section allows you to change progress bar color.
* **Texts:** Refers to all text elements displayed on your <mark style="color:blue;">GOL IBE</mark> site.
* **Borders:** This section allows you to change border color.
* **Shadows:** This section allows you to change shadow color.
* **Links:** This section allows you to change links color.
* **Gradients:** This section allows you to change the color of the <mark style="color:blue;">**SEARCH**</mark> button on your <mark style="color:blue;">GOL IBE</mark> site.
* **Progress Bars:** This section allows you to change color of further progress bars.
* **Sliders:** This section allows you to change the color of the sliders.
* **Tables:** This section allows you to change table color.
* **Colors Navigation:** This section allows you to change color of navigation bars and elements.

1. **How to manage this?**&#x20;
   * Click at requested box.&#x20;
   * You may either move with the point or side bar to get to the requested result.
   * Or you may inser exact color code into the field shown below on printscreen.
   * Once done, confirm your choice by clicking at button <mark style="color:blue;">"Choose"</mark>.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FCBbw3Z1yLLvCLT2kPG5b%2Fimage.png?alt=media&#x26;token=e051fa81-7508-422d-b4d8-0a3089d05359" alt=""><figcaption></figcaption></figure>

**What are the most used options?**&#x20;

**1) Background**

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FVwJ2SVt6omYQ8uiVZYAY%2Fimage.png?alt=media&#x26;token=ae2e8673-e1b2-4a9d-9a2c-821f2c9f514e" alt=""><figcaption></figcaption></figure>

a) <mark style="color:blue;">**Whole Page**</mark><mark style="color:blue;">:</mark> Changes the entire background of the page.\
b) <mark style="color:blue;">**Forms**</mark><mark style="color:blue;">:</mark> Refers to the section where trip criteria are set, such as origin, destination, and other preferences.\
c) <mark style="color:blue;">**Texts**</mark><mark style="color:blue;">:</mark> Focuses on elements such as origin, destination, flight dates, and passenger types.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FUfKv7go8JpRxTw3EUs1a%2Fimage.png?alt=media&#x26;token=67c4b56f-31d1-4ecb-be6e-ad2425cef4cb" alt=""><figcaption></figcaption></figure>

**Texts**\
a) <mark style="color:blue;">**Common Texts**</mark><mark style="color:blue;">:</mark> Refers to the text within the body of the search form.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FIC1dVLIVAgDwfgJ2ulYq%2Fimage.png?alt=media&#x26;token=3479bc6a-1ad2-4d8d-acd5-231fd1955bce" alt=""><figcaption></figcaption></figure>

The result:

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FqCNjxZD3aIfenJdha3RA%2Fimage.png?alt=media&#x26;token=363ddc06-788e-4512-a6be-ec96145d092a" alt=""><figcaption></figcaption></figure>

**Gradients**\
This section allows you to change the color of the **SEARCH** button on your GOL IBE site.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FvmDAqZZJKx3MgF4tlSLY%2Fimage.png?alt=media&#x26;token=8371d77e-014e-405f-88cf-a5557f229193" alt=""><figcaption></figcaption></figure>

The result:&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2Fl1qZz1BqUw7dm24XbEQa%2Fimage.png?alt=media&#x26;token=dc8b8db1-853e-42a3-8085-be54e2fbcf87" alt=""><figcaption></figcaption></figure>

* Navigate to <mark style="color:blue;">**Dealers > FRONT-END SETTINGS**</mark> and scroll to the section labeled **Background**.
* Select the checkbox labeled <mark style="color:blue;">**Add Background Image**</mark>.
* Upload an image from your computer.
* Check the box labeled <mark style="color:blue;">**Fixed Background**</mark> to apply the image as a static background.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FvDyAdU1fs9BleKcsZjGj%2Fimage.png?alt=media&#x26;token=9deb88b6-f6e5-4b21-913c-578cd77c95d0" alt=""><figcaption></figcaption></figure>

The result may look like this:&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FaK9PmmTCpLSlXn8ti5AV%2Fimage.png?alt=media&#x26;token=a156b96c-350d-4c6a-9bdd-cdd2edb598fd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To get to know more just feel free to see our video help :&#x20;

[<mark style="color:blue;">Where to customize your frontend</mark>](https://youtu.be/nfU27K8nra8)
{% endhint %}

***

📩 Feel free to contact us at: <mark style="color:blue;"><gol_support@cee-systems.com>.</mark>
