Design & appearance

Appearance and the site editor

Admin → Appearance shows your active design, the other ready-made designs and your pages. Edit site next to the active design (or Edit on its card) opens one editor:

Save draft saves the site settings and the page draft; Publish also makes the page live. The live preview window opens your real site in a new tab and shows unsaved appearance changes there.

Ready-made designs

Every panel ships with fifteen designs. See them all with live demos in the design gallery.

When applying a design you choose:

• Apply with home page: the design's home page is created and published (your current home draft is replaced).
• Colours and style only: your home page is left alone.

Colours and modes

• Main colour: buttons, links, highlights. 12 presets or any hex code.
• Second colour: the second stop of gradients and some accents. Leave it on Automatic to derive it from the main colour.
• Default mode: whether the site opens light or dark for visitors who haven't chosen. A visitor's own choice is remembered in their browser.
• Background, card and text colours: separately for light and dark mode. Empty fields are derived from the main colour. When you change the text colour, secondary text, borders and all grey tones are computed from it.

Button text colour is picked automatically: dark on light main colours such as lime or yellow, white otherwise.

Site menu

Menu layout:

Menu background: Solid (surface), Frosted glass (glass), Brand colour (brand), Dark (dark), Transparent (transparent). Automatic uses the design's default.

Language, currency & theme switchers: Separate icons (icons), Flags & codes (labels), Single capsule (segmented), One dropdown (combined, flag + "EN · USD") or Settings icon (menu). Under Show in the menu the light/dark switch, currency and language can each be hidden. On mobile every style except separate icons collapses into one settings button.

Footer

• Layout: Columns (columns: logo and text on the left, link groups in columns), Centred (centered), Single row (minimal: headings and text hidden, links side by side).
• Background: Solid (surface), Brand colour (brand), Dark (dark), Transparent (transparent). Text switches to a readable colour automatically.
• Footer text: the line under the logo (max 300 characters). Empty uses the default text of each language.
• Links: groups and links are added in Admin → Menus → Footer; the editor's "Edit footer links" button goes straight there.

Customer panel

• Sidebar: Plain, Frosted glass, Brand colour, Dark.
• Cards: Bordered, Shadow, Flat.

The customer panel's background, cards and text follow the colours from the Colours tab.

Custom CSS

Rules in Appearance → Custom CSS load on your site and customer panel and never in the admin (so a broken rule can't lock you out).

• Up to 50,000 characters.
• @import and <style> tags are stripped.
• Loaded after the theme CSS, so you can override the variables below.
• Try changes in the live preview window before saving.

/* Slightly darker brand tone on headings only */
.nx-h1, .nx-h2 { color: color-mix(in srgb, var(--brand-solid) 70%, var(--on-surface)); }

/* Rounder cards */
.nx-card { border-radius: 28px; }

/* Thin brand line under the menu, only in the Reseller Pro design */
html[data-design="pro"] .nx-header-bar { border-bottom: 2px solid var(--brand-solid) !important; }

/* Customer panel cards in dark mode */
html.dark .nx-dcard { background: #101418 !important; }

CSS variables

The theme defines these on :root (light) and html.dark (dark):

Radii by corner setting (px, lg/xl/2xl/3xl): Square 0/0/0/0, Slight 4/6/8/10, Medium 6/9/12/16, Round 8/12/16/24, Extra round 12/16/22/30.

HTML attributes

The <html> tag carries your choices, so CSS can target them:

Class names

Blocks and the site shell use stable nx-* classes:

Want full control? See Code theme to write the site entirely in your own code.