This feature is only available on our Business and Premium Plans. Please note, this is a developer only feature and we will not write your CSS for you.

Overview

Custom CSS is a developer only feature that allows you to overwrite our default styles with your own CSS. You can implement your own CSS styles for each of the three templates that we offer (full page, widget, and lightbox).

We've compiled a list below of the most common CSS classes, and what they apply to. We've also made note of certain elements you may wish to change that do not require custom CSS to be used.

Background Colors

If you want to change the background color of the entry form, the background color behind the form fields, or change the opacity, here are the CSS classes you would need to modify:

/* Changing Promotion Background Color */
.promotion { background: rgba (255,255,255,0.95); border: 1px solid rgba(255,255,255,0.95) }

/* Changing Background Color Behind Form Fields */
.form { background: rgba (93,97,133,0.03); border: 1px solid rgba(93,97,133,0.25); }

Button Colors

If you want to change the color of the enter button, you do not need custom CSS for this.
Simply go to Formatting when building your campaign, choose the style you want to modify, and change the button color from the color selector.

Alternatively, if you are using a custom theme, you can also change the button color there as well.

Footer

If you want to modify elements of the footer, or hide the footer altogether, here are the following classes you need to use:
/* Remove Winners */
ul.promotion-details li:first-of-type {display:none;}

/* Remove End Date */
ul.promotion-details li:nth-of-type(2) {display:none;}

/* Remove Time Left */
ul.promotion-details li:nth-of-type(3) {display:none;}

/* Remove Rules */
ul.promotion-details li:nth-of-type(4) {display:none;}

/* Remove Entire Footer */
.footer {display:none;}

Fonts

If you want to change the font on your entire form, you can use the following:

/* Change Font */
@import url('link to font');
* {font-family:'name-of-font',Helvetica,Arial,sans-serif!important;};

Within the above snippet, you need to include a URL to the font, and you also need to include the name of the font. The URL of the font must be HTTPS. A finished and working version would look like this:

/* Change Font */
@import url('https://fonts.googleapis.com/css?family=Kumar+One');
* {font-family:'Kumar One',Helvetica,Arial,sans-serif!important;};

Form Width

If you want to change the width of the form, you do not need custom CSS for this.
To change the width of the form go to Formatting when building your campaign and select the style you want to modify. Then you can input the width that you want, and select if you want it to be in PX or %.

Images

If you want to change image positions, as well as hide or remove images, or make the image line-up with the entry form, you do not need custom CSS for this.

To change image positions go to Formatting when building your campaign and select the style you want to modify. Then you can change image positions or hide images. You can even change the position of the images on mobile.

To have the image line-up with the entry form so they are both the same height (if your image is on the left or right of the form), simply upload an image that is the same height as the form. To find the form height, inspect the form and and click on:
<div class="promotion">

You will then see the form height and you can upload an image that is this height. If you plan to upload multiple images, they must all be the same height, otherwise we default all images to 400x400px if you are showing them on the left or right side of the form. If the images are being shown above or below the form, you can make them any width/height you want, just be sure to adjust the width of the form itself under the formatting area.

Post-Entry

If you want to remove the box at the top of the post-entry page that shows the number of entries and the time left, here are the following classes you need to use:

/* Remove Entry Count */
ul.entry-details li.entry-count {display:none;} ul.entry-details li {width:100%;border:0;} ul.entry-details span:nth-of-type(1) {display:none;} ul.entry-details span:nth-of-type(2) {display:none;} ul.entry-details span:nth-of-type(3) {width:100%;left:0;}

/* Remove Time Left */
ul.entry-details li.time-left {display:none;} ul.entry-details li {width:100%;border:0;} ul.entry-details span {width:50%;} ul.entry-details span:nth-of-type(2) {left:50%;} ul.entry-details span:nth-of-type(3) {display:none;}

/* Remove Entire Post-Entry Details Box */
ul.entry-details {display:none;}

We‘re here to help

Still have questions about custom CSS? Simply click the support or live chat icon to get in touch with us.