How to Style the Success Message Overlay

Are you looking to customize the appearance of the success message? It’s easy with our success themes! Use this doc for reference on changing the success message overlay.


Display Standard Success Theme

Open your campaign to edit in the campaign Builder, then navigate to the Success panel. Select 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

Don’t forget! You can also edit the text for your Success Message just like any other text field for your campaign. 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 campaign 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: This guide assumes you’re already familiar with our Custom CSS tool. As with any example CSS provided in our documentation, be sure you update the CSS selectors to use your own campaign’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 campaign!

Want to automatically show the success theme to visitors who have already subscribed? See our guide on how to use OptinMonster’s Smart Success feature.