Camaro - Template Help

Getting Started

Requirements

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.

Installation

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 placehold.it service.

Preloader

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.

css/style.css

                    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>
                    </div>

                    $win.load(function(){
                     //  $('#status').fadeOut(defaults.speedAnimation);
                     //  $('#preloader').delay(defaults.speedAnimation)
                     //      .fadeOut(defaults.speedAnimation/2, function() {

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

Favicon

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.

Highlight

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.

css/style.css

                    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.

css/style.css

                    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.

css/style.css

                    463 : .padding-top {
                      padding-top:90px!important;
                    }

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

Alignment

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

Header

A header tag with the class header creates a header which is on top of the template. It has a 12-column structure like all the sections on the site. The structure of header is not ease, but has many variants and can be added or remove not used pieces of code.

Header can not contain header and footer tags. There are 4 types of header: right, left, centered and simple. In the demo you can choose appropriate for you.

Header contains contact info, logotype, slogan, mega dropdown mainmenu, search field, sidebar menu, basket and login button. All of this interactive and may modified. All of this blocks separate by 2 rows: htop and hbottom.

Header Color Theme

Header may be 2 color variations:

Dark;
Light.

By default you will have light theme, but if you want to change it, add class dark to hbottom div block:

Header may be:

Right version;
Left version;
Center version;
Simple.

In the demo pages you can see all of this examples and choose right for you, removing unused blocks.

By default you will have right version, if you want to change on left just change right-pos to left-pos class for hbottom div block:

…

To change on simple version add header-simple class for header tag:

…

To change on center version add centered class for header tag:

…

Mainmenu

The menu has many links with dropdown lists and a few types, likes table menu or shop menu or sidebar menu.There are many links and columns you can use there. To open the page in a new tab, use target="_blank".

Contact Info

You may write actual phone number and your email address.

                    
                         +5 489 956 128
                         info@camaro.com

Product Cart

In the top of header is product cart with dropdown list of items. You may add new products, customize styles.

                    
                         
                           4 items - $164,50
                          
                           
                            
                             
                             
                              Koppel 417 Crhonograph
                              1 x $67,50

Footer

The footer of the site is created with the help of a footer tag with the class footer. It also contains a 12-column structure and can contain various blocks. The footer of the site can’t contain header and footer tags in itself.

Footer may be 2 color variations:

Dark;
Light.

By default you will have dark theme, but if you want to change it, add class flight to footer tag:

…

Footer may be:

Extended version;
Standart 1 - without the second row;
Standart 2 - without the first row;
Simple - light version, with only last row.

In the demo pages you can see all of this examples and choose right for you, removing unused blocks.

Sections

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:

...

css/style.css

                    1805 : .bg-about {
                      background-image:url(../images/bg/bg-about.jpg);
                    }

Patterns

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.

css/style.css

                    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;
                    }

Video

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

css/style.css

                    1753 : .bg-faq {
                     background-image:url(../images/bg/bg-faq.jpg);
                    }
                    1757 : .bg-pricing {
                     background-image:url(../images/bg/bg-pricing.jpg);
                    }
                    1761 : .bg-testimonials {
                     background-image:url(../images/bg/bg-testimonials.jpg);
                    }
                    1765 : .bg-sitemap {
                     background-image:url(../images/bg/bg-sitemap.jpg);
                    }
                    1769 : .bg-contact {
                     background-image:url(../images/bg/bg-contact.jpg);
                    }

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.

Shortcodes

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

Accordions

Like bootstrap collapse plugin you can create accordion. An example has shown on faq pages. Other examples look at this page http://getbootstrap.com/javascript/#collapse.

                    
                         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.

Blockquotes

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.

Boxes

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

Buttons

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.

Columns

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.

Dividers

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

                    
                         
                          Medium

For more details look at shortcode_dividers.html page.

Dropcaps

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.

Tabs

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.

Lists

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

Elements

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

Breadcrumbs

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

                    
                    
                         
                          
                           
                             Home
                            
                            Shop
                            Garment Bag in Tan Atlantic Leather

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.

Icons

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

Counter

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>
                    </div>

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.

css/style.css

                    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
                         
                         
                          
                          0%

Charts

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:

Pie Chart Icons;
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

Audio

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

Timeline

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:

                    
                    
                         
                          1976
                          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.
                         
                         
                          1982
                          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

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

We add class oneslider into a div block;
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.
create a familiar Section structure;
ul – an unmarked list with slides;
Sliders li elements can contain align classes;
There is a content with a 12-column markup and a random set of elements in the slider;
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.

js/custom.js

                    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.

Blog

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.

Single Post Photo;
Single Post Text;
Single Post Audio;
Single Post Gallery;
Single Post Link;
Single Post Quote;
Single Post Vimeo;
Single Post YouTube.

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

Ecommerce

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

Catalog Grid;
Catalog Grid Sidebar Right;
Catalog Grid Sidebar Left;
Catalog List;
Catalog List Sidebar Right;
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:

Cart;
Cart Empty;
Checkout;
Confirmation;
and Compare page;

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

Modal

Modal windows allow you to show additional information atop the whole content of the page. their selection happens due to adding a random link with a data-popup attribute in which you need point out an id of a necessary modal window.

                    Login

In the template you can use 3 different types of modal windows:

login;
a profile modal window;
a popup media gallery.

Of course, you may use bootstrap markup to create typical modal windows. Use documentation.

Here we use brilliant plugin Magnific Popup. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. You may put any HTML content in each gallery item and mix content types.

The easiest way to create popup media gallery, is add class magnific-wrap for parent block and add class magnific to every link, which you need to show. Attribute href has url to big image. Have a look an example:

                    
                         
                          
                           
                           
                            Becoming
                           
                          
                          
                           
                           
                            Jack Kerouac

There are many examples in this project you may find inside some pages, like gallery or sliders or blog pages. Popup may contain not only static images, but also youtube or vimeo video, or gallery inside another gallery, have a look:

                   Video Link
                    ...
                    Gallery

As you can see for create single gallery for every independent link you have to use data-gallery attribute, where you write array of images, separate by commas. Great and more informative example you can find in works_grid_#.html page.

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.

js/custom.js

                    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 …

Portfolio

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

                    
                         All
                         Branding
                         Drawing
                         Illustration
                         Architecture

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
                            
                            
                             
                              Branding,
                              Logotypes
                             
                            
                           
                          
                         
                         ...
                         
                          
                          
                           
                            
                             
                            
                            
                             C-Sharp 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.

Countdown

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.

css/style.css

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

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

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.

Forms

Feedback

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.

css/style.css

                    3632 : input:invalid,
                       input.invalid,
                       textarea:invalid,
                       textarea.invalid{
                      color:#e7543d;
                      box-shadow: none;
                    }

                    3670 : .succs-msg {
                      margin-left: 3.5rem;
                      line-height:46px;
                    }

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', 'admin@gmail.com'); - 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.

css/style.css

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

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:

                     700:
                    $(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.

css/style.css

                    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.

Go to http://www.google.com/fonts.
Choose the appropriate font.
Click the Quick-use button ().
Choose the styles that you want;
Choose the character sets that you want.
Below that click on the @import tab and copy this line.

Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):

                            3 : @import url(http://fonts.googleapis.com/css?family=Open+Sans);

At last, copy font-family name from Google Fonts website and paste on css/style.css:

                            html { font-family: 'Open Sans', sans-serif;  }

Getting Started

Requirements

Installation

Preloader

Favicon

Color themes

Modular grid

Twitter Bootstrap

Highlight

Paddings and Margins

Alignment

Susana Jacobs

Header

Header Color Theme

Header Layout

Mainmenu

Contact Info

Product Cart

Footer

Footer Color Theme

Footer Layout

Sections

Section sizes

About Company

Background Parallax

Patterns

Video

Section Slider

Shortcodes

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Blockquotes

Boxes

Info Message Box

Buttons

Columns

Dividers

Medium

Dropcaps

Marked Text

Tabs

Lists

Elements

Breadcrumbs

Call To Action

Icons

Counter

Java Script

Charts

Java Script

Java Script

Vertical Bars

Web Design

Audio

Timeline

December, 28

News Begins Publication

Plans for a Cable Network

April, 3

Sliders

One-image Gallery

Welcome to Camaro

Our Photo Gallery

Ribbon carousel

Slider in general

Blog

Ecommerce

Modal

Modal Init

Popup Media Gallery

Becoming

Jack Kerouac

Google Maps

Portfolio

Drops Branding

C-Sharp Branding

Countdown

Countdown settings

Visualization settings

Error Pages