Customizing a widget's design using CSS


You can customize your widgets' colors from within the RightMessage app 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!

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

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

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. 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.


Follow those two rules and you can customize your widgets' CSS to your heart's content!

Still need help? Contact Us Contact Us