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.

​

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