Style

Web components

The widgets are implemented as custom web components.

Style encapsulation

The widgets use the shadow DOM to achieve encapsulation from JavaScript and CSS. This ensures the widgets can be styled reliably and page styles cannot affect the style of the widget. It also means that the CSS present in the widgets cannot affect the page style.

The implication of this is that you cannot change or override the style of the widgets using CSS that is added to the page. Instead you have to edit the style using the app.

Editing style

To change the style of the widget:

• open Discount Ninja

• in the menu, find Settings, then Style

• edit the relevant preset(s)

Presets

A preset bundles style settings for a set of widgets. The same preset can be configured to apply to all promotions or only to selected promotions.

Discount Ninja includes a rich editor experience that allows you to edit style settings (font, border, background color, spacing, size...) for all of the widgets included in the app.

Advanced settings

If you want to change advanced CSS settings, you can add custom CSS to the style preset. Each widget has a separate section where custom CSS can be added.