If you want to change the text, fonts, colours, width, height, position or whatever on your Widgets or even your Viral Loops page, you can do that through the custom CSS and HTML fields that we are providing you 😁

To help you further with this, we have gathered the most frequently used CSS and HTML scripts in one place, so check them out!

How to do this:

For Widgets

Simply, go to the Widget you want and select the CUSTOM CSS TAB from the left. You will see an empty white box on the left bottom corner for the CSS:

For Viral Loops Pages

From the Installation STEP, select that you will use the Viral Loops Page, edit the page, click on the settings, and then add your script to the Analytics & Scripts TAB.

..and now, add the scripts below with your modifications!

CSS:

For placeholder text-colour

::placeholder {
  color: white!important;
}

For X button

(close/exit button)

.vl-icon-btn {
    color: white!important;
}

Horizontal Widget

(to make your widget horizontal)

.parent-flexbox {
    display: block!important;
}
 
#firstname-container, #email-container {
    float: left!important;
}
 
#firstname-container {
    Margin-right: 28px!important;
}

Hide position/number/rank

.my-rank {
    display: none !important;
}

Fields background colour

input {background-color: red!important}

Milestones margin on top

.container-fluid { margin-top: 50px !important }

Texts in Sharing State

h1, h2, span {
    font-weight: 700!important;  
}

Background / Icons colours

(this is for Sharing state)

.participation-submit {
    border: 0;
    background: linear-gradient(90deg, rgba(176,241,39) 0%, rgba(182,249,221) 100%);
}
 
.btn-link-copy {
    background: linear-gradient(90deg, rgba(176,241,39) 0%, rgba(182,249,221) 100%);
}
 
.fa-svg  {
    fill: black!important;
}
 
.sharing-btn .shareLink {
    background: linear-gradient(90deg, rgba(176,241,39) 0%, rgba(182,249,221) 100%);
}
 
.vl-metric {
    background: linear-gradient(90deg, rgba(176,241,39) 0%, rgba(182,249,221) 100%);
}

Resize Logo on VL Pages

.logo-container img { max-height: 800px; max-width: 800px;
}

Colour of typing

(on a Widget's field, in case you typing in white color for example)

input { color: black!important
    }

Copy url field

(transform the field to just a button on mobile)

@media only screen and (max-width: 456px) {
  .sharebtns {
    display: none !important;
  }
  .link-row {
    margin-top: 0px !important;
    display: block !important;
  }
}

Text colour on Copy field

(from the Sharing State)

input#form_copy {
      color:black!important;
  }

Custom field text colour

.radio-label {
  color: #fefefe;  
}

Hide # from waitlist-widget

#hashtag-rank {

display:none!important;

}

Colour on success consents

(this is for the text)

#manageConsentsSuccess {
    color: white! important;
}

Colour of consents, etc

.normal-custom-style, .normal-opacity-80-custom-style {
    color: black!important;
}

Sharing State H1 and H2, etc

.widgetshare .header .text:last-child  {
  font-weight: 400 !important;
}
 
.header h1: {
font-weight: 600 !important;
}

Colour/weight of GDPR text

(in order to make it black/bold and not gray)

 .gdpr-content {
    font-weight: 400 !important;
}

Colour/etc for Legal Description

.gdpr-content, .legal, .description {
    font-size: 11px!important;
}

Different fonts on widget

(Between headers, text,etc. In order to do that, you need to upload your fonts first, ask us at support@viral-loops.com)

@font-face { font-family: NeueHaasUnica-Medium; font-weight: 500; font-style: Normal; src: url(https://pages-static.s3.amazonaws.com/NeueHaasUnica-Medium.ttf); }
@font-face { font-family: NibPro-SemiBold; font-weight: 600; font-style: Normal; src: url(https://pages-static.s3.amazonaws.com/NibPro-SemiBold.ttf); }
 
* {
    font-family: NeueHaasUnica-Medium !important; 
    font-weight: Medium !important; 
    font-style: Normal !important;
}

.far, .fas, .fal, .fa { font-family: "Font Awesome 5 Pro" !important; }
 
h1 {
    font-family: NibPro-SemiBold !important;
    font-weight: SemiBold !important;
    font-style: Normal !important;
}
 
.p {
 color: black!important;
}

Hide leaderboard from widget

.vl-leaderboard { display: none !important }

CSS on emails

(on emails, CSS should be inline like this)

<span style="color: red; font-size: 14px">Some text</span>

HTML:

For paragraphs, bullets, etc

(on Sharing State in fields, it works on Viral Loops page too)

example:

Share the link below with your friends to join the waiting list and win:<br><br> - <b>2 MONTHS FREE</b> subscription for <b>3 of your friends</b> who join the waitlist.<br> - <b>3 MONTHS FREE</b> subscription for <b>10 of your friends</b> who join the waitlist.

🤖That's all for now; this list will be updated often🤖

Did this article help? Let us know!

If you need more help, please send us a message to support@viral-loops.com! Our team will be happy to assist you further!