Styling the editor

You can match the editor to your brand at three levels: settings and Custom CSS in the Admin Portal (no code), your own CSS variables file passed when you open the editor, or CSS injected from your page. This page explains how the editor loads its styles and when to use which level.

TIP

Example: Modify styles from host · source

Choose a level

Level	Where	Good for
Admin Portal settings	Settings → Print editor → Customization	Fonts, colours, rounding, header height, icon style — for all your integrations
Admin Portal Custom CSS	Settings → Print editor → Custom CSS	Small CSS tweaks, such as hiding an element, without touching your site
ownCssVariablesUrl	DesignerOptions, per opening	A theme hosted and versioned on your side
CSS injected from your page	Your JavaScript	Styles that depend on the page or session

Start with the Admin Portal; use code only for what the settings can't do.

How the editor loads its styles

The editor renders inside the shadow DOM of the <trondesigner-editor> element (an open shadow root). When it opens, it adds these stylesheets to its shadow root, loaded from your data-td-api URL:

Stylesheet	Contents	Replace with
resources/trondesigner-styles.css	The editor's base styles followed by your Admin Portal Custom CSS	ownCss: true (skips it)
resources/trondesigner-variables.css	CSS variables filled in from your Admin Portal Customization settings	ownCssVariablesUrl
resources/trondesigner-icons.css	The icon classes for the selected icon style	—

Because of the shadow DOM:

• Your page's CSS doesn't reach the editor. Page selectors don't match elements inside the shadow root, and the editor resets inherited properties (:host { all: initial }), so your fonts and colours don't leak in.
• Editor CSS doesn't leak out into your page.
• CSS that styles the editor must be inside its shadow root — which is what Admin Portal Custom CSS and injected styles do.

The editor waits until all stylesheets have loaded before it shows the design. If one of them can't be loaded, the editor stays empty — in dialog mode the customer sees only the dark overlay and has to reload the page.

To see the variables with your current values, open the browser developer tools on a page with the editor and look at the trondesigner-variables.css request in the Network tab, or at the <link> elements inside the <trondesigner-editor> shadow root.

Configure the editor in the Admin Portal

In the Admin Portal, Settings → Print editor:

• Customization — Global Settings (font family, icons type Fill / Outline / Dual Tone, font size, rounding), Colors Settings (message colours, primary and secondary buttons, switch buttons, window/modal box header, content, tabs and scrollbar, control panel buttons and icons), Layout Settings (window header height, control panel icon size) and Editor Buttons (see Custom editor buttons). These settings feed trondesigner-variables.css and the icon style.

• Custom CSS — CSS appended to the editor's stylesheet, so it applies inside the shadow root and can target the editor's elements directly. Up to 2,000 characters; the Admin Portal rejects CSS it can't parse, such as unbalanced braces. For example, to hide the secondary footer buttons:

  #TDMainFooterControls button.btn-secondary {
    display: none;
  }

• Custom Translations — the editor's texts.

The settings can be stored globally or for a specific API key. For a description of every setting, see the TronDesigner section of the PromoTron support site.

Use your own CSS variables file

Pass ownCssVariablesUrl in DesignerOptions. The editor loads your file instead of trondesigner-variables.css:

