This document is going to discuss CSS basics; how it works, commands, and how they apply to areas of your new Popup. Lastly, we'll show you where to learn more CSS if you want to be pros like us!

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. We've included our favorite resources at the end of the article.

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.

Areas Detailed in this Article:

Popup Area

Text Areas

Buttons

Inputs

See additional online CSS learning resources

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; }

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

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.

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.

These are the selectors for the popup's buttons.

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

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.

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.

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

Here's a list of some free, awesome resources to help you become a pro with CSS! We update this content regularly so if you have any recommendations, drop some feedback on the article below 🙂

Learn CSS with W3 Schools - A fantastic site to get started or refreshed on CSS basics.

Learn CSS with Google web.dev - A complete course with the Google seal of quality.

Learn CSS with Mozilla - More developer-oriented but a great resource.

CSS Tricks - A great site for those more comfortable with CSS. Awesome selection of guides, articles and CSS tips and tricks.

💡 Pop Tip: If you're copy-and-pasting CSS from somewhere on the web make sure you add the !important rule to every declaration (i.e. before any semicolon.)

Image Color Picker - Upload an image from your device or with a URL and use this to get the image's hex codes.

Pallette Generator - Simply enter a hex code and this site generates a variety of color pallettes. They also have a nice gradient generator.

Gradient Generator - A more robust gradient generator that allows you to fine-tune for a perfect gradient.

Coolors.co - An amazing site with lots of features for creating color schemes.

WebGradients - A curated collection of beautiful linear gradients ready to use!

Animated Gradient Generator - Awesome site for creating animated gradients like the one above!

CSS Background Patterns - A nice selection of background patterns you could add to your popup.

Complex patterns using CSS gradients - Awesome blog post delving into the the more complex applications of CSS gradients.