Are you using The Leaderboard Giveaway template? Maybe The Start-up Prelaunch? Are your participants tempted to join your Campaign? Yes, the last one was a pun for the Tempting Giveaway.
Do you want to customize the Pop-up in order to fit your personal style? Here's how to do it:
Before we get started, let me remind you that you can choose your own custom button to trigger the Pop-up by creating a button or a link and giving to it a class vrlps-trigger.
For example,
<button type="button" class="vrlps-trigger">Join our campaign!</button>
or
<a href="#" class="vrlps-trigger">Join our campaign!</a>
In order to customize the Viral Loops Pop-up, you will have to do the following steps:
Create a CSS file and link it with the page in which the Pop-up is located. (Details on this part will be shown after the example)
Find the names of the selectors that you want to customize, using (for example) Chrome's inspect tool.
Apply the custom rules into the selectors while adding the tag !important on each rule.
For example, if you want to achieve the following result,
you will have to add the following in your CSS file,
.vlns.vl-modal-content {
border-top-left-radius: 50px!important;
border-bottom-right-radius: 40px!important;
}
.vlns.vl-modal-footer-modern {
border-bottom-right-radius: 50px!important;
}
.vlns.vl-form-control {
border-left: none!important;
font-style: italic!important;
border-bottom: 1px solid black!important;
border-right: 1px solid black!important;
border-top-left-radius: 8px!important;
border-bottom-right-radius: 8px!important;
background: inherit!important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)!important;
}
#vl_popup_submit {
border-top-left-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}Note: Notice that I have used the !important tag in every rule.
Using Chrome's inspect tool, you can find the name of the selector that you want to customize,
Extra information for Step 1.
There are two ways in which you can add custom CSS to an HTML file.
The first one is to create a CSS file and link it inside the head element of the HTML.
In order to create a CSS file, all you have to do is create a new file and name its suffix css.
e.g. myStyle.css
To link this file with the .html file that contains the page with the Pop-up, you will have to enter the following line in the head tag of the html code:
<link rel="stylesheet" href="myStyle.css">
The href of the code specifies the path where the myStyle.css file is located. In this example, it is located inside the same folder as the .html file.
The second way to add custom CSS inside an HTML file is to add it inside a tag called <style>.
Basically, (for the above example) you will have to enter the following code anywhere inside the <head> or (preferably) in the beginning <body> tag of your HTML file:
<style>
.vlns.vl-modal-content {
border-top-left-radius: 50px!important;
border-bottom-right-radius: 40px!important;
}
.vlns.vl-modal-footer-modern {
border-bottom-right-radius: 50px!important;
}
.vlns.vl-form-control {
border-left: none!important;
font-style: italic!important;
border-bottom: 1px solid black!important;
border-right: 1px solid black!important;
border-top-left-radius: 8px!important;
border-bottom-right-radius: 8px!important;
background: inherit!important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075)!important;
}
#vl_popup_submit {
border-top-left-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}
</style>
Did this article help you? Let us know!