DataServ - Material Design Hosting Template - 20 script

# DataServ

## Material Design Hosting Template

Support

- by: Audemedia
- http://themeforest.net/user/audemedia

Thank you for purchasing the DataServ HTML template.

How to get help:

We will respond to buyers' questions via the contact form on our profile.

We run support Weekdays 9am-5pm GMT. You can expect a response within 12 – 24 hours Monday to Friday. We’ll respond to questions outside of these times & weekends occasionally, but please don’t expect a response outside our stated hours.

What's included in item support
- Answering questions about how to use the item
- Answering technical questions about the item
- Help with defects in the item or included third party assets
- Item updates to ensure ongoing compatibility and to resolve security vulnerabilities

What's NOT included in item support
- Item customization
- Installation of the item
- Support issues about your web hosting, server environment, or software

Thanks for your purchase!

Included Folders
DATASERV-HTML:The main HTML template
PSD:Various PSDs of the graphics that included in HTML template
WHMCS:Contains the integrated WHMCS template / order form that provided as add-on. For installation info just open the readme file.

### HTML Files

The DataServ template is a responsive HTML template based on Bootstrap 3. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

If you would like to edit the layout of any elements in whole template, you would do the following:

Open the file /style.css, so that is extremely easy to change any css attributes. Simply find the related and commented heading in this css file and make your magic.

The font for body text and for headings (h1, h2, h3 etc.) is Roboto from Google Web fonts too. If you like to change these fonts with a usual web safe font (arial, verdana etc.) you must remove from section of each page the line
link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'
and also change the font-family classes in the file /style.css from font-family: 'Roboto', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; to font-family: Verdana; (for example)

### CSS Files

DataServ using the following CSS files:

style.css
The main css file

css/animate-custom.css
The main library for animation effects that you see on various pages. It is a custom version of popular animate.css that we make some customizations for smoother animations on scrolling. Also the initial animate.min.css, included in css folder, so if you want to use the originak just replace the 'css/animate-custom.css' with the 'css/animate.min.css' in the HTML files.

css/font-awesome.min.css
The css file for font-awesome icons. To see all the available icons and instructions on how to use them click here

css/bootsrap.css, css/bootsrap-theme.css
The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css and bootsrap-theme.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.

css/block_grid_bootstrap.css
A custom addition to bootstrap grid. It provides the possibility to create grids with any columns that you want.

css/owl.carousel.css
The base stylesheet for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category)

css/owl.theme.css
The stylesheet that define the appearance of carousels. You can change saome things, for examople the color/size of pagination bullets.

css/flexslider.css
The stylesheet for the slider that the template using on http://themes.audemedia.com/html/dataserv/index-slider.html.

css/slicknav.css
The stylesheet for menu on small screens and mobiles.
css/tablesaw.css
The stylesheet for responsive tables (exists in dedicated servers page)
css/justifiedGallery.min.css
The gallery grid that the template using on http://themes.audemedia.com/html/dataserv/datacenter.html.
css/magnific-popup.css
The lightbox effect on gallery that the template using on http://themes.audemedia.com/html/dataserv/datacenter.html.
css/odometer-theme-default.css
The animated numbers that the template using on various pages (Shared Hosting, Affiliates).

### JS (javascript) files

DataServ using jQuery framework with various additional plugins.

js/bootstrap.min.js
The main js file that hook the supported scripts of Bootstrap 3 framework

js/contact-script.js
The scripts that validates the contact form script in the contact page

js/hoverIntent.js
A helper file that make clickable each main menu options on touch screens.

js/custom.js
The js file that hooks/initiliaze various scripts that the template using on all pages (Superfish Menu, Responsive Menu, Back to top, Animated Effects on scroll etc.)

js/jquery.min.js
The jQuery framework

js/jquery.slicknav.min.js
The menu on small screens and mobiles. The hook of the script exists in js/custom.js file on line 17.

js/jquery.flexslider-min.js
The script for the slider that the template using on http://themes.audemedia.com/html/dataserv/index-slider.html.

js/jquery.jquery.easing.1.3.js
The script that creates the effect on slider slides.

js/jquery.form.min.js
The script that creates the material design effect on form fields.

js/jquery.justifiedGallery.min.js
The script of the gallery grid that the template using on http://themes.audemedia.com/html/dataserv/datacenter.html.

js/jquery.magnific-popup.min.js
The lightbox script of the gallery grid images.

js/morphext.min.js
The script of the word rotator that exists in the header of http://themes.audemedia.com/html/dataserv/datacenter.html

js/odometer.min.js
The script for the animated numbers that the template using on various pages (Shared Hosting, Affiliates).

+

js/retina.min.js
The script that you can use to serve high-resolution images to devices with retina displays. For instructions on how to use it visit http://imulus.github.io/retinajs/

js/ ripple-effect.js
The script that creates the material design ripple effect on buttons.

js/owl.carousel.min.js
The script for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category). The hook of the script for each page exists in js/custom.js file on line 39.

js/superfish.js
The main navigation menu script with it submenus. The hook of the script for each page exists in js/custom.js file on line 5.

js/waypoints.min.js
The script that hooks the statistics when the specific section is in viewport. You don't need to touch anything here.

js/jquery-ui.js
The script that using in VPS slider order and creates the handler and the slider experience.

js/tablesaw.js
The script that convert the tables to responsive layout in smaller screens.

js/wow.min.js
The script that using for animations (in combination with animate.min.css) while scrolling the page

### Where i can define the prices, cpu, ram etc. that i see in order slider?

You need to define the various values that displaying when you drag the slider handler, in the javascript that exists in the end of the page
When you increase or reduce the value of max: 6 variable in javascript, the slider will automaticvally fits the new number on the slider. But you need to edit the variables of vpsnameval, cpuval, memoryval and put there your data.

### How can i add animation while scrolling to an item?

You can do this, by using "wow" class and the class for the specific animation.
For example : <div data-wow-duration="1000ms" data-wow-delay="200ms" class="wow zoomIn">
- the "wow" class hooks the animation when the specific div is in viewport
- the "zoomIn" class is the animation effect. You can see the effects taht you can assing here : http://daneden.github.io/animate.css/
- the data-wow-delay="200ms" is a variable that we can assign to define the time that the specific div displaying.
- the data-wow-duration="1000ms" is a variable that we can assign to define the duration of the effect to be done.

### Where i can define my e-mail account to receive the messages from contact form?

It is in sendmail.php, line 17 ($site_owners_email=)

### I have purchased the video that i show in preview from VideoHive. Now?

Just save the 3 video formats (mp4, ogv, webm) that you found in video zip in the /video folder, and update the paths(source src=) in index-video.html.

### How to integrate with Mailchimp?

- login to your mailchimp account, create a list, go to signup forms of this list, choose embedded forms.
- There, mailchimp has a textarea with the embedded code that you need to put on your site.
- Just copy the form action url (see screenshot). Open the files in the template and paste the action url where is mine. (change it).

### How to disable the onscroll animations?

- Just remove the wow.js script from pages and also remove the related hook from js/custom.js

### Where i can find the icons that i see in the demo?

You can download them from :
Google Material Design Icons