Camaro - Documentation

Version 1.0

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

Getting Started


For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.


Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

In this archive will not images, that you can see in demo pages, every images were replaced by service.


Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.

                    2141 : #status {  background-image: url(../images/preloader.gif); }

If you don’t need the preloader, you can delete div with id preloader and comment/remove some lines in js/custom.js file.

                    <div id="preloader">
                     <div id="status">&nbsp;</div>
                     //  $('#status').fadeOut(defaults.speedAnimation);
                     //  $('#preloader').delay(defaults.speedAnimation)
                     //      .fadeOut(defaults.speedAnimation/2, function() {

                       // some js code goes there
                   //     });


To change the favicon of your site, you need to load a new image in a site root or to point out a new address of the image.

                    7 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

Color themes

There have already been created a few special classes for the body tag, which stylize a color scheme.

  • skin-red - a default red color scheme;
  • skin-green - a default green color scheme;
  • skin-yellow - a yellow color scheme;
  • skin-aqua - an aqua color scheme;
  • skin-blue - a blue color scheme;
  • skin-orange - an orange color scheme;
  • skin-sand - a sand color scheme;
  • skin-brown - a brown color scheme;
  • skin-gray - a grey color scheme.
                    <body class="skin-yellow"> … </body>

The class skin-red does not point out, it set by default. Also you have to include css/themes.css file into the head tag.

The chosen theme changes the background of buttons, the background of marked blocks, icons, the background of a marked point in the portfolio, the color of marked phrases, the color of links and some other elements. In the css/themes.css file there are settings for each color scheme. You can change current schemes or create your own scheme by analogy.

Modular grid

The Template is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content in created modules.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. All features and opportuntes you can use in this project. If you need create new table or add accordeon or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, bars, chars, pricing table and so on.


To highlight one of the columns with another color it’s necessary to add class some of classes:

  • .highlight
  • .asphalt
  • .highlight.night
  • .highlight.darker
  • .bg-sand
  • bg-violet
  • bg-beach
  • bg-warning
  • bg-info
  • bg-success
  • bg-danger

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

To look at the Pricing page you can notice a color border. You can add it adjusting a border-top or border-top-color or border-bottom and border class to the column.


