## 1. Overview - Welcome!

Thank you for purchasing Boomerang. We are glad to announce you that the new version of Boomerang is the result of a great work wich came from a strong passion for making things simpler and more flexible. There are still plenty of great ideas that will be implemented very soon.

Boomerang 2 - MultiPurspose Template is a complete solution for businesses, corporates, creatives, real estate agencies, job portals, model agencies, news and magazines, schools and colleges, medical institutions. This template contains a variety of features that can be adapted for any situation. We have included, also, a shop template for those who want to start selling products in a nice and efficient way.

## Latest versions

# | Version | Date of release | Details
--- | --- | --- | ---
1 | 1.0 | 06-10-2014 | Initial release

## What is included

Once purchased, unzip the compressed folder to see the directory structure of Boomerang. You'll see something like this:

        boomerang/
        ├── assets/
        │   ├── bootstrap/
        │   ├── ...
        ├── css/
        │   ├── global-style.css
        ├── font-awesome/
        ├── images/
        ├── js/
        │   ├── jquery.js
        │   ├── wp.app.js
        │   ├── wp.swicther.js
        │   └── ...
        ├── less/
        │   ├── buttons.less
        │   ├── global-style.less
        │   ├── mobile-nav.less
        │   ├── shortcodes.less
        │   ├── theme.less
        │   ├── variables
        │   ├──├── variables.less
        │   ├──├── ...
        └── index.html
        └── about.html
        └── ...

assets - Contains all the plug-ins we used in this template
css - Contains the compiled version LESS styles unified in one file (global-style.css)
docs - Contains the documentation that will help you modify/customize this template
font-awesome - Contains all the Font Awesome icon fonts
images - The place where all the images are stored
js - Contains all the necessary files to make the website to work smoothly and the config file (wp.app.js) where all the initialization are done.
less - The folder you were looking for. All you need to customize your website is located within this folder. You will love the simplicity we brang to the process of customization.

## Supported browsers

Since Boomerang is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.
Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

| Chrome | Firefox | Internet Explorer | Opera | Safari
Android | Supported | Supported | N/A | Not Supported | N/A
iOS | Supported | N/A | Not Supported | Supported
Mac OS X | Supported | Supported | Supported | Supported
Windows | Supported | Supported | Supported | Supported | Not Supported

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Feature | Internet Explorer 8 | Internet Explorer 9
--- | --- | ---
`border-radius` | Not supported | Supported
`box-shadow` | Not supported | Supported
`transform` | Not supported | Supported, with `-ms` prefix
`transition` | Not supported
`placeholder` | Not supported

Click here for more info on Bootstrap official website

## Getting started

To start working with Boomerang you can use a basic _template-basic-css.html or _template-basic-less.html (we recommend to use the less template version only for development purpose, so you can test less modification directly on your browser), or take the completely functional pages included in this package.
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.
CSS Version: Our style is represented by a single file named global-style.css which can be found in the CSS folder. It contains all the needed styles and it is identical with the less files, the single difference is that, for performance reasons, we have unified all the LESS files in the single CSS file.
LESS Version: You can find all the required files in the LESS folder. You will see that the customization is incredibly easy to do since all variables are located in a single file (variables.less) and all variable names are commented.
Use LESS if you want to modify Boomerang. We built it Bootstrap way so you won't find big difference. Use less/variables.less to modify different styles, use theme.less to remove needless components. For more info about compiling LESS files, click here
If you want to start from scratch, the best way is to use our template where all startup files are already included and ready to be used. You can find template.html file both for CSS and LESS version in the root folder.

## Basic template

Note that the basic template does not come with any additional plugin installed. It contains only the essential styles and script - Bootstrap, Font Awesome, Boomerang global style and UI Kit. To install a plugin or implement a feature go to the Components or Widgets section where you will find more details for this matter.

