Webmarket HTML Template Documentation

By ProteusThemes

  • Version: 1.4.1
  • Created: 2013-08-17
  • Last modified: 2013-12-18

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

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


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

Google Fonts

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

Icon Fonts

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

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:

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.


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.


Color Themes of the Template

Out of the Box

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

theme

Default Theme

theme

Grass Green Theme

theme

Oil Green Theme

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

pattern-1

pattern

pattern-2

pattern

pattern-3

pattern

pattern-4

pattern

pattern-5

pattern

pattern-6

pattern

pattern-7

pattern

pattern-8

pattern

pattern-9

pattern

pattern-10

pattern

pattern-11

pattern

pattern-12


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 = "[email protected]";

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]

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.