Don't have a loyalty app? Get Rivo →

Customizing the Design of your Opt-in Popup with CSS

Use custom CSS to take your popup to the next level

Don't have the Custom CSS feature yet? Send our team a message in the app and we'll get it added for you!

In this article
What can I do with the Custom CSS feature?
Useful selectors and properties
Custom themes
Common questions

What can I do with the Custom CSS feature?

Using custom CSS you can change the style of just about anything on the Opt-in Popup. You can customize the popup's padding, background, texts, and lots more! In the section below we've added a list of some of the selectors you can use to change the Popup's style and below that we've even got some ready-to-go, pre-made CSS themes you can copy and paste into the Custom CSS box to really make your Popup...well, pop!

If you're not familiar with using CSS yet, we recommend diving into some fundamentals. Google offers a free resource on learning CSS as well as W3 Schools. In these courses you'll learn specific modules associated with each topic. You definitely don't need to be an expert to get going with it, but we recommend these websites if you did want to delve into some of the basics and you're not already familiar with CSS.

💡 Pop Tip:  You can use a browser's developer tools to apply changes to the popup in your browser to test your ideas before you apply them in the app. Here's a tutorial on how to do that with Google Chrome.

Useful selectors and properties

Below is a list of the main selectors you can use to style the popup. We've also added some useful properties for each group of selectors, but there are tons more you can use! We've provided a link to the W3 School's page for each property in its summary.

Important: Use the CSS !important rule on styles to ensure your changes apply, e.g. .ba_widget_parent { border: 5px solid black !important; }
Popup area
These are selectors for the popup area for adding background colors with gradients, borders and styling all texts at once with the same properties.

.ba_widget_parent.none .ba_widget_content - This selects the entire popup area when you are not using an image.

.ba_widget_parent.background .ba_widget_content - Use this to style the entire popup when you are using a background image

.ba_widget_parent.left .ba_widget_content - This selects the area not covered by an image when your image is attached to the left.

.ba_widget_parent.right .ba_widget_content - This selects the area not covered by an image when your image is attached to the right.

.ba_widget_left_content - This selects the image when it is attached to the left of your popup, useful for adding opacity.

.ba_widget_right_content - This selects the image when it is attached to the right of your popup.

.ba_widget_parent - This selects the entire popup and is useful if you want to add a border around the popup when you have an image attached to the left or right. (You can also use this to style the entire popup when you are not using an image.)

Useful properties to use for these selectors:
padding: - Use padding to add space around the content within the popup, useful for adjusting the size of the popup.
background-color: - Change the color of the popup background that is not covered by an image.
background-image: - You can use this to add color gradients of multiple colors to the background, see Sunburst theme below!
border: - Use this to add a border to the popup.
opacity: - Use this to set the opacity or transparency of the left or right-side image or the entire popup.

Texts
These are the selectors for the various texts on the popup.

.ba_initial_state_title - The title text on the initial state of the Popup (How it first appears).

.ba_success_state_title - The title text on the success state of the popup when a user successfully subscribes.

.ba_initial_state_body - The body text, under the title, on the initial state of the popup.

.ba_success_state_body - The body text, under the title, on the success state of the popup.

.ba_initial_state_dismiss_text - The dismiss text under the email input field.

.ba_initial_state_footer_text - The footer text at the very bottom on the initial state of the popup.

Useful properties for these selectors:
font-size: - Change the size of the text.
font-style: - Change the style of the text font.
font-family: - Add a browser-supported font.
letter-spacing: - Adjust the space between letters.
font-weight: - Adjust the thickness of letters.
line-height: - Adjust the height of text.

Buttons
These are the selectors for the popup's buttons.

#close_ba_widget svg - This selects the close ‘x’ button on the popup.

Useful properties for this selector:
fill: - Change the color of the button.
width: Adjust the size of the of the button.

#ba_widget_cta_button - This selects the CTA button on the initial and success states of the widget.

Useful properties for this selector:
border: - Add a border to the button.
border-radius: - Adjust the radius of the button’s borders.
Note: You can use the font and text properties noted above to style the text on the button.

Input Fields
These are the selectors for the input fields on the popup.

#ba_widget_email_input - This selects the input field where the user enters their email.

#ba_widget_discount_code_input - This is the field where the discount code appears on the success state of the widget.