##### _template-basic-css.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="robots" content="index, follow">
        <title>Boomerang 2 - MultiPurpose Template</title>

        <!-- Essential styles -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="assets/fancybox/jquery.fancybox.css?v=2.1.5" media="screen">

        <!-- Boomerang styles -->
        <link id="wpStylesheet" type="text/css" href="css/global-style.css" rel="stylesheet" media="screen">

        <!-- Favicon -->
        <link href="images/favicon.png" rel="icon" type="image/png">

        <!-- Required JS -->
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.min.js"></script>
    </head>

    <body>

    <!-- Here comes the page content -->

    <!-- Essential JS -->
    <script src="js/modernizr.custom.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.metadata.js"></script>
    <script src="js/jquery.hoverup.js"></script>
    <script src="js/jquery.hoverdir.js"></script>
    <script src="js/jquery.stellar.js"></script>

    <!-- Forms -->
    <script src="assets/ui-kit/js/jquery.powerful-placeholder.min.js"></script>

    <!-- Assets  -->
    <script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script>
    <script src="assets/hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
    <script src="assets/page-scroller/jquery.ui.totop.min.js"></script>
    <script src="assets/mixitup/jquery.mixitup.js"></script>
    <script src="assets/mixitup/jquery.mixitup.init.js"></script>
    <script src="assets/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script src="assets/bootstrap/js/tooltip.js"></script>
    <script src="assets/bootstrap/js/popover.js"></script>

    <!-- Boomerang App JS -->
    <script src="js/wp.app.js"></script>
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->

    </body>
    </html>

##### _template-basic-less.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="robots" content="index, follow">
        <title>Boomerang 2 - MultiPurpose Template</title>

        <!-- Essential styles -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="assets/fancybox/jquery.fancybox.css?v=2.1.5" media="screen">

        <!-- Boomerang styles -->
        <link type="text/less" href="less/global-style.less" rel="stylesheet/less" media="screen">

        <!-- Favicon -->
        <link href="images/favicon.png" rel="icon" type="image/png">

        <!-- Required JS -->
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.min.js"></script>
    </head>

    <body>

    <!-- Here comes the page content -->

    <!-- Essential JS -->
    <script src="js/modernizr.custom.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.metadata.js"></script>
    <script src="js/jquery.hoverup.js"></script>
    <script src="js/jquery.hoverdir.js"></script>
    <script src="js/jquery.stellar.js"></script>

    <!-- Forms -->
    <script src="assets/ui-kit/js/jquery.powerful-placeholder.min.js"></script>

    <!-- Assets  -->
    <script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script>
    <script src="assets/hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
    <script src="assets/page-scroller/jquery.ui.totop.min.js"></script>
    <script src="assets/mixitup/jquery.mixitup.js"></script>
    <script src="assets/mixitup/jquery.mixitup.init.js"></script>
    <script src="assets/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script src="assets/bootstrap/js/tooltip.js"></script>
    <script src="assets/bootstrap/js/popover.js"></script>

    <!-- Boomerang App JS -->
    <script src="js/wp.app.js"></script>
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->

    <!-- LESS JS -->
    <script type="text/javascript">
        // LESS options
        less = {
            env: "development",
            logLevel: 2
        };
    </script>
    <script src="js/less.js"></script>

    </body>
    </html>

## Features

Feature | Description
--- | ---
Mobile ready | Our template is ready to work on any device resolution.
40+ Prebuild pages | With over 40 prebuild pages, now you have everything you need to start you website fresh and with no difficulties.
Over 300 icons | Font Awesome is the best option when it comes for scalables and vectorial icons.
Beautiful media gallery | Open photos, videos and other externat content in a nice and modern lightbox.
Fully Customizable Headers | Each page can have its own custom header with different height and background image or slider.
Interactive Elements | Counters, pie charts, horizontal progress bars, icon progress bars, elements with animation
Portfolio | Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns
Blog Masonry Layout | Make your blog page display in masonry layout
LayerSlider ($15 value) | Create a responsive (mobile friendly) or fullwidth slider with must-see-effects
Retina Ready | This theme includes high resolution icons
Multiple Sidebars | Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns
Slide Bar Menu | Boomerang comes with an amazing side menu widget area.
Modern, Professional Design | This theme is designed by a team of professional designers focused on user-experience and unique design style.
Fully Responsive | Boomerang is a fully responsive template and works perfectly on all screen sizes and mobile devices.
Extremely Customizable | Unlimited colors and sizes for all elements, 500+ Google fonts and a robust backend offers a solution for a variety of business or personal uses.
Flexible Layout | Use our demo layout or create your own visually different experience using our modular shortcodes
Modular Shortcodes | Get creative with unlimited combinations of easy-to-use shortcodes and quickly create any type of page you like.
Perfect Code | Coded in HTML5, CCS3 and jQuery, this skillfully constructed theme is 100% valid.
Modular Contact Page | You can set any combination between Google maps, Contact Form and regular content.

