Thank you for purchasing the Webmarket HTML template crafted by ProteusThemes.
Below you will find the documentation how to use the template.
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
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
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.
There are two custom fonts from Google Fonts used in the Webmarket HTML template:
There are two icons fonts used for maximum quality of the icons in the Webmarket:
You will find 2 PSD files included in the folder
. There are master layers in each of them for the individual page layouts.
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.
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.
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.
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>
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
data-responsive- possible values: [true|false]
data-autoplay- possible values: [true|false]
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.
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:
For more information about the Flickr badge API see this link.
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
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.
Webmarket is using the Bootstrap's Affix menus. This is the menu you can find in the page
about-us.html. More about Affix and Scrollspy (for updating the current active menu element) can be found in the Bootstrap documentation.
<!-- ========== --> <!-- = Modal Windows = --> <!-- ========== --> <!-- = Login = --> <div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> <div class="modal-header"> [...]
There are 4 different color themes available out of the box:
You can find the home pages in different color variants in the files
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.
If you are familir with Compass/SASS, the easiest way to change the color theme is to change the variable
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.
The default version for the theme is wide version. If you want the boxed version, you have to add the class
boxed to the
We have prepared 12 different patterns for the boxed version of the theme. Just add the additional class
# 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:
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
and change the following variable in the
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]
If you need advanced cusomizations on the theme, we are available for that as well.
Just let us know your needs to: email@example.com
For your general orientation: the prices for modifications start at the 200 EUR + VAT.
Changelog of the theme is available on ThemeForest website.