Useful properties for these selectors:
background-color: - Change the background color of the input field.
border: - Add a border to the field.
border-radius: - Adjust the radius of the field’s borders.

💡 Pop Tip: For texts and the input fields, try multiple selectors at once, separated by a comma, e.g. use .ba_initial_state_title, .ba_success_state_title to add styling that will apply to the title text on the popup when it first appears and its success state.

Custom themes
Below we’ve created a few different CSS themes to get started with adding a custom style. You can add these styles and themes to your popup widget to get started with a fresh design and style! To use each theme, click the link under each theme and paste it in your Custom CSS styles.

Adding a custom theme is one way to keep on-brand for your store! Below our team has outlined a couple of designs using CSS to make the widget look your own.

Check out even more themes here: Customizing with CSS Part 2: More Custom Themes and our selection of CSS tips and resources here.

Freshly baked theme

Example of Custom CSS used with a background image from unsplash.com

Copy the CSS listed below to your clipboard
Open the widget style settings in the Popups app
Scroll down the page and paste in the CSS below

Theme CSS

/* Heading font style */

h1.ba_initial_state_title {
font-family: Times New Roman !important;
font-weight: 100 !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}

/* Padding, widget background tint and fonts */

.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 150px 40px 150px 40px !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 6px solid white !important;
font-family:monospace !important;
letter-spacing: -0.5px !important;
}

/* Close button color */

#close_ba_widget svg {
fill: #F7D959 !important;
width: 25px !important;
}


Pop tip: In the example above we're using a stock photo from unsplash.com. Be sure to choose a good image and set the position of your uploaded image to 'background' so it applies on the full screen!

Staycation theme

So CSSexy

Copy the CSS listed below to your clipboard
Open the widget style settings in the Popups app
Scroll down the page and paste in the CSS below

Theme CSS

/* Heading font style */
h1.ba_initial_state_title {
font-weight: 900 !important;
font-size: 70px !important;
line-height: 0.8em !important;
}

/* Subheading font style */
.ba_initial_state_body, .ba_success_state_body {
font-size: 28px !important;
}

/* Padding, widget background tint and fonts */
.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 100px 40px 100px 40px !important;
background: rgba(0, 0, 0, 0.2) !important;
border: 6px solid black !important;
font-family:monospace !important;
letter-spacing: -0.5px !important;
}

/* Close button color */
#close_ba_widget svg {
fill: #000000 !important;
width: 25px !important;
}

/* Main button */
#ba_widget_cta_button {
border: 2px solid black !important;
border-radius: 0px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 1px !important;
}

/* Input field style */
#ba_widget_discount_code_input, #ba_widget_email_input, #ba_widget_first_name_input, #ba_widget_last_name_input, #ba_widget_phone_input {
background-color: black !important;
color: white !important;
border: 0px !important;
border-radius: 0px !important;
}


Sunburst theme

So CSSeductive

Copy the CSS listed below to your clipboard
Open the widget style settings in the Popups app
Scroll down the page and paste in the CSS below

/* Heading font style */
h1.ba_initial_state_title {
font-size: 36px !important;
line-height: 0.8em !important;
letter-spacing: 2px;
font-weight: 600 !important;
}

/* Padding, widget background tint and fonts */
.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 100px 40px 100px 40px !important;
background: rgba(0, 0, 0, 0.2) !important;
background-image: linear-gradient(#ff000094, yellow) !important;
letter-spacing: -0.5px !important;
border: 5px solid white !important;
}

/* Close button color */
#close_ba_widget svg {
fill: #000000 !important;
width: 25px !important;
}

/* Main button */
#ba_widget_cta_button {
border: 2px solid black !important;
border-radius: 30px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 1px !important;
}

/* Input field style */
#ba_widget_discount_code_input, #ba_widget_email_input, #ba_widget_first_name_input, #ba_widget_last_name_input, #ba_widget_phone_input {
border: 0px !important;
border-radius: 30px !important;
}


Common questions

Will this custom CSS interfere with the rest of my website?
No, this CSS will only apply to the styles of the popup widget

Can I get help customizing my widget?
Yes! With any questions, reach out to tier2@rivo.io and our Support Engineers will be happy to help!

Can I add a custom font to my popup?
Currently the fonts available in the dropdown menu in Styles can be used and custom fonts will not apply. We are working on adding this feature right now and it will be available soon!
Was this article helpful?
Cancel
Thank you!