> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nadles.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Styling
## General
You can use free-form CSS to completely change the look of your user portal.
Navigate to the [Settings page](/user-portal/getting-started#settings) of your user portal
To override CSS variables, use `:root` pseudo-element.
```css theme={null}
:root {
--body-background-color: #999999;
}
```
See the full [list of supported CSS variables](#variables) below.
Be aware that the user portal CSS overrides checkout page themes.
## Subscribe button
This is the subscription card on the checkout page. Read below about customizing its text.
### Change button text for all checkout pages
In order to change the text on the «Subscribe» button, add the following CSS snippet to your [custom CSS](/user-portal/getting-started#settings).
```css theme={null}
.checkout-public .subscribe-button span {
display: none;
}
.checkout-public .subscribe-button::after {
content: 'Purchase';
}
```
Replace the `content` property with your custom text.
### Change button text for certain pages
Each checkout link has a hash, you can find it in the URL:
Nadles adds a CSS class `checkout-link-` to each checkout page.
In order to change the button text for a certain checkout page, use the following CSS:
```css theme={null}
.checkout-public.checkout-link- .subscribe-button span {
display: none;
}
.checkout-public.checkout-link- .subscribe-button::after {
content: 'Buy credits';
}
```
Replace `` with the hash of the checkout page.
### Change card title
In order to change the card title ("Subscribe" by default), add the following CSS snippet to your [custom CSS](/user-portal/getting-started#settings).
```css theme={null}
.checkout-public .subscribe-card .card-title span {
display: none;
}
.checkout-public .subscribe-card .card-title::after {
content: 'Purchase';
}
```
Replace the `content` property with your custom text.
## Example CSS
### Demo portal theme
The following CSS was used to style the [demo user portal](https://app.demoapiprovider.eu/).
Try applying it to your user portal to see how it works.
```css theme={null}
:root {
--heading-color: rgba(230, 230, 241, 0.9);
--body-background-color: rgb(35, 35, 51);
--primary-color-rgb: 105 108 255;
--primary-color-hover-rgb: 94 97 230;
--dark-color-rgb: 120 131 147;
--card-background-color: rgb(43, 44, 64);
--card-color: rgba(230, 230, 241, 0.7);
--row-color-hover:var(--card-color);
--card-title-color: rgb(105, 108, 255);
--card-emphasis-color: rgba(230, 230, 241, 0.9);
--card-box-shadow: 0 3px 8px rgba(20, 20, 29,0.22),0 0 transparent,0 0 transparent;
--card-header-border-bottom: 0;
--card-border-radius: 6px;
--menu-item-link-background-color-hover: rgba(230, 230, 241, 0.06);
--menu-item-active-link-background-color: rgba(230, 230, 241, 0.06);
--menu-item-active-link-background-color-hover: rgba(230, 230, 241, 0.06);
--menu-app-brand-name-content: '';
--menu-app-brand-logo-url: url('https://checkout.nadles.com/static/checkout/l_68c152034f6e07ecf776d3f369dde51b8fa6964d4d30a048f3f3102e921cd677.png');
--input-border-color: rgb(133, 133, 133);
--button-primary-outline-background-color: rgba(0 0 0 0);
--button-danger-outline-background-color: rgba(0 0 0 0);
--row-background-color-hover: var(--menu-item-active-link-background-color);
--table-header-border-bottom: var(--table-row-border);
}
.user-portal .layout-menu .app-brand .app-brand-logo,
.user-portal .authentication-inner .app-brand .app-brand-logo {
max-height: 6rem;
}
.app-brand-logo {
margin-right: 0 !important;
}
.bx-package:before {
content: "\ea0e";
}
```
## Variables
The simplest way to change the look of your user portal is to change values of these variables.
| Variable | Description |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `--primary-color-rgb: 100 67 118` | RGB code for primary color. |
| `--primary-color: rgb(var(--primary-color-rgb) / 1)` | |
| `--primary-color-hover-rgb: 176 120 206` | RGB code for primary color, hover. |
| `--primary-color-hover: rgba(var(--primary-color-hover-rgb))` | |
| `--secondary-color-rgb: 120 131 147` | RGB code for secondary color. |
| `--secondary-color: rgb(var(--secondary-color-rgb) / 1)` | |
| `--dark-color-rgb: 32 47 63` | RGB code for dark color. |
| `--dark-color: rgb(var(--dark-color-rgb) / 1)` | |
| `--danger-color-rgb: 255 62 29` | RGB code for danger color. |
| `--danger-color: rgb(var(--danger-color-rgb) / 1)` | |
| `--danger-color-hover: #e6381a` | RGB code for danger color, hover. |
| `--body-background-color: var(--bs-body-bg)` | Body background color, see also: --card-background-color. |
| `--body-color: var(--bs-body-color)` | Body text color, see also: --card-color. |
| `--body-font-family: var(--bs-body-font-family)` | |
| `--body-font-size: var(--bs-body-font-size)` | |
| `--body-font-weight: var(--bs-body-font-weight)` | |
| `--link-color: var(--primary-color)` | Default link color. |
| `--link-color-hover: var(--primary-color-hover)` | Default link color, hover. |
| `--heading-color: var(--body-color)` | Default color for headers (h1, h2, ...). |
| `--card-background-color: #ffffff` | Background color for cards. |
| `--card-color: var(--body-color)` | Text color for cards. |
| `--card-emphasis-color: #000000` | Pricing summary on the pricing card on subscription page. |
| `--card-margin: 0 0 1rem 0` | |
| `--card-box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12)` | Box shadow parameter for cards. |
| `--card-border-radius: 0.5rem` | Border radius for cards. |
| `--card-header-border-bottom: 1px solid #f1f1f1` | The border under card headers. |
| `--card-header-margin: 0 0 1.5rem 0` | |
| `--card-title-color: #566a7f` | Text color of card titles/headers. |
| `--menu-background-color: var(--card-background-color)` | Background color for the menu. |
| `--menu-color: var(--card-color)` | Menu text color. |
| `--menu-app-brand-logo-url: url('/assets/images/logo_noemboss.svg')` | URL for the brand logo. Nadles logo by default. |
| `--menu-app-brand-name-content: attr(data-provider-name)` | Text after the logo. API provider name by default. |
| `--menu-app-brand-link-color: rgb(63, 57, 90)` | Logo link text color, when the logo is clickable. |
| `--menu-app-brand-link-color-hover: var(--menu-app-brand-link-color)` | Logo link text color, when the logo is clickable, hover. |
| `--menu-header-color: #a1acb8` | Text color of menu header — customer name right under the logo in the menu. |
| `--menu-item-color: var(--card-color)` | Text color of inactive non-link menu item. |
| `--menu-item-color-hover: var(--card-color)` | Text color of inactive non-link menu item, hover. |
| `--menu-item-background-color: var(--card-background-color)` | Background color of `` element in the menu. |
| `--menu-item-background-color-hover: var(--card-background-color)` | Background color of `` element in the menu, hover. |
| `--menu-item-link-color: var(--menu-item-color)` | Text color of links in menu items. |
| `--menu-item-link-color-hover: var(--menu-item-color-hover)` | Text color of links in menu items, hover. |
| `--menu-item-link-background-color: var(--menu-item-background-color)` | Background color of links in menu items. |
| `--menu-item-link-background-color-hover: rgba(67, 89, 113, 0.04)` | Background color of links in menu items, hover. |
| `--menu-item-active-color: var(--link-color)` | Text color in active menu items, non-link. |
| `--menu-item-active-color-hover: var(--link-color-hover)` | Text color in active menu items, non-link, hover. |
| `--menu-item-active-background-color: var(--card-background-color)` | Background color of active `` element in the menu. |
| `--menu-item-active-background-color-hover: var(--card-background-color)` | Background color of active `` element in the menu, hover. |
| `--menu-item-active-link-color: var(--menu-item-active-color)` | Text color of links in active menu items. |
| `--menu-item-active-link-color-hover: var(--menu-item-active-color-hover)` | Text color of links in active menu items, hover. |
| `--menu-item-active-link-background-color: rgba(105, 108, 255, 0.16)` | Background color of links in active menu items. |
| `--menu-item-active-link-background-color-hover: rgba(105, 108, 255, 0.16)` | Background color of links in active menu items, hover. |
| `--menu-item-icon-color: var(--link-color)` | Menu icons text color. |
| `--menu-item-icon-color-hover: var(--link-color-hover)` | Menu icons text color, hover. |
| `--menu-item-active-icon-color: var(--link-color)` | Menu icons text color in active menu items. |
| `--menu-item-active-icon-color-hover: var(--link-color-hover)` | Menu icons text color in active menu items, hover. |
| `--menu-item-bullet-color: var(--primary-color)` | Menu bullet color in active menu items. |
| `--menu-item-bullet-color-hover: var(--primary-color)` | Menu bullet color in active menu items, hover. |
| `--navbar-background-color: var(--card-background-color)` | Top navbar background color. |
| `--navbar-link-color: var(--card-color)` | Top navbar link text color. |
| `--navbar-link-color-hover: var(--card-color)` | Top navbar link text color, hover. |
| `--navbar-box-shadow: var(--card-box-shadow)` | Top navbar box shadow. |
| `--navbar-dropdown-menu-box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45)` | Top navbar dropdown menu box shadow. |
| `--navbar-border-radius: var(--card-border-radius)` | Top navbar border radius. |
| `--table-header-color: var(--card-title-color)` | Table headers text color. |
| `--table-header-border-bottom: 1px solid #d9dee3` | Table headers bottom border. |
| `--table-row-border: 1px solid #f1f1f166` | Table row bottom border. |
| `--row-background-color-hover: rgba(67, 89, 113, 0.06)` | Table row background color, hover. |
| `--row-color-hover: var(--body-color)` | Table row text color, hover. |
| `--transaction-history-posting-positive: rgba(var(--bs-success-rgb), 1)` | Text color for transaction history positive items (e.g., + \$100) |
| `--transaction-history-posting-negative: rgba(var(--bs-warning-rgb), 1)` | Text color for transaction history negative items (e.g., - \$50) |
| `--button-color-default: #ffffff` | Button text color default. |
| `--button-primary-color: var(--button-color-default)` | |
| `--button-primary-color-hover: var(--button-color-default)` | |
| `--button-primary-background-color: var(--primary-color)` | |
| `--button-primary-background-color-hover: var(--primary-color)` | |
| `--button-primary-border-color: var(--button-primary-background-color)` | |
| `--button-primary-outline-color: var(--button-primary-background-color)` | |
| `--button-primary-outline-color-hover: var(--button-primary-color-hover)` | |
| `--button-primary-outline-background-color: var(--button-primary-color)` | |
| `--button-primary-outline-background-color-hover: var(--button-primary-background-color-hover)` | |
| `--button-primary-outline-border-color: var(--button-primary-background-color)` | |
| `--button-secondary-color: var(--button-color-default)` | |
| `--button-secondary-color-hover: var(--button-color-default)` | |
| `--button-secondary-background-color: var(--secondary-color)` | |
| `--button-secondary-background-color-hover: var(--secondary-color)` | |
| `--button-secondary-border-color: var(--button-secondary-background-color)` | |
| `--button-secondary-outline-color: var(--button-secondary-background-color)` | |
| `--button-secondary-outline-color-hover: var(--button-secondary-color)` | |
| `--button-secondary-outline-background-color: var(--button-secondary-color)` | |
| `--button-secondary-outline-background-color-hover: var(--button-secondary-background-color)` | |
| `--button-secondary-outline-border-color: var(--button-secondary-background-color)` | |
| `--button-dark-color: var(--button-color-default)` | |
| `--button-dark-color-hover: var(--button-color-default)` | |
| `--button-dark-background-color: var(--dark-color)` | |
| `--button-dark-background-color-hover: var(--dark-color)` | |
| `--button-dark-border-color: var(--button-dark-background-color)` | |
| `--button-dark-outline-color: var(--button-dark-background-color)` | |
| `--button-dark-outline-color-hover: var(--button-dark-color)` | |
| `--button-dark-outline-background-color: var(--transparent)` | |
| `--button-dark-outline-background-color-hover: var(--button-dark-background-color)` | |
| `--button-dark-outline-border-color: var(--button-dark-background-color)` | |
| `--button-danger-color: var(--button-color-default)` | |
| `--button-danger-color-hover: var(--button-color-default)` | |
| `--button-danger-background-color: var(--danger-color)` | |
| `--button-danger-background-color-hover: var(--danger-color-hover)` | |
| `--button-danger-border-color: var(--button-danger-background-color)` | |
| `--button-danger-outline-color: var(--button-danger-background-color)` | |
| `--button-danger-outline-color-hover: var(--button-danger-color-hover)` | |
| `--button-danger-outline-background-color: var(--button-danger-color)` | |
| `--button-danger-outline-background-color-hover: var(--button-danger-background-color-hover)` | |
| `--button-danger-outline-border-color: var(--button-danger-background-color)` | |
| `--input-color: var(--card-color)` | Input text color. |
| `--input-background-color: var(--card-background-color)` | Input background color. |
| `--input-border-color: #d9dee3` | Input border color. |
| `--input-border-color-focus: var(--primary-color)` | Input border color when focused. |
| `--input-group-button-color: var(--input-color)` | Buttons in input groups text color, e.g., API access URL on checkout pages. |
| `--input-group-button-background-color: var(--input-background-color)` | Buttons in input groups background color for, e.g., API access URL on checkout pages. |
| `--product-name-color: var(--card-title-color)` | Product name text color. |
| `--api-header-color: var(--card-title-color)` | API header text color. |
| `--api-icon-color: var(--api-header-color)` | API header icon color. |
| `--modal-content-background-color: var(--card-background-color)` | Modal windows background color. |
| `--login-form-bullets-background: ` | Bullets behind the login/registration/password reset forms. |
| `--text-muted-color: #a1acb8;` | Muted text color. |