Created March 2017
Latest Updated March 2017
By Works of Wisnu and Slari Studio
Support: xwisnux@worksofwisnu.com
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.
Apply 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
into 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:
Supar has integrated with MailChimp service subscribe form using jQuery Ajaxchimp. From Supar existing layout, you can see the example of this form on the Software layout.
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 form action=""
.
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 your@emailaddress.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 your@emailaddress.com 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):
_xclick
value indicates that the button was a Buy Now button.Company_Service_Product_Country
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