Contents

Widget CSS Classes

Attach your own CSS class names to the widget's outermost element so your site's stylesheet can style the embed.

Where to find it
Labelled CSS Classes in the Widget Settings drawer (gear in the widget header).
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

Same idea as column or row CSS Classes, but for the widget as a whole. RuleCMS puts the class names on the widget's outermost element and forms no opinion about what they mean — your site's stylesheet does the rest.

A class-only widget (no other widget settings that need a wrapper) will emit that outermost element solely to carry the class. Clearing the classes removes the wrapper again when nothing else needs it.

When you would use it

  • You want the embed to pick up an existing host class such as "hero" or "section".
  • Your design system already styles the widget container and you want RuleCMS to plug into it.

How to change it

  1. Open Widget Settings from the gear, then "CSS Classes".
  2. Type a space-separated list of class names.
  3. Use "Same classes for all resolutions" when every device should share the list, or set phone, tablet, and desktop separately.
  4. Check the published page (or a real host preview) — the composer canvas will not show the host styles.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Nothing changes in the composer. The composer does not load your site's stylesheet.
  • RuleCMS does not check the class exists. A typo fails silently, exactly as it would in hand-written HTML.
  • The legacy Container Styles dialog still offers raw CSS on the same container. Structured widget settings win where both set the same property.

Related settings

Where to go next