Created March 2017
Latest Updated March 2017
By Works of Wisnu and Slari Studio
All files and folders are well organized..
By default Supar has white (#fff) body background color. But there are two custom backgrounds you could use for your section.
sky-bg to your section class to change the background color into sky blue. And apply
no-bg class to get rid of any background image.
These classes uses to create overlay above your background/section. To Use it, apply the class on a div right under your section/elements you want. See the screen shot below for example:
Supar use Simple Parallax Scrolling js by PixelCog Inc.
To easily add a parallax effect behind an element, add
data-parallax="scroll" to the element you want to use, and specify an image with
data-image-src="/path/to/image.jpg". See the screen shot below for example:
To create a full width column section, change the div class
container-fluid. And don't forget to add class
no-padding to your section. See the screen shot below for example:
To make vertically aligned content like Hero section you need to add
display-table class to your column div and then create/add div class
display-table-cell to wrap your content. See the screen shot below for example:
Open main.js file and find the 7. AJAXCHIMP section, replace the URL with your own mailchimp post URL
Just login to your Mailchimp account, go to your list or create a new one, head to the Signup Forms menu, select Embedded Form. There you will find "Copy/paste onto your site" section, find the URL inside
Another subscribe-like form but this one uses custom PHP function to send user's data to your email. From Supar existing layout, you can see the example of this form on the default layout at Sign Up section.
To adjust the recipient email address (your email) please open signup.php file inside PHP folder. Change the email@example.com value into your valid email address.
Supar has separated-page contact form, that is in the Contact Page layout. The form use contact.php to send the message to your email, to adjust the recipient email address (your email) please change the firstname.lastname@example.org value into your valid email address.
To adjust the form to meet what you need, you can edit the name, and placeholder of an input. Below is a screenshot of the existing contact form:
From the screenshot above, you can see the highlighted code is the site key that you need to run Google Recaptcha V2 plugin on your site. Replace the
data-sitekey to your own key, you can generate it from Google reCaptcha website here.
Before the contact message sent, it needs to be validated to check whether all required fields have been filled correctly. To adjust the validation process, please open the main.js file and head to section number 5, Contact Form Validation. You will find some validation code like this:
Variables inside the
rules are the value of name attribute of your contact form's input.
Please take a look at the current PayPal form code below along with the variables description (taken from E-Course layout):
_xclickvalue indicates that the button was a Buy Now button.
For further information about the variable, please visit the PayPal official documentation here.
Below is the list of jQuery plugins used in Supar template. Visit their website to find more documentation:
I've used the following images, icons or other files as listed. *for demo only