# Webmarket HTML Template Documentation

By ProteusThemes

- Author: ProteusThemes
- Support: Ticksy Tickets
- Template on ThemeForest: Webmarket - HTML Template

- Version: 1.2
- Created: 2013-08-17
- Last modified: 2013-10-02

# General

Thank you for purchasing the Webmarket HTML template crafted by ProteusThemes.

Below you will find the documentation how to use the template.

# Scaffolding

### Build on top of Twitter Bootstrap

The Webmarket HTML template is build on top of SASS Twitter Boostrap HTML framework. All the components of the Bootstrap framework were left as they are during the development, so the template is upgrade-safe. The only file which has been changed and is a part of Bootstrap is `_variables.scss`, inside the `./lib/_variables.scss` directory.

Find the documentation for Twitter Boostrap HERE.

You are allowed to use any component in your themes available in Twitter Bootstrap. However, for the performance reasons some of the components were commented out in the `.lib/bootstrap.scss` file. Uncomment the components you need in your project and recompile the project using `$ compass compile` when you cd to the root of the template in terminal.

### Bonuses / Plugins / Tools used

- FREE BONUS: Slider Revolution - find the documentation for the slider HERE
- jQuery - JS library
- Bootstrap JS - JS functions for Twitter Bootstrap
- CarouFredSel - carousel jQuery plugin
- $.goMap() - Plugin for Google Maps JS API
- Isotope - Plugin for magical layouts
- prettyPhoto - Lightbox for images and media
- Underscore.js - Library of JS helper functions
- Modernizr - Feature detection JS library
- Bootstrap Tour - Tour JS plugin
- Compass and SASS
- jQuery UI for price range slider/filter

### Google Fonts

There are two custom fonts from Google Fonts used in the Webmarket HTML template:

- Pacifico - for the logo "Webmarket"
- Open Sans - for the headings and links

### Icon Fonts

There are two icons fonts used for maximum quality of the icons in the Webmarket:

- FontAwesome - library of 360+ icons
- Zocial - social icons

### Source design PSD files

You will find 2 PSD files included in the folder `./extras/` . There are master layers in each of them for the individual page layouts.

### Images used for template preview

The images available for template preview aren't included in the HTML template because of the licences, but you can buy them at photodune.net:

- Smiling Group
- Thirst
- Hotair balloon
- Beach Drink
- Mobile App Mock-Up Essentials Bundle

All the other images are from the Horsefeathers clothing company and we use them in our demo/preview site with their permission, but we cannot include them in the HTML pack for download.

# JavaScript

### Full page width slider

The jQuery premium plugin Slider Revolution is used for the slider on the front page. Find the documentation for the plugin HERE.

All the code for the slider is very well documented in the `index.html` file. The slider is triggered in the file `js/custom.js` around line 107. Feel free to customize the parameters by your needs. You will find further explanation in the documentation of the slider.

### Twitter Feed

In the blog pages you will find the Twitter Feed in the sidebar. This is in fact the embedded timeline from the Twitter. To get it for your page, go to the Twitter Widgets and create a new widget for your site, grab the HTML code and paste it in the template.

### Carousels

You can turn your static images / HTML blocks to carousel using the code below:

    <div class="arrows">
          <a href="#" class="icon-chevron-left" id="sliderNavigationLeft"></a>
          <a href="#" class="icon-chevron-right" id="sliderNavigationRight"></a>
    </nav>
    <div class="carouFredSel" data-nav="sliderNavigation">
        <div class="slide">
            one item
        </div>
        <div class="slide">
            another carousel item
        </div>
    </div>

Note the `data-nav` attribute in the div with a class "carouFredSel". You have to put here the ID of the navigation arrows, without the 'Right' and 'Left' at the end, as shown above. There are two optional attributes for the same element (with a class `carouFredSel`):

- `data-responsive` - possible values: [true|false]
- `data-autoplay` - possible values: [true|false]

### Bootstrap Tour

Bootstrap Tour is used in the `shop.html` page. It was not intended at first to include it to the final zip, but at the end we decided to include it anyways. How to use this plugin can be found on the official page here: Bootstrap Tour. We call this plugin in file `js/custom.js` around line 370.

### Flickr Widget

