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 Layout section 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 %.

Hiding Fields

To hide fields on your entry form, you can apply the below CSS. The best use case for this is if you are pre-filling fields and do not need to show them on the form.

You can hide any of our pre-made fields by using the below CSS:

.form div.form_item_wrapper.name {display:none;}

.form div.form_item_wrapper.email {display:none;}

.form div.form_item_wrapper.address {display:none;}

.form div.form_item_wrapper.address2 {display:none;}

.form div.form_item_wrapper.city {display:none;}

.form div.form_item_wrapper.state {display:none;}

.form div.form_item_wrapper.zip {display:none;}

.form div.form_item_wrapper.country {display:none;}

.form div.form_item_wrapper.phone {display:none;}

.form div.form_item_wrapper.birthday {display:none;}

For hiding custom form fields, you need to use: nth-last-of-type. For example:

.form div.form_item_wrapper:nth-last-of-type(2) {display:none}

.form div.form_item_wrapper:nth-last-of-type(3) {display:none}

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.

Image Slider Buttons

If you want to change the color of the buttons on the image slider, here are the classes you need to use:

/* Change Image Slider Button Color When Active */
.images .slidesjs-pagination a.active {background:#color;}

/* Change Image Slider Button Color When Not Active */
.images .slidesjs-pagination li {background:#color;}

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.