How to Style the Success Message Overlay

The appearance of OptinMonster optins is completely customizable, and the Success Message overlay is no exception.

Open your optin to edit in the optin builder, then navigate to the Success panel. If you’ve selected Display a success theme from the Success Action dropdown you’ll find the following Design Fields available in the Success panel:

Success Message Design Fields

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.

Don’t forget! You can also edit the text for your Success Message just like any other text field for your optin. Direct-select the text to change it, and you’ll also see the usual text edit toolbar appear to easily changes text styles like the font, color, alignment and more!

Success Message Text Edit Toolbar


Success Background Color

You can quickly change the background color of the Success Message Overlay using the Success Background Color option. Select the field to open a color-picker, choose the color you want to use and the optin preview will immediately display your choice.

Success Message Overlay Background Color


Styling the Success Message with CSS

You can also use Custom CSS to further style the appearance of your Success Message overlay. You might find this particularly useful if you want to use a background image or add a border.

Important: As with any example CSS provided in our documentation, be sure you update the CSS selectors to use your own optin’s unique slug and namespace. For more details see our documentation on using the Custom CSS Tool.
Add a Background-Image
html div#om-jk2jfc9zdulyv598 #tortuga-success-content {
    background-image: url('http://example.com/image.jpg');
    background-size: cover;
}

Success Message Overlay Background Image

Add a Border
html div#om-jk2jfc9zdulyv598 #tortuga-success-content {
    border: 5px solid orange;
}

Success Message Overlay Border

That’s it, you’ve successfully customized the Success Message overlay for your optin!