NOTE: If you want to find out more about the included components, please click here

## 2. CSS, LESS - Structure

Boomerang is built with LESS. All variables used cand be found within the variables folder. You will find many files in there. They contain variables values for each color for the predefined styles (ex: blue, red, dark), but the structure is all the same.

We use LESS only for development. All the compiled styles can be found within the CSS folder. They are organized and each style contains its base color name.

## Variables

All variables are in the variables folder from the LESS folder. All variables lines are commented so you can easily understand what are they for. You can easily modify colors, fonts, sizes, border radiuses, heading sizes, navbar elements and much more.

Next, we will explain the most important things you need to know before starting to customize your website.

#### Main colors and backgrounds

There are 4 important colors that we used in this template for components, buttons and so on: base, alternative base, light and dark. Each color is represented by a class(base, base-alt, light, dark) which can be applied on many HTML components to change backgrounds (see the pricing page so you can see what we mean by that).

In the next table we will include all the background color variables:

Variable name | Description | Class name
--- | --- | ---
bgBase | The base color of the website (ex: blue) | `.base`
cBaseContrast | The color used on bgBase backgrounds | ``
bgAlt | The alternative base color (ex: green) | `.base-alt`
cAltContrast | The color used on bgAlt backgrounds | ``
bgLight | The light color (ex: gray) | `.light`
cLightContrast | The color used on bgLight backgrounds | ``
bgDark | The dark color (ex: black). | `.dark`
cDarkContrast | The color used on bgDark backgrounds | ``
bgLightGray | The lighter color used for alternating section backgrounds. | `.light-gray`
cLightGrayContrast | The color used on bgLightGray backgrounds | ``
layoutBg | The main layout background color applied on the whole body element | N/A
headerBg | Used for the main header when available. See header 3 example from the style builder. | N/A
footerBg | The main footer background color. | N/A
footerBg | The main footer background color. | N/A

There are many more color variables included. We mentioned only the important ones. You can find them in the "Advanced customization" area from variables.less file.

## Customize template and compile LESS files

Next, you will find all the necessary steps needed to create a new customized stylesheet. If you are not experienced with LESS, we suggest you follow our instructions so everything goes smoothly.

#### Important files from the less folder:

File name | Description
--- | ---
global-style.less | Containes all the imports and responsive media queries. This unifies all the needed styles in a single file (global-style.css)
theme.less | This is the place where all the styles cand be found, except buttons and shortcodes
buttons.less | All the buttons classes cand be found within this file
shortcodes.less | We used this file to customize some of the Bootstrap components styles
variables.less | The place where all the variables can be found

#### Tools needed:

- Code editor: We recomment Sublime Text 3, but any other text editor should work just fine. Download it here
- LESS compiler: We recomment Koala App. It's one of the best we found out there and it has some great functionalities that will help you a lot. Download it here
- Boomerang 2 - MultiPurpose Template: Be sure you have created your work enviornment and unpacked the template's content in there.

#### Other info

The important folders you will work with are less and css. LESS folder containes all the variables and styles, while CSS containes only the unified and compiled version of less files in css format.

