Customizing widgets

You can customize your widgets’ colors from within RightMessage to match your brand / site, but we know you sometimes want to get extra creative and customize more aspects of the widget’s design than just colors!

Example of a custom styled RightMessage widget

Sometimes when you try to do this, you hit a roadblock: all the CSS used in the widgets is marked as !important. So, how can you override it?

Why are there “!important”s everywhere?

Those !importants are part of a technique called CSS resetting. We use it in RightMessage widgets to make sure your widget layouts don’t get messed up inadvertently by other unrelated CSS on your site.

This is what keeps your widgets looking pixel-perfect.

OK, so how do I override the default CSS styling?

Our use of this CSS reset technique means that you can still override any of the default CSS you like… you just have to make sure to stick to two golden rules in all your own CSS that targets RightMessage widgets:

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 */


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 */

Targeting 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:

.rm-bar to target all bar widgets on the page
.rm-toaster to target all toaster on the page
.rm-modal to target all popup (modal) widgets on the page
.rm-takeover to target all full-screen takeover widgets on the page
.rm-widget to target all widgets on the page, no matter which type
.rm-wdg_xxxxxxxx to target one specific widget
Determining a widget's ID

To target a specific widget, you’re going to need to know its ID.

Swap the wdg_xxxxxxxx for the ID of the widget you want to target. You can find this in the URL bar in RightMessage when you’re editing the widget. It’s always wdg_ followed by 8 letters or numbers.

Next up

Manually triggering widgets

As well as automatic triggers (exit intent, scrolling, on page load, etc.), you can also have your popups or other widgets appear when a visitor to your site clicks a certain button or link.