Welcome and thank you for purchasing our theme Wata. We prepared a throughout documentation to make your experience as pleasant as possible. We tried to cover every aspect of this theme, however, if you still have any questions or need clarification, feel free to email us via user page contact form.
This theme is built using Materialize, a modern responsive front-end framework based on Material Design. Make sure you visit their web-site to learn more about it.
This theme requires a pretty basic setup. In fact, the only thing your server needs is PHP installed, which is usually 99.9% of the cases. If you happend to be that 0.1%, please contact your hosting administrator and let him know you need PHP installed on your server.
Wata works great in all of the modern browsers, as well as mobile browsers. It supports Internet Explorer 10+.
Installing our theme is extremely simple — just upload all the files to your server. In fact, you can test your theme locally as well, except for the contact form functionality, which requires a server side language.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
sass-lang.com
Using Sass is optional, so don't worry about this section in case you prefer pure CSS.
Wata's styles have been written using Sass with help of Bourbon library.
Make sure you take full advantage of it, if you are familiar with this technology. The main file
styles/sass/wata.scss contains imports of various components. All components are very specific, making
it very simply to maintain the code.
Sass allows you to modify the whole color-scheme by changing only two variables. In the
styles/sass/_colors.scss file we define $primary-color
and $secondary-color which are then being used by the whole
style sheet. There, you can adjust other colors as well.
Grunt is the JavaScript Task Runner. The usage of this technology is also optional.
You can use it to minify your CSS, JavaScript and concatenate files into one big build, which would shorten the http requests the browser has to make, thus making the page load faster. If you're not familiar with Grunt, but want to give it a try, check out the Getting started with Grunt guide.
At first, you have to install the dependencies.
npm install
The tasks are:
grunt (default) — minify CSS and JavaScriptgrunt build_lib — build a single file with the entire
libraryWe like flashy effects, they help memorize your web-site. Triangles use a WebGL animation, falling back to HTML canvas, which ensures cross-browser compatibility.
By default, the colors correspond to the primary and secondary colors of Wata's color scheme, but
you can customize them to suit your needs. You will need to open the scripts/config.js
file and edit the following lines to achieve that:
var Wata = {
// Configuration of triangles
triangles: {
mesh: {
depth: 11,
slices: 250
},
light: {
ambient: '#5838e6',
diffuse: '#4efa62',
distance: 55
}
},
...
You can use this page to help you with this process — msurguy.github.io/triangles. Just copy and paste the values from the UI into the configuration variable.
Make sure you follow the correct syntax for this one, it might be a little tricky. The number
doesn't need any quotes — 250, while the color
code does — '#5838e6'.
Also, you shouldn't leave a trailing comma, that is the latest value of the group, such as
slices or distance don't need a comma at the end.
Services icons' color is animated by GreenSock. As you scroll through the #services section,
the color changes from indigo dark to a lighter indigo accent. To preserve this effect, make sure you include
class="animated-color" in the icon's
<i> tag.
The filter buttons are found inside <div class="filter-options">...</div>
in #works section. To add a new button, just add a line like this:
<div class="filter-options">
<a class="btn-flat waves-green-accent waves-effect active" id="all" data-group="all">Everything</a>
...
<a class="btn-flat waves-green-accent waves-effect" data-group="new-filter">New filter</a>
</div>
To configure the work and associate it with a correct category, you will need to add a
data-groups attribute. You can add multiple categories to a
single project, like this:
<div id="shuffle-grid" class="row">
<a href="path/to/project/ajax-page.html"
class="col s12 m6 l4 picture-item ajax-link"
data-groups='["category-1", "category-2"]'>
<img src="path/to/image.png" class="responsive-img" alt="Project">
<h5>Project name</h5>
</a>
</div>
The data-groups should follow a valid JSON format, which has
the following syntax ["category-1", "category-2"]. Note the double quotes.
This forces you to have single quotes for the attribute, resulting in the following:
data-groups='["category-1", "category-2"]'
The gallery is using Shuffle. You can learn more about this script on their homepage.
Ajax boxes are useful for secondary pages, like single project pages or blog post pages. There can be any number of pages like this, for example Privacy Policy (link is placed in the footer).
To create a page like that, place it in the ajax/ directory. It's nice to keep things
organized and create sub-directories, in case of multiple pages. The page should look like a block
element, since we're injecting only this part. There is no need to do this:
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
Make sure you include a button to close the page and return to the main content. Just add the following code somewhere in the beginning of your ajax page.
<a class="btn-floating btn-large waves-effect waves-dark green accent-2" id="close-ajax">
<i class="mdi-navigation-close indigo-text text-darken-4"></i>
</a>
<div id="ajax-status">...</div> is required in case
you're using the parallax effect in your ajax box.
Follow the page structure of existing pages for help.
To enable this functionality, place a link with href pointing to
the page, including ajax-link class. This is mandatory to treat
the link not as a normal one. Your link should look like this:
<a href="ajax/sub-category/page.html" class="ajax-link">Ajax-box page</a>
If, for some reason, the page is not accessible, be that a 404 error or something else, the user
will get notified with a toast, containing a message
describing the error. This message is configurable in scripts/config.js under the
somethingWrong key:
var Wata = {
...
// Various toast messages
toastMessages: {
...
somethingWrong: 'Something went wrong, try again. Error: '
},
...
Currency switcher allows you to show prices in different currencies. In the #prices section
you can find the following lines:
<p class="right-align currency-switcher">
Choose your currency:
<span class="currency-group">
<input name="currency" type="radio" id="usd" checked>
<label for="usd">$</label>
</span>
<span class="currency-group">
<input name="currency" type="radio" id="eur">
<label for="eur">€</label>
</span>
</p>
To add another currency, add a
<span class="currency-group">...</span>,
modifying the input id and
label for attributes, as well
as changing the currency symbol. The default currency must have a
checked attribute in the input
tag.
Price container shows customers the name of the offer, price and the list of items he or she gets for
purchasing it. To correctly setup a new price container, make sure you insert a correct
id and maintain the elements structure, including classes. A new
price container would look like this:
<div class="price-container z-depth-1" id="exclusive">
<div class="offer">Exclusive</div>
<div class="divider"></div>
<div class="price">$55</div>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
<a class="waves-effect waves-dark white black-text btn">Choose</a>
</div>
To configure the prices, you need to open and edit the scripts/config.js file. Find the
following lines:
var Wata = {
...
// Currency switcher
currencySwitcher: {
offers: {
standard: {
usd: 19.0,
eur: 17.0
},
professional: {
usd: 49.0,
eur: 43.0
},
extended: {
usd: 99.0,
eur: 87.0
}
},
symbols: {
usd: '$',
eur: '€'
}
},
...
After adding the prices configuration for our new "Exclusive" offer, the code will look like this:
var Wata = {
...
// Currency switcher
currencySwitcher: {
offers: {
standard: {
usd: 19.0,
eur: 17.0
},
professional: {
usd: 49.0,
eur: 43.0
},
extended: {
usd: 99.0,
eur: 87.0
},
exclusive: {
usd: 55.0,
eur: 49.0
}
},
symbols: {
usd: '$',
eur: '€'
}
},
...
To make your best offer pop out, just add best-offer class to the
<div class="price-container">...</div>. This will
enable the mighty GreenSock animation to trigger a deeper shadow, when the offer appears in the viewport.
It's import to follow the existing syntax when configuring this variable. The number
doesn't need any quotes — 19.0, while the string
does — '$'.
Also, you shouldn't leave a trailing comma, that is the latest value of the group, such as
eur or extended don't need a comma at the end.
Wata comes with a pre-configured, ajax-enabled MailChimp subscribe form. It can help you collect lists of subscribers, which you can use to send your newsletters to.
To make it all work, follow these simple steps:
Now, all that is left is to go the #subscribe section and fill in the
form action, as well as
the hidden input name.
From the "Copy/paste onto your site" text area find a line that looks like this:
<form action="//your-username.us11.list-manage.com/subscribe/post?u=4131d154e34d85ebd3ba25ad3&id=61196261e7" ...>
Copy and paste the whole action="..." part onto the form on your page:
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//your-username.us11.list-manage.com/subscribe/post?u=4131d154e34d85ebd3ba25ad3&id=302b4221bd" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
You're almost done! All that's left is preventing the spam attacks. We need to configure a hidden input field.
Again, from the "Copy/paste onto your site" text area find a line that looks like this:
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_4131d254e34d85ebd3ba25ad3_61196261e7" tabindex="-1" value=""></div>
Copy and paste that long name="..." part onto your page:
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div class="cant-touch-this">
<input type="text" name="b_4131d254e34d75ebd3ba25ad3_302b5221bd" tabindex="-1" value="">
</div>
A blog card allows you to show an image, a title and an expandable content with a preview text. You can use the later to add a "Read the full story" link which leads to an ajax box with your blog post. The basic structure looks like this:
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/blog/image.jpg" alt="Image alt">
</div>
<div class="card-content">
<span class="card-title activator black-text">Blog post title <i class="mdi-navigation-expand-less right"></i></span>
</div>
<div class="card-reveal">
<span class="card-title black-text">Blog post title <i class="mdi-navigation-expand-more right"></i></span>
<p>
A short text describing what this blog post is about. You can add various elements here,
but it's a good idea to keep it nice and short.
</p>
<p><a href="ajax/blog-posts/blog-post.html" class="ajax-link">Read the full story</a></p>
</div>
</div>
Configuring your contact form is very simple. Just open the php/config.php file and
edit the following lines.
<?php
$me = array(
'email' => 'your@email.com',
'name' => 'Your Name'
);
If you are familiar with SMTP technology, you can enable it in the same php/config.php
file. Sending email with SMTP proves to be a little bit more reliable, so consider learning more about it.
The following is an example using a Gmail account.
$smtp = array(
'enabled' => true,
'host' => 'smtp.gmail.com',
'username' => 'your.account@gmail.com',
'password' => 'password',
'port' => 587,
'tls' => true
);
You can always ask your hosting provider about your SMTP settings.
Required input fields must have a class="required" attached to them.
Contact form is using toasts to notify the user
about various statuses of the form. For instance, if user inserts an invalid email address, the form
will ask him or her to verify it. These messages can be configured in scripts/config.js file
under the toastMessages key:
var Wata = {
...
// Various toast messages
toastMessages: {
fillInRequiredFields: 'Please fill in the required fields',
enterValidEmail: 'Please enter a valid email address',
messageSent: "Your message has been sent. We'll get back to you soon.",
somethingWrong: 'Something went wrong, try again. Error: '
},
...
If your message contains an apostrophe or a single quote, make sure it's wrapped in double quotes,
like the messageSent message. Otherwise, feel free to use single quotes.
To show the point where your company is located, you need to go to Google maps page and look for your location. After finding the desired point and zoom level, take a look at the url field. You will see something like this
https://www.google.com/maps/place/Los+Angeles,+CA,+USA/@34.0196096,-118.31719,16z/data=!4m2!3m1!1s0x80c2c75ddc27da13:0xe22fdf6f254608f4
Note the following part @34.0196096,-118.31719,16z. These are your:
Now, open the scripts/config.js file, find the following lines towards the bottom
of the script and substitute the values with yours:
var Wata = {
...
// Google map position and marker name
googleMaps: {
lat: 34.0549946,
lng: -118.2475384,
zoom: 16
}
};
You can take advantage of Skype's buttons to ease your customer's way of reaching you. By simply adding the following code, you allow the user to open the skype app and start chatting with you right away.
<a href="skype:username?chat"><i class="fa fa-skype"></i> Skype contact</a>
If you want to allow a direct call, just change ?chat to
?call.
Touch icons are the icons of your web-site that are displayed on various mobile devices. For example, if someone wants to add your site to their home screen, they will view the icon you include. There are quite a few formats you need to handle, inculding iPhone, iPad, Android devices and Microsoft devices. To help you with this process, you can use a touch icons generator web-site, for example realfavicongenerator.net.
After you're done generating your icons, leave the favicon.ico in your root directory and
place everything else in favicons/ directory. Make sure the
href paths are correct, for example:
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
Huge thanks to all the awesome people who create and share their beautiful works.