Customize widget CSS
You'll find the widget CSS editor, its selector aliases, the scoping rules that keep custom styles on one widget, and how to style an Unstyled widget from your site.
Use Custom CSS to change parts of your widget that the built-in design controls don't cover. You'll need project edit access and familiarity with CSS selectors and how the browser applies competing styles. If you'd rather style the whole widget from your website's own stylesheet, use the Unstyled theme instead.
Find the CSS editor
Open your widget from Widgets, select Design, then expand Advanced. Add your rules in Custom CSS, with a selector that limits each rule to the intended widget.
Selector aliases
The editor has these selector chips:
| If you'd like to style… | Alias |
|---|---|
| The widget container | .widget |
| The visible step's headline | .title |
| The visible step's description | .description |
| The main step content | .container |
| Question answer buttons and the Next button in an input question | .answerButton |
| The button inside an offer or form | .submitButton |
| Form inputs, but not every composite question control | .inputField |
For a single headline adjustment, you can use the editor's alias:
RightMessage translates supported aliases into widget selectors. It doesn't automatically isolate arbitrary CSS from the rest of your page.
Limits of selector aliases
The current runtime replaces only the first occurrence of each alias. If you repeat .title in another rule or a media query, the later occurrence won't reliably stay scoped to the widget. The .answerButton alias also expands to a selector list whose second selector lacks the same widget prefix.
Use the built-in controls where you can. For larger stylesheets or rules affecting several widgets, don't rely on aliases to isolate them. Add the intended widget's scope to every selector and check the page. These limits don't require you to change your site's global CSS.
Keep styles on one widget
Your widget ID appears in its editor URL and in the manual trigger instructions. RightMessage adds a class with rm- followed by that ID. Widgets that use any theme except Unstyled sit inside an element with the rm-c class.
For the example widget ID wdg_12345678, this rule changes only its headline:
Replace the example ID with your own. In a comma-separated selector list, repeat the prefix on every selector. A prefix on the first selector doesn't scope the rest.
Avoid bare rules such as button { ... } or input { ... }, which can change unrelated website controls. To hide a required field or change validation, use the form settings instead of CSS.
A duplicated widget gets a new ID. Review any copied CSS that names the original ID. Raw runtime classes depend on the rendered markup more than the built-in controls do, so check them again after design changes.
Style an Unstyled widget with your own CSS
A widget that uses the Unstyled theme gets no RightMessage colors, fonts, or spacing, and its Design tab has no Custom CSS. Style it from your website's stylesheet instead, the same way you style the rest of your pages.
- Open the widget's Design tab. Styled by your site lists the classes you can target.
- Choose Copy reference stylesheet, paste it into your site's CSS, and change its colors, fonts, and sizes.
- Check the widget in the editor's preview, which shows it on your own pages with your CSS.
Every rule in the reference stylesheet starts at the widget's root, .rm-unstyled, or at its backdrop, .rm-lightbox. So it styles every Unstyled widget on the page and leaves the rest of your page alone. To style one widget, add its ID class to the root:
States are attributes or classes you can select, such as [aria-pressed='true'] on a selected answer, [aria-invalid='true'] on a field with an error, and .rm-success on the widget after a successful submit. Unstyled widgets sit inside an element with the rm-u class rather than rm-c, so rules written for the other themes don't reach them.
RightMessage's own defaults for Unstyled widgets are minimal, and any selector of yours overrides them. A few layout rules that keep steps and the backdrop working load after your stylesheet. To change one of those, use a more specific selector. The design reference lists which settings still apply with this theme.
Check the styles on your website
CSS edits can update the editor preview without rebuilding the whole flow. Your website can have other stylesheets that change how the widget looks.
Check the full-size widget on desktop and phone, in light and dark modes. Then use Preview on your site to try it with your website's actual fonts, headers, and CSS. The debugger shows what RightMessage is displaying while you check the page. Publish your changes when the complete project draft is ready.
If the widget is clipped, hidden, or in the wrong position, use widget troubleshooting on the affected page. Adding a large z-index or !important everywhere can hide the cause instead of fixing it.