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.
Feel free to play around with them by changing the colors or anything else you like. These themes are designed to be used with an image on the left or right, or with none at all. If you want to use elements from the theme with a background image, make sure to remove the background colors from the /* style for popup area */ section.
To use any of these custom themes
1. Copy the theme's CSS to your clipboard.
2. Open the widget style settings in the Popups app.
3. Scroll down the page and paste in the CSS.
4. Click Save to see your changes.
London Calling Theme
Popup photo by Greyson Joralemon on Unsplash
/* London Calling - Tydal CSS Theme */
/* style for email field */
#ba_widget_email_input {
background-color: black !important;
border: 2px solid #e6e0d6 !important;
color: white !important;
}
/* style for buttons */
#ba_widget_cta_button {
background-color: black !important;
color: white !important;
}
#close_ba_widget svg {
fill: #FF89BD !important;
width: 15px !important;
}
/* style for texts */
.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #e6e0d6 !important;
}
.ba_initial_state_title, .ba_success_state_title {
font-family: Arial Black !important;
color: #000000 !important;
font-style: oblique !important;
}
.ba_initial_state_body, .ba_success_state_body {
font-family: Calibri !important;
color: #FFFFFF !important;
font-style: oblique !important;
font-weight: 500 !important;
}
/* style for popup area */
.ba_widget_parent {
border: 4px solid #d67d91 !important;
background: -webkit-linear-gradient(70deg, #d67d91 40%, #048b4f 40%) !important;
font-family: Tahoma !important;
}
Autumn Vintage Theme
/* Autumn Vintage - Tydal CSS Theme */
/* style for email field */
#ba_widget_email_input {
border: 0px !important;
border-radius: 10px !important;
text-align: center !important;
}
/* style for buttons */
#ba_widget_cta_button {
background-color: black !important;
color: white !important;
border: 2px solid #e6ebe0 !important;
border-radius: 10px !important;
}
#close_ba_widget svg {
fill: #e6ebe0 !important;
width: 15px !important;
}
/* style for texts */
.ba_initial_state_title, .ba_success_state_title {
font-family: Sans-serif !important;
font-style: oblique !Important;
font-weight: 800 !important;
color: white !important;
}
.ba_initial_state_body, .ba_success_state_body {
color: white !important;
}
.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #e6ebe0 !important;
}
.ba_initial_state_footer_text {
font-style: oblique !important;
padding: 20px !important;
}
/* style for popup area */
.ba_widget_parent {
font-family: Arial !important;
padding: 20px !important;
border: 8px solid #e6ebe0 !important;
opacity: 75% !important;
background: #ffba08 !important;
}
.ba_widget_main_design {
background: #BF360C !important;
}
.ba_widget_parent.none .ba_widget_content, .ba_widget_parent.left .ba_widget_content, .ba_widget_parent.right .ba_widget_content {
background: #d00000 !important;
}
Rhubarb Soda Theme
Logo icon by Iconpacks
/* Rhubarb Soda - Tydal CSS Theme */
/* style for email field */
#ba_widget_email_input {
border: 0px !important;
border-radius: 25px !important;
text-align: center !important;
}
/* style for buttons */
#ba_widget_cta_button {
background-color: black !important;
color: white !important;
border-radius: 25px !important;
}
/* style for texts */
.ba_initial_state_title, .ba_success_state_title {
padding: 20px !important;
font-family: Lato !important;
color: white !important;
}
.ba_initial_state_body, .ba_success_state_body {
font-size: 150% !important;
padding: 10px !important;
font-weight: 500 !important;
color: white !important;
}
.ba_initial_state_dismiss_text {
color: #757575 !important;
font-size: 120% !important;
}
.ba_initial_state_footer_text {
font-style: oblique !important;
font-size: 100% !important;
color: #757575 !important;
}
/* style for popup area */
.ba_widget_parent {
background-image: linear-gradient(to bottom, #ff0780, #ff6364, #ff9a5f, #ffc877, #f6efa7) !important;
font-family: Calibri !important;
}
.ba_widget_main_design {
overflow: auto !important;
border-radius: 25px !important;
}
Waterloo Sunshine Theme
Popup photo by Autumn Mott Rodeheaver on Unsplash
Logo icon by Iconpacks
/* Waterloo Sunshine - Tydal CSS Theme */
/* style for email field */
#ba_widget_email_input {
background-color: #003566 !important;
border: solid white 2px !important;
border-radius: 10px !important;
color: white !important;
}
/* style for buttons */
#ba_widget_cta_button {
background-color: #003566 !important;
color: white !important;
border: solid #003566 1px !important;
border-radius: 10px !important;
}
#close_ba_widget svg {
fill: #003566 !important;
width: 15px !important;
}
/* style for texts */
.ba_initial_state_title, .ba_success_state_title {
padding: 25px !important;
font-family: Lato !important;
font-weight: 900 !important;
color: white !important;
}
.ba_initial_state_body, .ba_success_state_body {
font-size: 150% !important;
padding: 10px !important;
font-weight: 500 !important;
color: #003566 !important;
}
.ba_initial_state_dismiss_text {
color: #003566 !important;
font-size: 120% !important;
}
.ba_initial_state_footer_text {
font-style: oblique !important;
font-size: 100% !important;
color: #003566 !important;
}
/* style for popup area */
.ba_widget_parent {
font-family: Candara !important;
border: 8px solid #003566 !important;
background: #ffc300 !important;
}
Pink Coral Theme
Logo icon by Iconpacks
/* Pink Coral - Tydal CSS Theme */
/* style for email field */
#ba_widget_email_input {
border: 2px solid white !important;
border-radius: 0px !important;
}
/* style for buttons */
#ba_widget_cta_button {
background-color: #ff3399 !important;
border: 2px solid #FFE4F4 !important;
border-radius: 0px !important;
}
#close_ba_widget svg {
fill: #626078 !important;
width: 15px !important;
}
/* style for texts */
.ba_initial_state_title, .ba_success_state_title {
color: #26252e !important;
font-family: Lato !important;
}
.ba_initial_state_body, .ba_success_state_body {
color: #26252e !important;
}
.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #626078 !important;
}
.ba_initial_state_footer_text {
font-style: oblique !important;
}
/* style for popup area */
.ba_widget_parent {
background-image: linear-gradient(to bottom, #a9f1df, #c4e7bb, #e2d8a6, #f9c8a7, #ffbbbb) !important;
border: 7px solid #EFFCF8 !important;
font-family: Sans-serif !important;
padding: 30px !important;
}
Freshly baked theme
/* 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
/* 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
/* 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 add a custom font to my popup?
Yes you can! Please see our guide here: Adding a custom font to your popup