On the blog pages in the sidebar you may notice the Flickr Widget. Like the Twitter Feed, this is the Flickr service and the code can be generated on their page. With one exception - you should delete a part of the code to achieve the same effect as on our demo site. Follow these steps:

1. Select "An HTML badge", click Next
2. Choose the content you would like to display, click Next
3. On Step 3: buddy icon: no, number of items: 10, size: square, orientation: none
4. On Step 4: just click Next
5. When you get the code you should copy ONLY the code inside div with ID `flickr_badge_uber_wrapper`
6. That's it!

For more information about the Flickr badge API see this link.

### Filters on shop page

There are some advanced filters for filtering the products in the file `shop.php`. We use Isotope for this filtering.

Eveything about filtering functionality of the Isotope is explained here. In the shop filters we use the `data-target` attribute to select the products on the right. Class `selectable` is added to all the links on the left which can be selected in the same group with OR condition. For detailed filtering (AND conditions) you should add the class `selectable detailed`.

To really understand in depth what is going on I suggest reading through the code in `js/custom.js` between lines 240 and 370. There is also jQuery UI slider for additional filtering over the price. However, the price range filter can be changed with almost no effort at all. At the beginning of the file `custom.js` there you will find variable `var WebmarketVars`. You can change four settings there: currency symbol, currency position, price range and price step.

### Affix & Scrollspy Menu

Webmarket is using the Bootstrap's Affix menus. This is the menu you can find in the page `features.html` and `about-us.html`. More about Affix and Scrollspy (for updating the current active menu element) can be found in the Bootstrap documentation.

### Modal Windows - Register & Login

The code for the modal windows is located at the very bottom of the each HTML file, just before all the Javascript files are called. They start like:

        <!--  ==========  -->
        <!--  = Modal Windows =  -->
        <!--  ==========  -->

        <!--  = Login =  -->
        <div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-header">
            [...]

### Bootstrap JS

The documentation for all the other Bootstrap's JavaScript components can be found here.

# Visual Elements

## Color Themes of the Template

#### Out of the Box

There are 4 different color themes available out of the box:

### Default Theme

### Grass Green Theme

### Oil Green Theme

### Gray Theme

You can find the home pages in different color variants in the files `index.html`, `index-grass-green.html`, `index-oil-green.html` and `index-gray.html`. All you have to do is to call other file than `main.css` in the `<head>` section of HTML documents to the corresponding color.

#### How to Change the Theme to Entirely New Color

If you are familir with Compass/SASS, the easiest way to change the color theme is to change the variable `$theme` in the beginning of the `lib/main.scss` file. Just set the variable to the new hex color code, recompile the CSS files and you are all set:

    $theme : #bada55;

In the file `main.scss` you will find even more color variables to change and completely customize the appearance.

## Boxed and Wide Version

The default version for the theme is wide version. If you want the boxed version, you have to add the class `boxed` to the `<body>` element:

    <body class="boxed">

We have prepared 12 different patterns for the boxed version of the theme. Just add the additional class `pattern-#`, where `#` is a number between 1 and 12, for example:

    <body class="boxed pattern-4">

Here is a showcase of all the patterns available for the boxed version:

### `pattern-1`

### `pattern-2`

### `pattern-3`

### `pattern-4`

### `pattern-5`

### `pattern-6`

### `pattern-7`

### `pattern-8`

### `pattern-9`

### `pattern-10`

### `pattern-11`

### `pattern-12`

# PHP Contact Form

The working contact form has been added to the Webmarket template in version v1.1.

The form is written in PHP and can be found in `./contact.php`. Be sure that your server supports PHP and has all the required settings for build-in `mail()` PHP function.

All you need to do to enable the PHP form is to point the user to the `contact.php` instead of `contact.html` and change the following variable in the `./incl/send-email.php` to your actual email address:

    <?php

    /* set the email of the recipient (your email) */
    $recipient = "your.email@example.com";

The message will be sent directly from your website to the email address you have specified above and will have the following form:

    ----- Info about the sender -----

    Name: [name]
    Email: [email]
    Website: [website]

    ----- Message -----

    [the actual message from the user which sent the email]

# Miscellaneous

### Custom Changes

If you need advanced cusomizations on the theme, we are available for that as well.

Just let us know your needs to: info@proteusthemes.com

For your general orientation: the prices for modifications start at the 200 EUR + VAT.

### Changelog

Changelog of the theme is available on ThemeForest website.