In less -> variables you will find many files. You will only use variables.less. The other files are used for each pre-defined styles.
The variable file is formed from 2 sections: Easy customization (we have included all the important variables so you can easily change their values) and Advanced customization (we have included all the variables that we considered that won't be modified so often).

That's all. Now let's get to the customization part:

#### Customize and compile

1. Open Koala App and include the Boomerang root folder. Seek the global-style.less and open it. When you press "Compile", it automatically creates a css folder and puts the compiled file with the same name and .css extension. After that, as long as you keep the Koala App opened in this state and have the "Auto Compile" option checked it will re-compile this file each time you make modifications in it or a dependency file and save it. So that's a really cool feature if you don't want to create a LESS enviornment for this. For those who want to work with LESS files in their project we will explain more in depth in a separate section.
2. Open Sublime Text 3 and include the Boomerang root folder
3. Open variables.less. You will see that each category of variables (backgrounds, colors, header, layout etc) is very well delimited and commented so you can easily figure out what are they doing.
4. Now, this is the part where you will play and create you own design. Change colors, background, fonts (choose any font from Google Fonts library and import it within this file), border radiuses, navbar etc.
5. After you are done, save all the files. If the global-styles is not already compiled, go in Koala App and compile it. We recommend before compiling to select from Output Style the "Compress" option. It will compress the css file so it will decrease a lot the KB number.

This was just a brief introduction about creating a custom style. You can find more about how to customize each component in the "Template Customization" section.

## 3. Assets

Boomerang 2 is loaded with great features and new plug-ins. All this can be found within the assets folder. They are nicely organized so you can easily find them whenever you want. Next, we will present all the plug-ins used in Boomerang 2:

Plugin name | Description
--- | ---
Animate | A cross-browser library of CSS animations. As easy to use as an easy thing. http://daneden.github.io/animate.css
Bootstrap | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http://getbootstrap.com/
Easy Pie Chart | Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. http://rendro.github.io/easy-pie-chart/
Fancybox | Modern lightbox for media showing. http://www.fancybox.net
Hover dropdown | Boostrap extension that makes navabar dropdown toggable on hover. It can be easily deactivated if not needed.
Layer Slider | LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
Masonry | It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. http://masonry.desandro.com/
Milestone counter | Milestone counter is for animating numbers in certain intervals. |
Mix it up | jQuery plugin for applying filters on elemnts, such portfolio projects.
Page scroller | Easy and important scroll-to-top functionality
Owl carousel | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. http://owlgraphic.com/owlcarousel/
Responsive mobile nav | Boomerang 2 comes with two mobile navs. The first one is the default Bootstrap collapse navbar. The second one is a customized mobile nav made especially for Boomerang 2 which is more intuitive and works much better on smaller devices. You can easily switch to one or another.
Sky forms | Sky Forms Pro is a set of beautiful form elements with large amount of javascript features: validation, masking, modals, ajax submit, datepickers. It allows you to create forms of any complexity and for any needs: login, registration, contacts, review, order, comment, checkout, etc. http://voky.com.ua/showcase/sky-forms-pro/
Social buttons | Responsive social buttons with full funtionality. Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container. http://kurtnoble.com/labs/rrssb/
Timeline | We have included a reposnive timeline layout for those who want organizing events or news in a timescale format.
Video JS | Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video. http://www.videojs.com/

## What should i keep

Many of you won't need every single plug-in included in this template. That's why we worked on making this easier for you to select only the things you need and implement them easily into your project. We made a short list with what should you keep in order to have a fully function website including only the most importat assets.

1. Bootstrap
2. Fancybox
3. Hover dropdown
4. Owl carousel
5. Sky forms
6. UI kit

That is the list with the essential assets you should keep no matter what. Anyway, we recommend not to remove anything definively. We haven't included all the assets in every page. Most of the assets are included only in the pages they are used. You can find more info about installing each asset on "Components" and "Widgets" sections.

## Linking the wp.app.js file

Every asset has its initalization script in the wp.app.js file. We recommend not to remove anything, unless you are sure about what you do.

For keeping it clean, our suggestion is to do the same thing when you add some other plug-ins you need and add the initalization scripts in wp.app.js file.

## 4. Template customization

Now it is time for us to tell you all the little secrets you need to know before starting customizing the template. We have included lots of freatures and possibilities for you so you can optimize any component as you want. You will see this by the time you will play with this template. We will start from the top and finish with the bottom.

## Set a new base color

Most of you won't need to modify the layout too much, but rather to replace only the base color with the one you need. First, take a look on the "CSS, LESS - Structure" chapter before staring here, if you didn't already.

1. Now, all you need to do is to open less -> variables -> variables.less
2. Copy and pase all the contents from one of the example files (ex: variables-red.less, NOT variables-dark/flat/bw).
3. Replace the `@bgBase` variable value with the color you want (HEX or RGB/RGBA)
4. Follow the same steps from "Customize/compile LESS files"

## Boxed or fluid

You can choose to make your website fluid or boxed. That's a really easy thing to do.

#### Boxed layout

On the `body` tag, add the class `.body-boxed`

    <div class="body-wrap body-boxed">
        ...
    </div>

## Set a background image on body

## Headers and navbars

As you could see in the style builder, we have included 3 different headers + 1 header customized for cover pages with image background. Soon, there will be even more header structures, but for now we will show how to implement and customize these ones.

Each header contents can be found in the headers folder. Choose the one you want then copy-paste it in your website header section.

#### Navbar customization

To change navbar background color, text color, fonts, sizes you will need to open variables.less again an change the variable from the table below. After you are done, follow the steps from "Customize/compile LESS files".

See the image with all the variables

Variable name | Description
--- | ---
navbarBg | The main navbar wrapper background
navbarElementBg | The navbar element background
navbarElementBgHover | The navbar element background on hover
navbarElementBorderColor | We used this file to customize some of the Bootstrap components styles
cNavbarElement | The navbar element text color
cNavbarElementHover | The navbar element text color on hover
navbarToggle | The color of the mobile nav collapse button
navbarDropdown | The navbar dropdown wrapper backgroun
navbarDropdownElementHover | The navbar dropdown element backgroun
navbarDropdownElementBorder | The border color between dropdown elements
cNavbarDropdown | The navbar dropdown text color
cNavbarDropdownHover | The navbar dropdown text color on hover

#### Navbar shadow option

You can easily drop a shadow below the navbar wrapper by adding `navbar-shadow` on the navbar-wp element.

    <div class="navbar navbar-wp navbar-shadow">
        ...
    </div>

#### Navbar arrow option

You can easily apply an arrow when the dropdown is opened by putting `navbar-arrow` on the navbar-wp element.

    <div class="navbar navbar-wp navbar-arrow">
        ...
    </div>

See the image example

#### Sticky navbar option

You can easily apply an arrow when the dropdown is opened by putting `navbar-arrow` on the navbar-wp element. We used Bootstrap's affix functionality so you can easily set any offset value and navbar configuration.

    <div class="navbar navbar-wp navbar-fixed affix-top" data-spy="affix" data-offset-top="150" role="navigation">
        ...
    </div>

## Mobile navigations

Boomerang 2 comes with two mobile navigations: One is the Bootstrap's default and the second one is the one we wanted to implement in this version - Boomerang navbar. The reason ... we wanted an easier and more intuitive mobile navigation especially for touch devices.

You will find in the headers folder from the pakache root two versions for each header file: header-standard-1 and header-standard-1-alt. The structure is identical, but the mobile nav is different. In the files with "alt" termination is used the new Boomerang mobile nav, while in the other ones is the Bootstrap's default.

See the image with the mobile nav versions

#### Bootstrap mobile nav

For the Bootstrap's mobile nav you won't need to modify anything, but we want to show you the difference between the two nav versions so you can easily opt the the one that fits your project requirements.
Search for `.navbar-toggle`. This is the button element used to do all the action.

    <!-- Mobile menu button -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-bars icon-custom"></i>
    </button>

#### Boomerang mobile nav

Search for `.navbar-toggle`. This is the button element used to do all the action. Remove the existing one and replace with the following:

    <!-- Mobile menu button -->
    <button type="button" class="navbar-toggle navbar-toggle-mobile-nav dl-trigger hidden-sm hidden-lg">
        <i class="fa fa-bars icon-custom"></i>
    </button>

Add the scripts below on the bottom of your page, as seen on any layout page from the package. This is responsible for the Boomerang's new mobile nav behavior.

    <script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script>
    <script src="assets/responsive-mobile-nav/js/jquery.dlmenu..autofill.js"></script>

That's all you need to do

## Top header

You have the option to include a top header above the page navbar (ex: header-standard-3). You can choose the for the white or the dark version. The colors can be modified in the variables.less from the variables folder.

See the white top header example image
See the dark top header example image

Variable name | Description
--- | ---
topNavBgWhite | Variable used for the white/light top header background
cTopNavWhite | The white/light top header text color
cTopNavLinkWhite | The white/light top header link color
cTopNavLinkHoverWhite | The white/light top header link color on hover
topNavBgDark | Variable used for the dark top header background
cTopNavDark | The dark top header text color
cTopNavLinkDark | The dark top header link color
cTopNavLinkHoverDark | The dark top header link color on hover
topNavTextSize | Set the top header font size value
topNavTextWeight | Set the top header font weight value (400, 500, 600, 700)
topNavTextStyle | Set the top header text transform option (capitalize, uppercase, lowercase)

* For compiling the LESS files, follow the same steps from "Customize/compile LESS files"

#### Light top header

    <div class="top-header">
        ...
    </div>

#### Dark top header

For switching to the dark top header add `.top-header-dark` class as below:

    <div class="top-header top-header-dark">
        ...
    </div>