Customizing widgets

Any RightMessage widget can be fully customized using CSS.

How custom CSS works with RightMessage

When editing any widget in RightMessage, you’ll find a textarea where you can enter arbitrary CSS code.

RightMessage will interpolate whatever you enter into this textarea and add it directly to your widget’s stylesheet.

It’s important to note that the CSS styles you add to a widget are accessible to the entire webpage – this means that what you enter can “spill over” and possibly affect other content on your website.

To mitigate this, we recommend that you follow the best-practices we’ve outlined below.

The elements of a widget you’re able to target

We’ve created a few helper CSS classes that you’re able to use.

At runtime, we’ll convert these helper classes into scoped elements that will only target the widget you’re editing. This means that if you’re managing a handful of distinct RightMessage widgets across your website, you won’t need to worry about accidentally affecting any of those when you use our helper classes.

.widget {
 // this is the top-level widget itself, i.e. the
 // element that has the dropshadow (for "toaster" widgets)
}

.container {
 // this is the container that all elements of a widget are
 // rendered within. If you wanted to affect padding, target
 // this element.
}

.title {
  // this is the question text, or the headline for an offer
  // or form
}

.description {
  // this is the text underneath the headline within an offer
  // or form
}

.answerButton {
  // this are the buttons for submitting an answer to a
  // question
}

.formField {
  // this is the container that wraps each form field
  // within an offer form
}

.formInput {
  // this is the form input fields
}

.submitButton {
  // this is the button element that submits an offer or form
}

In order to ensure that all styles you enter are honored, RightMessage automatically adds !important to your inputted style definitions. This means that the styles you enter here should always take precedence, despite the RightMessage theme you’re using or any of your website’s existing styles.

Changing RightMessage’s styling from outside of RightMessage

Sometimes you might want to override RightMessage’s styling from outside of RightMessage. Here’s how you’d do that:

Golden rule 1: use !important

Add !important to each of your CSS declarations.

For example, instead of text-align: left; use text-align: left !important;

Golden rule 2: use selector prefixes

Include a specific selector for which type of widget you want to target, as a prefix for your CSS selectors. For example, if you want to target the title of the widget, instead of using

div.rm-title {
    /* your CSS declarations here */
}

use:

div.rm-widget.rm-inline div.rm-title {
    /* your CSS declarations here */
}

If you want to target the widget element itself, rather than specific elements within a widget (like the title), just use the prefix part on its own, e.g.:

div.rm-widget.rm-inline {
    /* your CSS declarations here */
}

And if you want to target the widget and everything inside it (useful for e.g. setting the font family for the entire widget), use:

div.rm-widget.rm-inline, div.rm-widget.rm-inline * {
    /* your CSS declarations here */
}

Target different widget types

All of the examples so far would target all embedded (inline) widgets on the page. But you can instead swap the .rm-inline part for: