# Frontend color customization

***

Follow these steps to begin customizing the colors of your frontend:

1. **Log in** to your admin console.
2. Navigate to the **Dealers** section.
3. Click on **Frontend Settings**.
4. Scroll down to the **Background** section, where color customization begins.

**Background**

* **Whole Page**: Use this option to set the background for your entire frontend.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FMYPAESRCWDPaQ2cpw9Mz%2Fimage.png?alt=media&#x26;token=b2d2b47c-1992-4a12-9cf4-4ff2520444f2" alt=""><figcaption></figcaption></figure>

* **Forms** - upper and lower part of your search box.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F6fjSS75HsyydgOe5RRzi%2Fimage.png?alt=media&#x26;token=a4ee358e-8f88-4c32-91ff-917b60534065" alt=""><figcaption></figcaption></figure>

* **Background shade** - border of section **Others** and line in the section **Summary**

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F8L3TXASTQSKG3YCR5iJG%2Fimage.png?alt=media&#x26;token=8a4582b3-d12e-4faf-a8a8-76a1e7527ce3" alt=""><figcaption></figcaption></figure>

* **Background Popover** - colour of pop-up window where **Conditions for ticket change** are published by carriers

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FkvKGtxUPUqVnRS8xbz4P%2Fimage.png?alt=media&#x26;token=a6b8a6d3-fdbb-447a-afb5-95e099d53d45" alt=""><figcaption></figcaption></figure>

* **Tooltip** - if you touch Airport city code by your mouse you will see this tooltip in a colour you set up.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F1HqLROTvKCwyZeWEmX59%2Fimage.png?alt=media&#x26;token=68d5b4d2-8ba6-473b-b165-5739d8ecb7bb" alt=""><figcaption></figcaption></figure>

* **Close button for modal window**&#x20;

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F1xMgBKid5liGhexlqZea%2Fimage.png?alt=media&#x26;token=f0fc72e2-35ea-408e-9271-0d2eaa45e188" alt=""><figcaption></figcaption></figure></div>

* **Calendars** - colour of screen between 2nd and 3rd step of booking process

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FaI94J3IbjMv1pzIvU4fW%2Fimage.png?alt=media&#x26;token=f7a38dc6-53a7-4e62-9378-9239b68ad857" alt=""><figcaption></figcaption></figure>

* **Texts** - body of your search box&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F8NOwAaSwGgSShV1ruaIM%2Fimage.png?alt=media&#x26;token=f460b95e-5132-4bba-bf1f-6fbb0c0c844b" alt=""><figcaption></figcaption></figure>

* **BackgroundGrayLight -** branded fares pop up window with detail

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FF8OxtAEhjWmrKs0Y8Bb8%2Fimage.png?alt=media&#x26;token=42503173-3d36-42b1-b5ff-0800f816a782" alt=""><figcaption></figcaption></figure></div>

* **Progress bar -** waiting page with plane

1\) TextProgressBar

2\)BackgroundProgressBarDark

3\)BackgroundProgressBarLight

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FkmxbyzzAlIeYOUMQfBeT%2Fimage.png?alt=media&#x26;token=76274d23-5d5c-4672-8b7d-6ec3b90475c5" alt=""><figcaption></figcaption></figure>

* **Page footer** - color of images&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FswbnnTztW9hgGmcmdAal%2Fimage.png?alt=media&#x26;token=c1406c4b-ba4a-4273-9cc9-1688d5682e96" alt=""><figcaption></figcaption></figure>

* **Background language selection** - color of language button.

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FJylJX9r3ZV3z0Y7jkNgp%2Fimage.png?alt=media&#x26;token=980c8119-4860-4cae-9247-70c9a34c764d" alt=""><figcaption></figcaption></figure>

* **Total travel time in flight details -** it is to be found in **Flight details**&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FORTuWHW32iFOyIA8nmYN%2Fimage.png?alt=media&#x26;token=f65de486-66da-4108-a676-91474f7c894e" alt=""><figcaption></figcaption></figure>

