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!

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: