​
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.

​
«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.

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

​
Variables

The simplest way to change the look of your user portal is to change values of these variables.

NameDescriptionDefault value
—primary-color-rgbRGB code for primary color.100 67 118
—primary-colorrgb(var(—primary-color-rgb) / 1)
—primary-color-hover-rgbRGB code for primary color, hover.176 120 206
—primary-color-hoverrgba(var(—primary-color-hover-rgb))
—secondary-color-rgbRGB code for secondary color.120 131 147
—secondary-colorrgb(var(—secondary-color-rgb) / 1)
—dark-color-rgbRGB code for dark color.32 47 63
—dark-colorrgb(var(—dark-color-rgb) / 1)
—danger-color-rgbRGB code for danger color.255 62 29
—danger-colorrgb(var(—danger-color-rgb) / 1)
—danger-color-hoverRGB code for danger color, hover.#e6381a
—body-background-colorBody background color, see also: —card-background-color.var(—bs-body-bg)
—body-colorBody text color, see also: —card-color.var(—bs-body-color)
—body-font-familyvar(—bs-body-font-family)
—body-font-sizevar(—bs-body-font-size)
—body-font-weightvar(—bs-body-font-weight)
—link-colorDefault link color.var(—primary-color)
—link-color-hoverDefault link color, hover.var(—primary-color-hover)
—heading-colorDefault color for headers (h1, h2, …).var(—body-color)
—card-background-colorBackground color for cards.#ffffff
—card-colorText color for cards.var(—body-color)
—card-emphasis-colorPricing summary on the pricing card on subscription page.#000000
—card-margin0 0 1rem 0
—card-box-shadowBox shadow parameter for cards.0 2px 6px 0 rgba(67, 89, 113, 0.12)
—card-border-radiusBorder radius for cards.0.5rem
—card-header-border-bottomThe border under card headers.1px solid #f1f1f1
—card-header-margin0 0 1.5rem 0
—card-title-colorText color of card titles/headers.#566a7f
—menu-background-colorBackground color for the menu.var(—card-background-color)
—menu-colorMenu text color.var(—card-color)
—menu-app-brand-logo-urlURL for the brand logo. Nadles logo by default.url(‘/assets/images/logo_noemboss.svg’)
—menu-app-brand-name-contentText after the logo. API provider name by default.attr(data-provider-name)
—menu-app-brand-link-colorLogo link text color, when the logo is clickable.rgb(63, 57, 90)
—menu-app-brand-link-color-hoverLogo link text color, when the logo is clickable, hover.var(—menu-app-brand-link-color)
—menu-header-colorText color of menu header — customer name right under the logo in the menu.#a1acb8
—menu-item-colorText color of inactive non-link menu item.var(—card-color)
—menu-item-color-hoverText color of inactive non-link menu item, hover.var(—card-color)
—menu-item-background-colorBackground color of <li> element in the menu.var(—card-background-color)
—menu-item-background-color-hoverBackground color of <li> element in the menu, hover.var(—card-background-color)
—menu-item-link-colorText color of links in menu items.var(—menu-item-color)
—menu-item-link-color-hoverText color of links in menu items, hover.var(—menu-item-color-hover)
—menu-item-link-background-colorBackground color of links in menu items.var(—menu-item-background-color)
—menu-item-link-background-color-hoverBackground color of links in menu items, hover.rgba(67, 89, 113, 0.04)
—menu-item-active-colorText color in active menu items, non-link.var(—link-color)
—menu-item-active-color-hoverText color in active menu items, non-link, hover.var(—link-color-hover)
—menu-item-active-background-colorBackground color of active <li> element in the menu.var(—card-background-color)
—menu-item-active-background-color-hoverBackground color of active <li> element in the menu, hover.var(—card-background-color)
—menu-item-active-link-colorText color of links in active menu items.var(—menu-item-active-color)
—menu-item-active-link-color-hoverText color of links in active menu items, hover.var(—menu-item-active-color-hover)
—menu-item-active-link-background-colorBackground color of links in active menu items.rgba(105, 108, 255, 0.16)
—menu-item-active-link-background-color-hoverBackground color of links in active menu items, hover.rgba(105, 108, 255, 0.16)
—menu-item-icon-colorMenu icons text color.var(—link-color)
—menu-item-icon-color-hoverMenu icons text color, hover.var(—link-color-hover)
—menu-item-active-icon-colorMenu icons text color in active menu items.var(—link-color)
—menu-item-active-icon-color-hoverMenu icons text color in active menu items, hover.var(—link-color-hover)
—menu-item-bullet-colorMenu bullet color in active menu items.var(—primary-color)
—menu-item-bullet-color-hoverMenu bullet color in active menu items, hover.var(—primary-color)
—navbar-background-colorTop navbar background color.var(—card-background-color)
—navbar-link-colorTop navbar link text color.var(—card-color)
—navbar-link-color-hoverTop navbar link text color, hover.var(—card-color)
—navbar-box-shadowTop navbar box shadow.var(—card-box-shadow)
—navbar-dropdown-menu-box-shadowTop navbar dropdown menu box shadow.0 0.25rem 1rem rgba(161, 172, 184, 0.45)
—navbar-border-radiusTop navbar border radius.var(—card-border-radius)
—table-header-colorTable headers text color.var(—card-title-color)
—table-header-border-bottomTable headers bottom border.1px solid #d9dee3
—table-row-borderTable row bottom border.1px solid #f1f1f166
—row-background-color-hoverTable row background color, hover.rgba(67, 89, 113, 0.06)
—row-color-hoverTable row text color, hover.var(—body-color)
—transaction-history-posting-positiveText color for transaction history positive items (e.g., + $100)rgba(var(—bs-success-rgb), 1)
—transaction-history-posting-negativeText color for transaction history negative items (e.g., - $50)rgba(var(—bs-warning-rgb), 1)
—button-color-defaultButton text color default.#ffffff
—button-primary-colorvar(—button-color-default)
—button-primary-color-hovervar(—button-color-default)
—button-primary-background-colorvar(—primary-color)
—button-primary-background-color-hovervar(—primary-color)
—button-primary-border-colorvar(—button-primary-background-color)
—button-primary-outline-colorvar(—button-primary-background-color)
—button-primary-outline-color-hovervar(—button-primary-color-hover)
—button-primary-outline-background-colorvar(—button-primary-color)
—button-primary-outline-background-color-hovervar(—button-primary-background-color-hover)
—button-primary-outline-border-colorvar(—button-primary-background-color)
—button-secondary-colorvar(—button-color-default)
—button-secondary-color-hovervar(—button-color-default)
—button-secondary-background-colorvar(—secondary-color)
—button-secondary-background-color-hovervar(—secondary-color)
—button-secondary-border-colorvar(—button-secondary-background-color)
—button-secondary-outline-colorvar(—button-secondary-background-color)
—button-secondary-outline-color-hovervar(—button-secondary-color)
—button-secondary-outline-background-colorvar(—button-secondary-color)
—button-secondary-outline-background-color-hovervar(—button-secondary-background-color)
—button-secondary-outline-border-colorvar(—button-secondary-background-color)
—button-dark-colorvar(—button-color-default)
—button-dark-color-hovervar(—button-color-default)
—button-dark-background-colorvar(—dark-color)
—button-dark-background-color-hovervar(—dark-color)
—button-dark-border-colorvar(—button-dark-background-color)
—button-dark-outline-colorvar(—button-dark-background-color)
—button-dark-outline-color-hovervar(—button-dark-color)
—button-dark-outline-background-colorvar(—transparent)
—button-dark-outline-background-color-hovervar(—button-dark-background-color)
—button-dark-outline-border-colorvar(—button-dark-background-color)
—button-danger-colorvar(—button-color-default)
—button-danger-color-hovervar(—button-color-default)
—button-danger-background-colorvar(—danger-color)
—button-danger-background-color-hovervar(—danger-color-hover)
—button-danger-border-colorvar(—button-danger-background-color)
—button-danger-outline-colorvar(—button-danger-background-color)
—button-danger-outline-color-hovervar(—button-danger-color-hover)
—button-danger-outline-background-colorvar(—button-danger-color)
—button-danger-outline-background-color-hovervar(—button-danger-background-color-hover)
—button-danger-outline-border-colorvar(—button-danger-background-color)
—input-colorInput text color.var(—card-color)
—input-background-colorInput background color.var(—card-background-color)
—input-border-colorInput border color.#d9dee3
—input-border-color-focusInput border color when focused.var(—primary-color)
—input-group-button-colorButtons in input groups text color, e.g., API access URL on checkout pages.var(—input-color)
—input-group-button-background-colorButtons in input groups background color for, e.g., API access URL on checkout pages.var(—input-background-color)
—product-name-colorProduct name text color.var(—card-title-color)
—api-header-colorAPI header text color.var(—card-title-color)
—api-icon-colorAPI header icon color.var(—api-header-color)
—modal-content-background-colorModal windows background color.var(—card-background-color)
—login-form-bullets-backgroundBullets behind the login/registration/password reset forms.
—text-muted-colorMuted text color.#a1acb8;
Activate user portalCustom domain