* **Background Danger** - action button when modifying My Profile details&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FmEJrFMYHy65vr2Pvbe9Z%2Fimage.png?alt=media&#x26;token=47e75c97-acfa-4749-a85e-2a6a1a69ba0a" alt=""><figcaption></figcaption></figure>

* **Backgroung success light** - confirmation that inserted promo code is correct
* **Backgroung choose date** - Date chosen in calendar&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FOhxiw0WuZPRSTT79lV0T%2Fimage.png?alt=media&#x26;token=7e73de33-ab5b-4295-abe4-3e8417fcecdd" alt=""><figcaption></figcaption></figure>

* **Checkbox Background** - color of checkbox "Only direct flights"

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F1Z37WeC91hxq1klMVqvr%2Fimage.png?alt=media&#x26;token=35c3476d-cb8e-43e0-9cf2-b62575dc53b0" alt=""><figcaption></figcaption></figure>

This option allows you to insert any image you want as your background.

**Recommended Image Size**: 1080 x 930 pixels (higher quality results in a better display).

**How to Insert Your Image:**

1. Click the box labeled **"Add Background Image"**.
2. Upload your photo from your computer.
3. Check the box **"Fix Background"** to keep the image static.
4. To repeat your image:
   * **Horizontally**: Select the option to repeat the image across the width.
   * **Vertically**: Select the option to repeat the image along the height.

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FsdXxZSpkQKN0gjJZSYw6%2Fimage.png?alt=media&#x26;token=d49828df-c408-4e6d-a00c-f3b54074416d" alt=""><figcaption></figcaption></figure></div>

* **Search form titles** - color of text shown in titles&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FOIaHCgm5phQaSLAHQ8ed%2Fimage.png?alt=media&#x26;token=266129b0-d24d-4b42-9792-daf20fcaa34e" alt=""><figcaption></figcaption></figure>

* **Selected in search form -** Departure date IATA code , Dates in calendar, type of class

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FMTXpSVRE4SrE0lp7Eyba%2Fimage.png?alt=media&#x26;token=421bd68f-5cea-455c-a229-d15a7a1a780f" alt=""><figcaption></figcaption></figure>

* **Whispered text** - arrival city whispered text&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FJ62ipZb1rCb7Ljlez88S%2Fimage.png?alt=media&#x26;token=f29c82ac-c6de-47d7-920e-13e85f9d6789" alt=""><figcaption></figcaption></figure>

* **Buttons** - button text color&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2Fa64VlQCkOKaJSILyxsrW%2Fimage.png?alt=media&#x26;token=ce730b83-869a-4230-bba0-32f270d3aa69" alt=""><figcaption></figcaption></figure>

* **Text white** - branded fare button text color&#x20;

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FVo1l1uCOJv6HWJQVv8WF%2Fimage.png?alt=media&#x26;token=8090d98a-7c33-42fd-846c-88eb4605722d" alt=""><figcaption></figcaption></figure></div>

* **Calendar today** - actual date color&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FO34zV9XiBdwlVtbVxmM9%2Fimage.png?alt=media&#x26;token=49c085d8-1eac-494d-b43d-b91e6714d6e2" alt=""><figcaption></figcaption></figure>

* **Warnings** - common warning text and dates, emphasized text.

e.g.:

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F9cS1HKsCy1SyA0AhJkMn%2Fimage.png?alt=media&#x26;token=7a79407b-e274-46a3-ae68-a8c1e7bf7142" alt=""><figcaption></figcaption></figure>

* **Baggage info**&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FBSWHpfzOfUxk23oWhZMI%2Fimage.png?alt=media&#x26;token=bddf44ce-fa2d-4700-a16c-9434048aaf71" alt=""><figcaption></figcaption></figure>

* **Flight days** -  borders and vertical line&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FHZfyr1TnqI2G3DuBRNYU%2Fimage.png?alt=media&#x26;token=78f2dfee-3cc5-4fe9-837e-71d403d7e446" alt=""><figcaption></figcaption></figure>

* **Calendar -** borders

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FswUwSY5itFy4G62K9nJC%2Fimage.png?alt=media&#x26;token=90a45f6f-47e5-4712-9d7d-c3fa7d6531d3" alt=""><figcaption></figcaption></figure>

