Don't have a loyalty app? Get Rivo →

Customizing with CSS Part 2: More Custom Themes

Here we've got some more out-of-the-box themes ready to be copy and pasted or used as inspiration for your own popup! 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.

Read part 1 of our guide here: Customizing the design of your opt-in popup with CSS and our selection of CSS tips and resources here.

CSS themes:
London Calling
Autumn Vintage
Rhubarb Soda
Waterloo Sunshine
Pink Coral

To use any of these custom themes:
Copy the theme's CSS to your clipboard.
Open the widget style settings in the Popups app.
Scroll down the page and paste in the CSS.
Click Save to see your changes.

London Calling Theme

Use colors that contrast and complement but not clash

Popup photo by Greyson Joralemon on Unsplash

/* London Calling - Rivo 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

Warm colors are always warmly welcome

/* Autumn Vintage - Rivo 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

Color gradients really make an ouline logo pop

Logo icon by Iconpacks

/* Rhubarb Soda - Rivo 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

Yellow is the world's happiest color :)

Popup photo by Autumn Mott Rodeheaver on Unsplash
Logo icon by Iconpacks

/* Waterloo Sunshine - Rivo 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

Use friendly, inviting colors to convert

Logo icon by Iconpacks

/* Pink Coral - Rivo 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;
}
Was this article helpful?
Cancel
Thank you!