Welcome

Thank you for purchasing our Barber hair template. If you have any questions that are beyond the scope of this help file, please feel free mail us at webmaster@makewebbetter.com.

Barber hair is a HTML5 & CSS3 responsive template created for Barber hair but also can be used for generalised website. Barber hair is best suited for like Doctor Portfolio, Barber hair and Dental etc. It’s fully responsive design and clean, was tested on all major handheld devices. It is a fully responsive, feature rich and beautifully designed to host a website or create online identity. It supports bootstrap framework and intergrated themify icons icon set so easy to customize and develop your own styles. Barber hair is a retina ready so it works nicely on smartphones, tablet PCs and desktops. Easily customisable, 24/7 support time.

General Information

Software requirements

  • Sublime Text 3 used to edit the .HTML, .JS, .PHP, .CSS and .SCSS files.
  • Barber hair used as precompiler for SCSS to CSS convert.

The following scheme displays the theme files structure.

  • Documentation - contains documentation on template cusotmization and support
  • Template - contains the main files of the template which will be uploaded on server.
    • CSS - contains all Stylesheets used for UI.
    • themify icons - contains themify icons files.
    • Fonts - contains themify icon files.
    • Images - contains all the images.
    • Js - contains all javascript library or plugin files.
    • SASS - contains all SCSS and variable files.
    • index.html - contains all UI code.
    • + More.html - contains all UI code.
  • Sources - contains source files.
    • sass - contains .scss files used in template.
  • readme.txt - contains the information about theme

File Strucutre

HTML Structure

This template is based on barber hair and also has a responsive layout. It has a block structure and well commented code so you can easily edit section anywhere.

CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block in your colored style-color.css.

Js Strucutre

This template has dynamic animations, which have been implemented in JavaScript. The JS file is custom.js

Reference File

In this template we have used google font Prata, Orienta. You can learn more on using Google Web Fonts by checking the tutorial on how to work withGoogle web Fonts.

JQuery Plugin:

In this template jQuery libraries and plugins have been used for dynamic animation.

  • aos animate (js/aos.js)
  • Bootstrap-datepicker (js/bootstrap-datepicker.js)
  • Bootstrap (js/bootstrap.js)
  • custom-map (js/custom-map.js)
  • custom (js/custom.js)
  • jQuery (js/jquery.min.js)
  • jQuery.shuffle (js/jquery.shuffle.min.js)
  • jQuery.swipebox (js/jquery.swipebox.min.js)
  • masonary (js/masonary.min.js)
  • owl carousel (js/owl.carousel.js)
  • shuffle (js/shuffle.min.js)
  • smoothscroll (js/smoothscroll.min.js)
  • vivus (js/vivus.js)

Stylesheet (CSS) Reference File

  • animate (css/animate.css)
  • aos animate (css/aos.css)
  • bootstrap (css/bootstrap.css)
  • datepicker (css/datepicker.css)
  • font-awesome (css/font-awesome.css)
  • jquery.ui.timepicker (css/jquery.ui.timepicker.css)
  • owl carousel (css/owl.carousel.css)
  • style (css/style.css)
  • swipebox (css/swipebox.css)
  • themify icon (css/themify-icons.css)

themify icons

themify icons have been used in this template. Learn more about themify icon from themify website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. themify icons are vectors, which mean they're gorgeous on high-resolution displays.

Customization

It is HTML5, CSS3 and Js based template so you can edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system and we have created other grid for layout. See below for more info

Classes of Sections

id="section07" class="site-content appointment" and class="section-title" and class="section-wrap" class is used to creating the out layer of section

                    <code class="language-html">
                      <section id="section07" class="site-content appointment">
                        <div class="container">
                          <div class="section-title mg-bottom-40 text-center">
                            <h3 class="fs-30 site-common-color">make a quick appointment</h3>
                          </div><!-- section-title -->
                          <div class="section-wrap">
                          </div>
                        </div>
                      </section>
                    </code>
                  

.section-title class is used to creating the mail title of section

                    <section id="section08" class="site-content gallery">
                      <div class="container-fluid">
                        <div class="section-title mg-bottom-40 text-center">
                          <h3 class="fs-30 site-common-color">gallery</h3>
                        </div><!-- section-title -->
                        <div id="lightgallery" class="row grid">
                        </div>
                      </div>
                    </section>
                  

.container class is used to creating container for section content

                    <section id="" class="site-content">
                      <div class="container>
                        <div class="section-title">
                          <h3>Secton content element<h3>
                          </div>
                          <!-- section-title-->
                          <div class="section-wrap"> </div>
                        <!-- section-wrap-->
                      </div>
                    <section>
                  

.site-content, .col-lg-6, .col-md-6, .col-sm-6, .col-xs-12 class is used to give background color of section

                    <section id="" class="site-content">
                      <div class="container>
                        <div class="section-title">
                          <h3>Secton content element<h3>
                        </div>
                        <!-- section-title-->
                        <div class="section-wrap"> 
                          <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              Secton content element
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                             Secton content element
                            </div>
                          </div>
                        </div>
                        <!-- section-wrap-->
                      </div>
                    <section>
                  

Upload Document

Unzip package in an empty directory and you will see template folder. In template folder change content according to yours then upload this folder on server root directory.

Help & Support

24/7 Support, Just mail us any issue we will be happy to help.

Or you can email us.

Email - webmaster@makewebbetter.com

Thank you for purchasing Barber hair template. If you have any question that is beyond the scope of this documentation, Please feel free to email to ster@makewebbetter.com.

Barber hair theme

Copyright © 2017 Designed by cedcommerce. All rights reserved.