Brand Settings & Themes

Brand Settings controls how pages built with NitroShock's own design framework look: a design style, colors, backgrounds, fonts and layout. Open it from NitroShock → Brand Settings. When builder pages use your theme's or an imported design's own CSS, most of Brand Settings does not apply; see Design Mode below.

Design Mode

The Design mode card at the top decides whether Brand Settings is used at all:

• NitroShock framework - builder pages use NitroShock's components with the chosen design style and your brand settings.
• Site styles - builder pages use only your site's own CSS, from your theme or an imported design, so nothing conflicts. The tabs Brand Settings skips in this mode are marked not used.

NitroShock sets the mode for you: NitroShock framework when it builds a site, Site styles when you import a header and footer. If you change it here, your choice is kept from then on. In either mode the rest of your site is never restyled.

In Site styles mode the card also shows whether Site assets has been set up, with a Set up Site assets button that takes you there.

Library components on any theme. In Site styles mode, components from the NitroShock library keep their layout, buttons and colors on any theme. A small component layer loads on builder pages and in every preview; it styles only NitroShock's own component classes, with values taken from your theme's styles, and leaves your theme's typography alone.

Style

Choose Your Design Style offers nine styles in three groups: Professional (Dark Tech, Minimal Professional, Editorial Classic), Modern (Soft Shadows, Glass Morphism, Interactive Modern, Gradient Flow) and Fun (Rounded & Friendly, Bold & Vibrant). Picking one fills in its colors and a matching pair of fonts, which you can then adjust. The eye button on each card previews it. Nothing changes on your site until you click Save.

Colors

Start from one of the ready-made palettes, which apply and save in one click, or set the ten colors yourself: Primary, Secondary, Accent, Text, Muted Text, Background, Surface, Link, Highlight and Heading. Preview palettes on your site lets you try palettes on one of your pages first.

Each color becomes a CSS variable named after it, such as --color-primary, --color-text-muted or --color-surface. Use the variables in your own CSS and the colors follow any later change in Brand Settings:

/* A button and card that follow your brand colors */
.my-button {
  background-color: var(--color-primary);
  color: var(--color-background);
}
.my-card {
  background: var(--color-surface);
  color: var(--color-text);
}

Backgrounds

Set a Page Background and a fill for Section Bands / Hero from preset fills (solid, gradients and similar) or your own image, with an angle, an image overlay and an optional slow drift animation. Background changes save as soon as you pick them.

Typography

Body Font, Body Font Size, Heading Font, Line Height, and a size and color for each heading level from H1 to H6. Fonts are loaded from Google Fonts.

Where fonts apply. With the NitroShock theme, the body and heading fonts apply to the whole site. With any other theme they load on pages built with NitroShock only, and your theme keeps its own fonts everywhere else; tick Apply brand fonts to the whole site to use them on every page. A font your theme already loads, or one listed under External assets, is not requested twice.

Layout and Advanced

• Layout - Content Width, Content Padding, Button Padding and Border Radius.
• Advanced - HTML Output Format (Minified, Beautified or No Changes), CSS Custom Properties, where any CSS you add is included with your brand styles, and Site assets (below).

Click Save at the top to store your changes. The button shows Saving... while it works, then Saved!, or Error - Try Again if the save failed. The Test Preview button opens a preview that updates as you change colors.

Site Assets

On a theme other than the NitroShock theme, the page editor and the previews need your theme's styles to show components the way they will look on your site. Advanced → Site assets sets that up.

• Rescan reads your front page and lists what your theme and plugins load: stylesheets, scripts, and the style blocks the theme prints into the page, such as Customizer colors and Additional CSS. Stylesheets a theme adds from a script are found too. Each item has a checkbox.
• Ticked items load in the page editor, Component Studio and Component Library previews. Scripts load in the Studio and Library previews only. Published pages already load them through your theme.
• Ticked style blocks are re-read from the front page once an hour, so a Customizer color change reaches the previews without a rescan. Rescan after updating or switching the theme.
• External assets - one URL or link/script tag per line, for a stylesheet or script you want in the previews and on published builder pages (stylesheets in the head, scripts at the end of the page). Only http and https URLs are kept. Administrators only.
• Preview CSS - plain CSS for the previews only, never printed on the site. Use it for styles the scan cannot see, such as CSS a theme builds from its own settings or rules that only load after a visitor interacts with the page.

Where Brand Settings Shows

In NitroShock framework mode, the design style, colors and fills are applied on pages you build with NitroShock, on the page builder canvas, and in the Component Studio and Component Library previews. They are not added to your other pages; the fonts follow the Where fonts apply setting above.

The AI Assistant receives your brand colors and is told to use the color variables rather than fixed values, so components it writes follow later changes. Modernize does the same, writing each color as a variable with a fallback, such as var(--color-primary, #2563eb).

FAQ

Will my existing pages change when I update Brand Settings?

Yes, wherever they use the color variables, the design style or the brand fonts. Colors written as fixed values in a page's own CSS stay as they are.

Can one page use different colors?

Brand Settings is site-wide. For a single page, override the variables in that page's CSS tab in the builder.

Why don't my changes show on my site?

In Site styles mode Brand Settings is deliberately skipped so it does not fight your theme's or imported design's stylesheet; the skipped tabs are marked not used. Edit your site's CSS instead, or switch Design mode to NitroShock framework if you want NitroShock's styling.

Related Documentation

• Component Studio Guide
• AI Chat Assistant
• Page Builder Overview