* **Change time of flight** - payment method line divider

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FzvWI6NjwcJj6V5cxnz1H%2Fimage.png?alt=media&#x26;token=2320f7c0-503c-464d-b7f3-25c8dd0a4031" alt=""><figcaption></figcaption></figure>

* **Border filter separator** - left panel horizontal divider line&#x20;

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FMGSq5Pu0Me6OSkAJZNAW%2Fimage.png?alt=media&#x26;token=d8f2dcc1-ddd1-428a-995c-b1277da5ef41" alt=""><figcaption></figcaption></figure></div>

* **Step bar cycles**&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F0O6rEGY3ThUitzBc2bCJ%2Fimage.png?alt=media&#x26;token=010ee601-eae8-4cce-8068-e89b21a4d9b6" alt=""><figcaption></figcaption></figure>

* **Filled in form inputs** - missing content in fields when anything is already inserted&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FczX8IJUL1t045R9Pbemb%2Fimage.png?alt=media&#x26;token=76b0b6a2-3330-4208-b829-cb305cc5758f" alt=""><figcaption></figcaption></figure>

* **Border input unfilled** - if no content is inserted at all.

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FVa35bRZlLojWRF0TefSw%2Fimage.png?alt=media&#x26;token=5de176dc-e0eb-474e-b6c7-95e4e98e0cbf" alt=""><figcaption></figcaption></figure></div>

* **Border search form additional** - 2 vertical dividing lines&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FNJxLZGl6WclG8iaIJVGH%2Fimage.png?alt=media&#x26;token=42c8aeee-0295-4c63-868f-410ac5f7f5d9" alt=""><figcaption></figcaption></figure>

* **Shadows - Flight option** - color of cursor when choosing tje righ date

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F5LxmYoYUKyTWhfxx5uFX%2Fimage.png?alt=media&#x26;token=96a8a6ac-7e8d-4547-bbdf-e32d7cc65d53" alt=""><figcaption></figcaption></figure></div>

* **Links** - hyperlinks, More option text, Choose flight text.&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FvhHr5Q0Ks34JQGJFm2SI%2Fimage.png?alt=media&#x26;token=4fa61cc1-caef-4e70-b172-4ebaebd7a639" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FlgSJQAyPTuVogZSVMVXD%2Fimage.png?alt=media&#x26;token=bafa2993-973e-468e-b32d-002f471afb3c" alt=""><figcaption></figcaption></figure></div>

* **Background filter balls -** color of outer ball

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FTVZZBqsIJJeo2KHsZ18o%2Fimage.png?alt=media&#x26;token=4bd0b740-f6db-4d61-ace5-1d35471f46b7" alt=""><figcaption></figcaption></figure>

* **Border slider hover** - color of inner ball

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FecLeL4FoPKfbfsce7lfo%2Fimage.png?alt=media&#x26;token=78156950-ed94-43f4-a821-5fb55c42b7a5" alt=""><figcaption></figcaption></figure>

* **Within range slider** - slider color&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FOaRVtymW48yBvlnN7IhU%2Fimage.png?alt=media&#x26;token=ec1dfd75-7cba-43f3-a748-9b9cd8934017" alt=""><figcaption></figcaption></figure>

* **Out of range slider** - color of slider - part that is out of the limit

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2F5Nn02OsCPPv79ggzQu96%2Fimage.png?alt=media&#x26;token=e91398b2-8b2a-47ec-a2fb-8c2ae5aed407" alt=""><figcaption></figcaption></figure>

* **Border filter balls**&#x20;

<div align="left"><figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2FUq3b4hyNtJh4zqd4Oal1%2Fimage.png?alt=media&#x26;token=709f3060-e8ac-4f5e-99d8-ea9834d425b7" alt=""><figcaption></figcaption></figure></div>

* **Background tool tip slider**&#x20;

<figure><img src="https://974712556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjLiK_ydn4NIc66tQx%2Fuploads%2Fo0XsEd116ObFlbEbAjDA%2Fimage.png?alt=media&#x26;token=c7712be8-77e2-479b-b7cb-c6e39cba2355" alt=""><figcaption></figcaption></figure>

***

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