--- title: Interface custom CSS description: interface customization css style --- [Skip to content](https://help.ecomcharge.com/en/knowledge-base/pspbackoffice-interface-custom-css#main-content) - [English](https://help.ecomcharge.com/en/knowledge-base/pspbackoffice-interface-custom-css) - [Русский](https://help.ecomcharge.com/knowledge-base-ru/pspbackoffice-interface-custom-css) English Show submenu for translations [Customer portal](https://help.ecomcharge.com/tickets?hsLang=en) - [Subscribe to platform updates](https://share-eu1.hsforms.com/1iuchcnmzT9yq2VKMCRdsLwfnh6h) - [Support & Requests](https://help.ecomcharge.com/en/knowledge-base/support-requests) Open main navigation Close main navigation - [Subscribe to platform updates](https://share-eu1.hsforms.com/1iuchcnmzT9yq2VKMCRdsLwfnh6h) - [Support & Requests](https://help.ecomcharge.com/en/knowledge-base/support-requests) - - [English](https://help.ecomcharge.com/en/knowledge-base/pspbackoffice-interface-custom-css) - [Русский](https://help.ecomcharge.com/knowledge-base-ru/pspbackoffice-interface-custom-css) English Show submenu for translations - [Customer portal](https://help.ecomcharge.com/tickets) - [eComCharge Blog](https://ecomcharge.com/blog/) [eComCharge Blog](https://ecomcharge.com/blog/) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. 1. [eComCharge knowledge base](https://help.ecomcharge.com/en/knowledge-base?hsLang=en) 2. [Admin Panel User Guide](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en) 3. [System administration](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#system-administration) # Interface custom CSS To customize CSS parameters, go to the Admin tab \> Settings \> Edit. Then in the Interface custom CSS field insert the customized CSS code following the example below. The example includes all the fields that can be customized: replace the required values, delete the unnecessary lines and click Apply. CSS parameters example: `body {` `--active-color: #ff4e02;` `--active-nav-item: var(--active-color);` `--non-active-nav-item: #ffffff;` `--navigation-bg: #4b5360;` `--navigation-dropdown-bg: transparent;` `--popup-bg-color: #ffffff;` `--active-subnav-item: var(--active-color);` `--non-active-subnav-item: #59616c;` `--session-header-bg-color: #181818;` `--session-header-color: #ffffff;` `--header-logo-max-height: 30px;` `--header-logo-max-width: 160px;` `--footer-logo-max-height: 30px;` `--footer-logo-max-width: 160px;` `--button-text-color: #ffffff;` `--button-bg-color: var(--active-color);` `--button-secondary-color: var(--active-color);` `--input-bg-color: #ffffff;` `--input-border-color: #e1e1e1;` `--table-header-color: #ffffff;` `--table-header-bg-color: #8c8c8c;` `--table-color: #181818;` `--table-row-odd-bg-color: #ffffff;` `--table-row-even-bg-color: #f7f7f7;` `--select-highlited-option-color: #ffffff;` `--select-highlited-option-bg: var(--active-color);` `--form-bg-color: #f7f7f7;` `--table-link-color: #026578;` `}` `html {` `--font-family-base: "Montserrat", sans-serif;` `--font-size-base: 16px;` `--color: #181818;` `}` Table: The description of interface CSS parameters: | | Parameter name | Description | | --- | --- | --- | | 1 | --color | The base font color. | | 2 | --active-color | The color for active elements, such as buttons or links. | | 3 | --active-nav-item | The color for the currently selected navigation item. | | 4 | --non-active-nav-item | The color for non-selected navigation items. | | 5 | --navigation-bg | The background color for the top navigation bar (the one with Admin, Account Manager, Support Manager tabs). | | 6 | --navigation-dropdown-bg | The background color for dropdown menus in the navigation. | | 7 | --popup-bg-color | The background color for pop-up or modal windows. | | 8 | --active-subnav-item | The color for active sub-navigation items. | | 9 | --non-active-subnav-item | The color for non-active sub-navigation items. | | 10 | --session-header-bg-color | The background color for the header of the login form. | | 11 | --session-header-color | The font color for the header of the login form. | | 12 | --header-logo-max-height | The maximum height for the header logo. | | | Parameter name | Description | | --- | --- | --- | | 13 | --header-logo-max-width | The maximum width for the header logo. | | 14 | --footer-logo-max-height | The maximum height for the footer logo. | | 15 | --footer-logo-max-width | The maximum width for the footer logo. | | 16 | --button-text-color | The color of text within buttons | | 17 | --button-bg-color | The background color for primary buttons. | | 18 | --button-secondary-color | The background color for secondary buttons. | | 19 | --font-size-base | The base font size for the design. | | 20 | --font-family-base | The primary font family used. | | 21 | --input-bg-color | The background color for input fields. | | 22 | --input-border-color | The border color for input fields. | | 23 | --table-header-color | The text color for table headers. | | 24 | --table-header-bg-color | The background color for table headers. | | 25 | --table-color | The text color for table content. | | 26 | --table-row-odd-bg-color | The background color for odd-numbered table rows. | | 27 | --table-row-even-bg-color | The background color for even-numbered table rows. | | 28 | --select-highlighted-option- color | The color for the highlighted options in select dropdowns. | | 29 | --select-highlighted-option-bg | The background color for highlighted options | | 30 | --form-bg-color | The background color for form elements. | | 31 | --table-link-color | The link color within tables. | ![](https://help.ecomcharge.com/hs-fs/hubfs/image-png-Oct-10-2025-01-52-00-2910-AM.png?width=799&height=576&name=image-png-Oct-10-2025-01-52-00-2910-AM.png)*InterfaceelementsandthecorrespondingCSSparameters(1)* *![](https://help.ecomcharge.com/hs-fs/hubfs/image-png-Oct-10-2025-01-52-43-2612-AM.png?width=804&height=580&name=image-png-Oct-10-2025-01-52-43-2612-AM.png)* *InterfaceelementsandthecorrespondingCSSparameters(2–3)*     - [Admin Panel User Guide](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#main-content) - [Introduction](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#introduction) - [Before you start](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#before-you-start) - [Users](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#users) - [System administration](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#system-administration) - [Merchant account management](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#merchant-account-management) - [Configuration of payment gateways](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#configuration-of-payment-gateways) - [Merchant shop management](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#merchant-shop-management) - [Dashboard](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#dashboard) - [Configuration of fraud protection services](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#configuration-of-fraud-protection-services) - [Transaction management](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#transaction-management) - [Subscription management](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#subscription-management) - [Transaction reports](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#transaction-reports) - [Accounting and financial reports](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#accounting-and-financial-reports) - [Finances](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#finances) - [Merchant's balance](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#merchants-balance) - [Mass payouts to customers](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#mass-payouts-to-customers) - [Additional services](https://help.ecomcharge.com/en/knowledge-base/admin-panel-user-guide?hsLang=en#additional-services) - [Smart Risk and Routing Engine](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#main-content) - [Introduction](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#introduction) - [Overall service description](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#overall-service-description) - [Getting started](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#getting-started) - [Smart routing management](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#smart-routing-management) - [Settings management](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#settings-management) - [Appendix 1: Logical operators](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#appendix-1-logical-operators) - [Appendix 2: List of system fields](https://help.ecomcharge.com/en/knowledge-base/smart-risk-and-routing-engine?hsLang=en#appendix-2-list-of-system-fields) - [PSP API documentation](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#main-content) - [Introduction](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#introduction) - [Request requirements](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#request-requirements) - [HTTP response codes](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#http-response-codes) - [PSP ID and Secret Key](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#psp-id-and-secret-key) - [Merchants](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#merchants) - [Shops](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#shops) - [Transactions (DWH v.2)](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#transactions-dwh-v-2) - [Transactions (DWH v.1)](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#transactions-dwh-v-1) - [Reference](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#reference) - [Reports (DWH v.2)](https://help.ecomcharge.com/en/knowledge-base/psp-api-documentation?hsLang=en#reports-dwh-v-2) - [Video guides](https://help.ecomcharge.com/en/knowledge-base/video-guides?hsLang=en#main-content) - [Creating rules in Smart Routing](https://help.ecomcharge.com/en/knowledge-base/video-guides?hsLang=en#creating-rules-in-smart-routing) - [Payment Widget customization](https://help.ecomcharge.com/en/knowledge-base/video-guides?hsLang=en#payment-widget-customization) - [Integrations](https://help.ecomcharge.com/en/knowledge-base/integrations?hsLang=en#main-content) - [Active Connectors with PSPs, banks, APM solution providers](https://help.ecomcharge.com/en/knowledge-base/integrations?hsLang=en#active-connectors-with-psps-banks-apm-solution-providers) - [Release Notes](https://help.ecomcharge.com/en/knowledge-base/release-notes?hsLang=en#main-content) - [2025](https://help.ecomcharge.com/en/knowledge-base/release-notes?hsLang=en#2025) - [Support and Requests](https://help.ecomcharge.com/en/knowledge-base/support-and-requests?hsLang=en) [![eComCharge\_main logo uncut@3x 1-2](https://help.ecomcharge.com/hs-fs/hubfs/eComCharge_main%20logo%20uncut@3x%201-2.png?width=150&height=77&name=eComCharge_main%20logo%20uncut@3x%201-2.png "eComCharge_main logo uncut@3x 1-2")](https://help.ecomcharge.com/?hsLang=en) [mailto:sales@ecomcharge.com](mailto:sales@ecomcharge.com) © 2026 eComCharge UAB