Go to ViralSweep
  1. All Collections
  2. Features
  3. Custom CSS
Image

Custom CSS

Avatar

By Giancarlo

January 6, 2024
NOTE: THIS HELP DESK IS OUTDATED. PLEASE VISIT OUR NEW HELP DESK HERE. 

This feature is only available on our Business Plan and higher. 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.

Features that do not require custom css

The following items can be modified under our images, styling, campaign details, and layout sections and do not require you to write CSS to change them:

  • Images (under Edit > Images)
  • Paragraph and Header fonts (unless using a custom font) - (under Edit > Design > Styles)
  • Icons colors (under Edit > Design > Styles)
  • Backgrounds (under Edit > Design > Styles)
  • Form fields (under Edit > Design > Styles)
  • Buttons (under Edit > Design > Styles)
  • Borders (under Edit > Design > Styles)
  • Form Widths (under Edit > Design > Layout)

Custom Fonts

You can use Google Fonts to use any custom font. 

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

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.

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

Post-Entry

If you want to remove the box at the top of the post-entry page that shows the number of entries, use:

ul.entry-details:not(.leaderboard) {display:none;}

If you want to hide product images on the post-entry page:

 .post .images {display:none;}

If you want to show the logo image on the post-entry page:

body.post .post-entry { background: transparent url(image_url_goes_here) top center no-repeat; float: inherit; padding: 61% 0 0 0; background-size: contain; }

We're here to help

If you have any further questions, please start a Chat. Just "Click" on the chat icon in the lower right corner to talk with our support team.

IMAGE