> For the complete documentation index, see [llms.txt](https://developers.discountninja.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.discountninja.io/discount-ninja-developer-hub/storefront-api/widgets/guiding-principles/style.md). # Style ## Web components The widgets are implemented as [custom web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). ## 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://developers.discountninja.io/discount-ninja-developer-hub/storefront-api/widgets/guiding-principles/style.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.