You can change the thickness, color and style of the separator.

                    1915 : .border-top-color {
                      border-top:4px solid #e7543d;

                    1919 : .border-top {
                      border-top: 1px dotted #EAEAEA;

                    1927 : .border-bottom {
                      border-bottom: 1px dotted #EAEAEA;

You can add a padding as a separator between two vertical blocks. To do it you need to add an empty div block with a separator class:


Some text bla-bla…

Some text bla-bla…

By default it has transparent background color and it adds only padding, but you can stylize it.

                    549 : .separator {
                      height: 1px;
                      background-color: #2D2D2D;

Paddings and Margins

If it’s necessary to add a padding on the top or bottom or both, it’s enough to add one of the classes that will set up padding:

  • .padding-top-0
  • .padding-top-big
  • .padding-top
  • .padding-top-medium
  • .padding-medium
  • .padding-bottom
  • .padding-bottom-big
  • .padding-bottom-huge
  • .margin-top
  • .margin-top-big

You can change the size of paddings in the css/style.css file or you can add a new class in which you set up user’s paddings.

                    463 : .padding-top {

                    471 : .padding-medium {
                     padding-top: 90px !important;
                     padding-bottom: 90px !important;


To adjust the content inside a structural element it’s necessary to add the classes text-left,text-center or text-right to the parent tag. To adjust vertically use the class vmiddle.

Class equal sets up the same height to all inserted blocks, thanks to which you can adjust the content inside blocks vertically. Example you may see in Pricing page.


Susana Jacobs


On every page has a 'banner' block with text (icon) or button, maybe video background. All of this features you can see on sections pages.

Section sizes

By default, sections may have 5 height sizes with appropriate classes:

  • .full-size = windows height;
  • .huge-size = 660px;
  • .large-size = 480px;
  • .medium-size = 310px;
  • .small-size = 200px;

This first content section should has home class. Look at an example:


About Company


Background Parallax

To add background image in home section with parallax effect you have to add one div with obligatory class bg and additional class with css property background-image. At last, add data-stellar-background-ratio attrubite, with value from 0 to 1. An example:

                    1805 : .bg-about {


As you have watched, parent home block has additional class pattern. Thanks to him, you can change the a half-transparent background. To set up a pattern it’s necessary to add the pattern class to the block.

By default there have been created a few classes with different alpha-transparent patterns. These classes are overlay, overlay.grey-bg and overlay.color-bg. You can change the color and transparency in the css/style.css file or add a new class setting up user’s settings.

                    403 : .overlay:before {
                      opacity: .3;
                      background-color: #191919;

                    415 : .overlay.grey-bg:after {
                      opacity: .9;
                      background-color: #323232;

                    420 : .overlay.color-bg:after {
                      opacity: 1;
                      background-color: #282828;


To set up a video as a background of the section, you need to add one more ytvideo class to the block and also you need to add an obligatory data-property attribute to it. In this attribute you need to point out the Youtube video address and also the second it starts playing. If the video doesn’t play, it’s recommended to add class with static image. In this case there will appear a static image instead of the video.


For a separate image an additional unique class is required. It points out the path to the file. By default there have been created several standard classes. In the css/style.css file you can create your own classes or change the current ones

                    1753 : .bg-faq {
                    1757 : .bg-pricing {
                    1761 : .bg-testimonials {
                    1765 : .bg-sitemap {
                    1769 : .bg-contact {

While testing take into account that the video won’t play on the local disk on your computer and your mobile devices. We don’t recommend to add a great number of sections with video-backgrounds as all video files and the template start loading at the same time.

To enable video sound you have to toggle one parameter js/custom.js file:

                    1343: $this.mb_YTPlayer({
                      mute: false,

Section Slider

Also instead of static image or background video or only one slide you have a great opportunity to add full width slider in home section. It's really easy and uses standart markup, lets look an example:


Add li tags with inner markup, every li means one slide. Parent block should have class .oneslider. Additional block with class .slidebar need to add pagination arrows and pagination dots. More about sliders you can see in appropriate section of documentation.


Over a dozen reusable components built to provide dropdowns, boxes, dividers, forms, headings, lists, tabs and much more.


Like bootstrap collapse plugin you can create accordion. An example has shown on faq pages. Other examples look at this page


Lorem ipsum dolor sit amet, consectetur adipiscing elit?


Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero aceverus dona venenatis faucibus. Mellentesque habitant morbi tristique et malesuada famesac turpis egestas.



It uses for quoting blocks of content from another source within your document. Wrap blockquote around any HTML as the quote.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Inline boxes for text and some simple info. There are few background class, which were described an appropriate section you can use. An example code:


Info Message Box



Twitter Bootstrap has many classes for customize links and buttons, all of this class you may use in your projects, but they are have new style.



In the shortcode_columns.html you can see various of columns and alignments. All this stuff do it with help of bootstrap class, like col-md-6 or col-sm-3 and so on.


To customize header of any section or add button into it or some other decoration line, you have to use this structure:


For more details look at shortcode_dividers.html page.


Sometimes you need to highlight first letter of the text. You can use class first-letter:


A liquam commodo gravida magna eget tincidunt. Fusce nisi augue, malesuada in commodo quis, euismod quis orci. Integer vitae nisl non augue ullamcorper blandit.

Marked Text

For highlighting a run of text due to its relevance in another context, use the mark tag with different classes:

  • .label-default
  • .label-warning
  • .label-info
  • .label-success
  • .label-inverse

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.


Under this project you have a few variants of tabs. In shortcode_tabs.html page all of this variants have shown. Also in bootstrap page you can see more other examples.


It's not a secret that you can use usual marked and unmarked lists using ol and ul tags appropriately. But, if you want to add icons before every item of unmarked list, you have to add class icon-list and add markup for every icon. As you know icons may be 3 varians, see icons section.

  • Copy
  • Comments


There are many differents elements you may use in your projects, lets view all of them.

At start in every content page goes breadcrumbs with previous and actual links. Markup of this:


Classes .breadcrumbs for container block and .breadcrumb for numerical list is obligatory. Another classes and markup may changing.

Call To Action

Tiny and simple code block, with one sentence and purchase button you can use for any purposes. Almost in every page you can see mark up this block.


In this project you can use 3 types of icons:

  • default images, which are located in the sprite images/icons.png. This icons can not change sizes or colors. You should add obligatory class .custom-icon and second additional class with needed icon. Many examples you can see in elements_icon_combinations.html file.
  • Official Camaro Icons. All icons you can see in elements_camaro_icons.html file. To use it:
  • Font Awesome Icons. This template has included Font Awesome icons. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. A very large variety of icons, which you can use on your site. Look icons and choose what you need. After that, write tag i with needed class. You can paste icons in any needed place on your website. Icons inherit all styles from parent block and from block, which are nested.

The second and the third type of icons can change size, color. By default there are 4 classes to change size of it:

  • .icon-big or .fa-big
  • .icon-norm or .fa-norm
  • .icon-small or .fa-small
  • .icon-extra-small or .fa-extra-small


Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser area. There can be several counters. To add a counter to the site, use the following structure:

                    <div class="num">
                     <ins data-num="850.57" data-increment="10.55" data-fractional="2">0</ins><sup>$</sup>

Create the div block with the class num and set an ins tag in it, after add obligatory attributes to it:

  • data-num - the final meaning to the size of which the counter will increase;
  • data-increment - how necessary it is to increase a counter during every iteration;
  • data-fractional - the number of important figures after a comma. If the number is integral, this attribute can be omitted or you can point out 0.
                    3450 : .num {
                      font-size: 55px;
                      line-height: 1;
                      color: #acacac;
                      font-weight: 100;

Also you have an opportunity to create numeric lines, which shows you process of increasing meaning with filling lines. Some examples you can see in elements_horizontal_bars.html page. General structure of this type:

Java Script


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. May be 2 variants:

  1. Pie Chart Icons;
  2. Pie Chart Text.

Java Script


Java Script

The first block has icon instead of text, the second - percentage text. It does not matter how many charts you use into one page, all are them will work. data-percent attribute sets percents.

Vertical Bars

jqBarGraph is easy-to-use jQuery plugin for displaying your data as bar graphs. This project has 4 different charts. All of them you may see in elements_vertical_bars.html file.


Web Design


To use audio player, you have to point src attribute:



If you need to show historical events by chronology you have to add history class to parent block and creates events by adding new blocks with classes row and vline. Inside it write any code, which you need. For more details look at the elements_timeline.html or history.html pages. Have a look an example:

December, 28

News Begins Publication


Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero ace venenatis faucibus.


Plans for a Cable Network


Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero ace venenatis faucibus.

April, 3

For the first event you should add class firstrow and for the last event you do not need to use vline class.


Sliders allow you to save space, animate and decorate your site. In the template there can be several sliders with different settings, which not depends on bootstrap settings.

The slider occupies the whole section by adding a special class slider or oneslider (for one-image gallery) to the parent block and some additional markup in it. In each of them there can be 12-column system with various elements. For every sliders we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.

One-image Gallery

A responsive one-image gallery has a markup:


    Welcome to Camaro


    Our Photo Gallery

  1. We add class oneslider into a div block;
  2. you can add/change 2 data-attribute parameters in this div:
    • data-fx - the slider flip effect, crossfade or slide;
    • data-auto - autoscroll, true or false.
  3. create a familiar Section structure;
  4. ul – an unmarked list with slides;
  5. Sliders li elements can contain align classes;
  6. There is a content with a 12-column markup and a random set of elements in the slider;
  7. Also the div .slidebar can contain two links – switching slides back and slider pagination with the same class .pagination.

Cursors and solid circles are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements. This period of time and the speed of switching can be changed.

                    6 : sliderInterval: 6000,
                    7 : sliderSpeed: 600,

Ribbon carousel

Restricting the number of visible items to a minimum and maximum amount. You should just add obligatory class ribbon to use this type of slider. Markup and an an example you can see in elements_photo_gallery.html file on the top.

Slider in general

To create some slider on the webpage, which will be responsive and will scrolling images, like ribbon, you should add obligatory class .slider for parent div and into it add unmarked ul list with li items. Example you can see on many project page, for example elements_photo_gallery.html file.


Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 18 pages for blog were html-coded and represented for using. A few variants for left or right sidebar for single page, also were considered 8 types of posts, standart blog and interactive animated list of articles, using excellent Masonry plugin.

  1. Single Post Photo;
  2. Single Post Text;
  3. Single Post Audio;
  4. Single Post Gallery;
  5. Single Post Link;
  6. Single Post Quote;
  7. Single Post Vimeo;
  8. Single Post YouTube.

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.


About 13 pages marked up specifically for the ecommerce catalog. For catalog were created 6 variants:

  1. Catalog Grid;
  2. Catalog Grid Sidebar Right;
  3. Catalog Grid Sidebar Left;
  4. Catalog List;
  5. Catalog List Sidebar Right;
  6. Catalog List Sidebar Left.

All of this pages contain maincontent with products and 4 pages has filtering sidebar with additional settings. Also project has product.html page with more detail fully information about single product with rating, comments, description, tables and gallery. When you choose needed product you should order him. For this purposes were created additional 5 pages:

  1. Cart;
  2. Cart Empty;
  3. Checkout;
  4. Confirmation;
  5. and Compare page;

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

Google Maps


In HTML file you should write only single line, with unique id attribute.

To set Google map you need to edit the js/custom.js file. To get the longitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the js/custom.js file.

                    1353 : var cmyLatlng = new google.maps.LatLng(51.5134476, -0.1159143);
                    1355 : zoom : 13

But, if you want to add more markers on the map, you should write another and a little bit more code. In file js/custom.js file, find function contactMap and change all code:

                    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
                    var myLatlng2 = new google.maps.LatLng(-22.33882,126.044922);
                    var mapOptions = {
                     zoom: 5,
                     center: myLatlng
                    var map = new google.maps.Map(document.getElementById('contact-map'), mapOptions);

                    var marker = new google.maps.Marker({
                     position: myLatlng,
                     map: map,
                     title: 'Hello World!'

                    var marker2 = new google.maps.Marker({
                     position: myLatlng2,
                     map: map,
                     title: 'Hello World!'

                    // add more markers …


You can organize your work according to the preset filters. At first, you create works navigation with category:


Items of this list have obligatory class filter and data-filter attribute. Data-filter helps you divide works on needed category. After navigation create container with class mix-list.


    Drops Branding

 ...    ...

Each of mix block should has filtering class: branding, drawing and etc. Some words about your work. When you click one of the description, full gallery or new page or modal window will open.


You can add countdown block on your page. Example you can see on coming_soon.html page.

                    <div id="countdown"></div>

Countdown settings

You can set the date in the js/custom.js for the countdown.

                    8: countdownTo: '2015/03/28', // Change this in the format: 'YYYY/MM/DD'

Visualization settings

To customize words days, hours, minutes and seconds, you have to edit css/style.css.

                    4334 : #countdown span   {
                      font-size: 135px;

                    4357 : #countdown ins  {
                      font-size: 14px;

Error Pages

For special pages, like 404 or 505 or under construction use a few another markup. At first, you should add class page404 for HTML tag. This pages do not contain header and footer like in another pages. For more details information look at 404.html, 505.html and under_construction.html. By analogy of this pages you may create suitable and needed for your purposes pages.



The feedback can contain the following blocks:

  • <input type="text"> - a one line standard text area;
  • <input type="email"> - a text area for an e-mail address;
  • <textarea> - a more than one line area for a message;
  • <input type="submit"> - a sending form button;
  • <h4 class="succs-msg"> - delivery report.

Let’s have a look at the example of creating the countdown on the site.


Contact Form


Мessage was sent

All the areas must be in the form tag. The tag must have obligatory attributes:

  • action - it shows the path to the php-file which deals with processing the form, it remains the same by default;
  • method - post remains the same by default;
  • id - a unique identifier, send-form remains the same.

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message with the class succs-msg. This block can be in any place of the page. You can set up an external view in the css/style.css file and it takes styles according to what element the succs-msg class is added to, in our case – to the h4 heading. If areas are filled in the incorrect way or aren’t filled at all, the class invalid is added to the area that hasn’t been validated. The invalid area style can be changed.

                    3632 : input:invalid,
                      box-shadow: none;

                    3670 : .succs-msg {
                      margin-left: 3.5rem;

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', ''); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Camaro'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Camaro'); - the topic of a letter for the sender;
  • line 32 $letterToAdmin = … - the template of a letter for the administrator;
  • line 44 $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: line 13: $headers .= "From: feedback@Camaro.local\r\n";. \r\n obligatory to save at the end of the line.

MailChimp Subscription Form

Newsletter settings

You need to change the Mailchimp's List URL in your html file for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.


To change the validation messages, you will have to edit js/custom.js.

                    9 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.', // text after successful subscribing
                    10 : errorText: 'Please, enter a valid email' // text, if email is invalid

Visualization form settings

To change the background color and color of subscription form, you will have to edit css/style.css.

                    7877: .footer input[type=text], .footer input[type=email] {
                      background-color: #333333;

Input Mask

For every input field you may opportunity to create mask. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...

Default masking definitions

  • 9 : numeric
  • a : alphabetical
  • * : alphanumeric

Inside this project you may find phone-codes.json file which suited in js/phone-codes.json. Into it there are many phones mask for every country, find needed and use it.

Show/Hide Password

Sometimes you want to see yours password when typing. You can add this opprotunity into your form with input[type=password]:


Only you have to add login-password class. That's all! By default for show/hide password uses FontAwesome icons, you may change it in js/custom.js file:

                    $(this).hideShowPassword(false, true, {
                     toggle: {
                      element: '<a href="">',
                      className: 'fa form-control-feedback toggle-password'
                     states: {
                      shown: {
                       toggle: {
                        className: 'fa-eye-slash',
                        content: ''
                      hidden: {
                       toggle: {
                        className: 'fa-eye',
                        content: ''

Scrolltop Button

To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. Its code is:


To change its external view you need to edit the css/style.css file. You can also change the external view of a cursor by replacing a standard image or creating a path to the new one.

                    2156 : .scrolltop {
                      border-radius: .5rem;
                      width: 60px;
                      height: 60px;
                      left: 65px;
                      bottom: 65px;

                    932 : .scrolltop:before {
                      background-color: #808080;
                      opacity: .1;
                      border-radius: 3px;

Font Settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.

                    6 : html { font-family: 'Arial', sans-serif;  } // or whatever you want (e.g. "Helvetica")

Also you can use Google Font and connect it to your website.

  1. Go to
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):
                                3 : @import url(;
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css:
                                html { font-family: 'Open Sans', sans-serif;  }