window.tronDesigner
  .setExactProduct('PFC', undefined, (product) => product.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({
    mode: 'dialog',
    ownCssVariablesUrl: 'https://shop.example.com/css/trondesigner-theme.css',
  });

/* trondesigner-theme.css — start from a copy of the served trondesigner-variables.css */
:host {
  --clr-submit-bg: 0, 102, 204;      /* primary buttons */
  --clr-submit-bg-light: 230, 240, 250;
  --font-family: 'Open Sans', Arial, sans-serif;
  /* …all other variables… */
}

• The file replaces the generated one completely, so your Admin Portal Customization colours, font and layout values no longer apply, and every variable the editor uses must be in your file — including the responsive ones defined per breakpoint. Copy the served trondesigner-variables.css (see above) and change the values.
• Declare the variables on :host — the file is loaded inside the shadow root.
• Colours are R, G, B triplets without rgb(): the stylesheet uses them as rgba(var(--clr-submit-bg)) or rgba(var(--clr-submit-bg), 0.75).
• Host the file where the customer's browser can load it. If it fails to load, the editor doesn't open (see above).
• The option is only available from JavaScript (openDesigner / open), not from data attributes.

Main CSS variables

Group	Variables	Admin Portal setting
Buttons	--clr-submit-bg, --clr-submit-bg-light, --clr-swt-bg, --clr-submit-text	Primary, Secondary, Switch buttons (--clr-submit-text is fixed)
Messages	--clr-success, --clr-info, --clr-warning, --clr-error	Message colours
Window and dialogs	--clr-topbar, --clr-tab-active, --clr-tab-sec, --clr-scroll, --clr-scroll-bg, --clr-modal-bg	Header, Content, Tabs, Scrollbar, Scrollbar background (--clr-modal-bg is fixed)
Control panel	--clr-ico-btn, --clr-ico, --ico-size	Buttons, Icons colour, Control panel icons (size in px)
Neutral colours	--clr-black, --clr-white, --clr-blend, --clr-blend-light, --clr-brd, --clr-brd-light, --clr-brd-dark	—
Typography	--font-family, --font-sm (base size), --font-md, --font-lg, --font-xlg (2×, 2.5×, 3× the base)	Font family, Font size
Shape and spacing	--brd-rad-sm (+ -md, -lg), --mrg-sm (+ -md, -lg, -xlg), --brd-wdt-sm (+ -md, -lg)	Rounding
Layout	--top-hg, --ftr-hg, --main-tabs-hg, --inputs-hg, --cols-* / --rows-* grid templates	Window header height; the rest is set per breakpoint (above 1600, 1600, 1200, 1024, 768 and 480 px window width)

Skip the default stylesheet (ownCss)

ownCss: true in DesignerOptions stops the editor from loading trondesigner-styles.css — the base styles and your Admin Portal Custom CSS. The variables and icon stylesheets still load. Nothing else supplies the missing styles, so the editor is unstyled unless you inject a complete replacement stylesheet into its shadow root yourself (see below). Most integrations don't need this option; prefer Custom CSS or injected overrides.

Inject CSS from your page

The shadow root is open, so your page can add a <style> element to it. The script creates a new <trondesigner-editor> element every time the editor opens, so watch for it:

function injectEditorStyle(editor) {
  const root = editor.shadowRoot;
  if (!root || root.querySelector('style[data-host-style]')) return;

  const style = document.createElement('style');
  style.dataset.hostStyle = '1';
  style.textContent = `
    #TDMainFooterControls button.btn-secondary { display: none !important; }
  `;
  root.appendChild(style);
}

new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (!(node instanceof Element)) return;
      if (node.matches('trondesigner-editor')) injectEditorStyle(node);
      node.querySelectorAll('trondesigner-editor').forEach(injectEditorStyle);
    });
  });
}).observe(document.documentElement, { childList: true, subtree: true });

• Your <style> is added when the element appears; the editor adds its own stylesheets later, and later rules win at equal specificity. Use !important or more specific selectors.
• The editor exposes no ::part() hooks; you style its internal elements directly.
• If the same CSS is right for every page, put it in the Admin Portal Custom CSS instead — no script needed.

Keep your customizations working

The editor's element IDs, class names and CSS variable names (such as #TDMainFooterControls, .btn-secondary, --clr-submit-bg) are internal to the editor, not a versioned API. They can change when TronDesigner is updated without an entry in the Changelog. Keep overrides few and targeted, prefer the Admin Portal settings, and re-check your customizations after TronDesigner releases.

See also

• DesignerOptions — API reference
• Dialog and inline display
• Custom editor buttons
• Debugging and error handling