Styling

General

You can use free-form CSS to completely change the look of your user portal. Navigate to the Settings page of your user portal

To override CSS variables, use :root pseudo-element.

:root {
    --body-background-color: #999999;
}

See the full list of supported CSS variables below.

Be aware that the user portal CSS overrides checkout page themes.

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.

.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-<hash> to each checkout page.

In order to change the button text for a certain checkout page, use the following CSS:

.checkout-public.checkout-link-<hash> .subscribe-button span {
    display: none;
}

.checkout-public.checkout-link-<hash> .subscribe-button::after {
    content: 'Buy credits';
}

Replace <hash> 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.

.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. Try applying it to your user portal to see how it works.

: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 `<li>` element in the menu.
`--menu-item-background-color-hover: var(--card-background-color)`	Background color of `<li>` 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 `<li>` element in the menu.
`--menu-item-active-background-color-hover: var(--card-background-color)`	Background color of active `<li>` 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.

Overview

API

Products

Prices

Payment integration

User portal

Subscriptions

Analytics

Other

General

Change button text for all checkout pages

Change button text for certain pages

Change card title

Example CSS

Demo portal theme

Variables

Overview

API

Products

Prices

Payment integration

User portal

Subscriptions

Analytics

Other

​General

​«Subscribe» button

​Change button text for all checkout pages

​Change button text for certain pages

​Change card title

​Example CSS

​Demo portal theme

​Variables

General

«Subscribe» button

Change button text for all checkout pages

Change button text for certain pages

Change card title

Example CSS

Demo portal theme

Variables