FiveLayer

Responsive HTML Template for Web Hosting

• created: 07 Jul 2014
• by: Audemedia
• http://templateforest.net/user/audemedia

Thank you for purchasing the FiveLayer HTML template.

How to get help:

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

The FiveLayer template is a responsive HTML template based on Zurb Foundation. 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 is Open Sans from Google Web fonts and if you like to change it with a usual web safe font (arial, verdana etc.) you must remove from section of each page the line and also change the font-family class of various elements of file /style.css from font-family: 'Open Sans', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; to font-family: Verdana; (for example)

FiveLayer using the following CSS files:

style.css 
The main css file

css/flexslider.css
The styling of slider in home page.

Also you can setup how in many columns you want to display the portfolio items (2,3 or 4), to define if you need the categories filter or a simple pagination and to enable or disable the comments in portfolio single page.

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/foundation.css
The main responsive grid stylesheet, from Zurb foundation framework. It is recommended to make any changes/additions to style.css and keep foundation.css as it is. In this way, you can easily upgrade the grid framework when Zurb Foumdation releases an update.

css/normalize.css 
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. You don't need to touch anything in this file.

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/simpletextrotator.css
The stylesheet for word rotator in home page (above of slider)

css/slicknav.css
The stylesheet for menu on small screens and mobiles.

css/tooltipster.css
The stylesheet for tooltips in shared hosting page.

FiveLayer using jQuery framework with various additional plugins. Also, there are all the js files of Zurb Foundation framework (in folder /js/foundation/) in case that you want to use them.

js/foundation.min.js
The main js file that hook the supported scripts of Zurb Foundation framework

js/foundation folder
is a directory that contains each plugin of Zurb Foundation framework as a single JavaScript file, so you can check out the source code and, if you'd like, include certain ones but not others, or do your own minifying.

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

js/vendor/easyResponsiveTabs.js
The script that creates the tabs (and return them in accordion in scmall screens and mobiles) in domains page.

js/vendor/gmap3.js
js/vendor/markerwithlabel.js
The script that creates the map in the header of contact page. For setup your address, find it in google maps and then open contact.html and go to line 302 (var address =). The markerwithlabel.js creates the label below the pin on the map. You can style it in style.css on line 423 by change the values of .gmaplabels class.

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

js/vendor/jquery.animateNumber.min.js
The number counters in home page (FiveLayer in numbers section). The hook of the script exists in js/custom.js file on line 150. You can change there the end number and the delay of counting until this number.

js/vendor/jquery.flexslider.js
The slider in home page. The hook of the script exists in js/custom.js file on line 21. You can change there various options. Don't forget to use images on exactly same dimensions to have a beautiful vertical slider

js/vendor/jquery.js
The jQuery framework

js/vendor/jquery.simple-text-rotator.js
The word rotator effect in home page slider. The hook of the script exists in js/custom.js file on line 30.

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

js/vendor/jquery.tooltipster.min.js
The tooltips in shared hosting page. The hook of the script exists in js/custom.js file on line 124.

js/vendor/modernizr.js
Modernizr gives you finer control over the experience through JavaScript-driven feature detection. You don't need to touch anything here.

js/vendor/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/vendor/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 4.

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