Contents

Collection CSS Classes

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

Where to find it
Labelled CSS Classes in the Collection Settings drawer (gear in the collection 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 collection as a whole. RuleCMS puts the class names on the collection's outermost element and forms no opinion about what they mean — your site's stylesheet does the rest.

A class-only collection (no other collection 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 collection to pick up an existing parent class such as "hero" or "section".
  • Your design system already styles the collection container and you want RuleCMS to plug into it.

How to change it

  1. Open Collection 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.
  • When the collection is used inside a widget, structured collection settings apply to the collection box; widget settings still apply to the outer widget.

Related settings

Where to go next