Thank you for purchasing our template! This is the documentation that will help you with customizing and orienting in the template.
Important! This is a static HTML template and not a WordPress theme! It doesn't have any admin/back-end panel. and it is created for the developers or people who knows the HTML code.
Before you dive into code, you we want you to explain how the template is structured and organized, what support is included, what tools did we have used etc.
If you are not satisfied with the default font, you can choose from hundreds ones from the
Google Fonts. After you are happy with the selected font, click SEE SPECIMEN. You'll be redirected to to font detail. Then click Select this font. Popup window will show with text "1 Family Selected" - click it. Then you can customize your selection by clicking Customize. When you are done copy the text in import tab.
For example
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
Then open the helper.css file to change fonts and find the @import... element which loads the Google font and place your copied code.
Final step is to change the font family in the css/plugins/default.css file. Find body tag on the beginning of the file and font-family inside. Go back to Google Fonts page where you have chose your font and copy the line placed in the Specify in CSS. In this example it is
font-family: 'Open Sans', sans-serif;
There are two methods how to change the main color. 1st Just by replacing the HEX color value in the styles.css (simple) and 2nd by installing koala or you can choose another compiler as well (advanced). Here is the simple way.
Let say, that you want to change the default red color to blue one:
Add template to the koala
Set styles.sccs path to output pathstyles.css (With right click of styles.scss)
Now open the style.scss in your text editor, find Replace or Find and Replace function
As original text enter the red color #ff0000 (template default color)
As Replace with enter HEX value of blue color #0000ff
Template is using Bootstrap utilities very often. We think that it is better solution as writing all styles for every element into CSS file. It makes the style.css smaller and it is more flexible. You can find more about Bootstrap Utilities.
JavaScript (JS) files/plugins are located in the /js folder and in the HTML file they are called using code. All JS files are located at the bottom of the HTML file. main.js file is the template's JS file that includes scripts for running other plugins.
Note: You will need to modify only main.js file. Read more about it in the Plugins section.
You can easily change the color of the background without editing of the CSS/SCSS files. This can be applied to whole section or particular element as well.
You can also change the opacity and color with changing of data-overlay-dark | data-overlay-light
You can also change the background overlay color with use of class="theme-overlay" For example: <section class="bg-img cover-background theme-overlay"
<div class="parallax"> or <div class="bg-img"> It's necessary to use one class of above without that it won't be work. (class="parallax" or class="bg-img").
Easy background parallax effect is done using data-background. You can also change the speed and overlay of the parallax effect and overlay by adding data-stellar-background-ratio="0.5" and data-overlay-dark="6" (For Parallax effect just add the class="parallax")
Amava comes with working email. You can use them for contact, subscribe or other forms that will collect the user's email address and send it to your receiving one.
Important! Contact form must have action="bat/rd-mailform.php"
Note: It is better to test email sending on live server. It does not work on a local machine.
You have to setup your own email address for email receiving. As a default it is
addyour@emailhere and it is located in the bat/rd-mailform.php.
How to change the address:
Go to bat/rd-mailform.php and find $recipients = 'addyour@emailhere'; and change the address to your own.
jquery.js – jQuery library (the form will work with this version of library only);
search.css – stylesheet file which is being used for stylization of the search results pages ;
search.html – page where the search results will appear;
search.js – script which is responsible for the search results output in an iframe on the page search.php;
results.php – PHP script which actually performs the search.
In this form we should define such parameters as: action="search.html" and method="get", also set parameter for an input: name="s". If you want to change the name of the search form, which is id="search" by default, you should change it on the line 3 in the file search.js as well, you can find it in search folder.
Although, Bootstrap has p*-0 utility, but sometimes you need to remove just one side of padding and it is not possible with the same Bootstrap's padding utility.
padding-one-all 1% padding to all side
padding-10px-all padding 10px to all side
no-padding remove padding
no-padding-top remove padding from top
no-padding-right remove padding from right
no-padding-bottom remove padding from bottom
no-padding-left remove padding from left
padding-10px-top padding 10px top
padding-10px-right padding 10px right
padding-10px-bottom padding 10px bottom
padding-10px-left padding 10px left
padding-10px-lr padding 10px left and right
padding-10px-tb padding 10px top and bottom
md-padding-10px-all for medium screen - padding 10px to all side
sm-padding-10px-all for small screen - padding 10px to all side
Important! If you add md and sm prefix before the class it will be consider for medium and small screens.
