CarRepair Docs

CarRepair HTML template

Created: 19.11.2016
By: MWTemplates
Email: support@modernwebtemplates.com

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via my user page contact form. Thanks so much!

Download Package Content

You can find the following folders in the download package

  • "documentation" folder contains this documentation.
  • "HTML" - folder contains actual template with all of HTML, JS and PHP files. It's content will be displayed below.
  • "PSD" folder contains all of PSD files.

HTML folder content

  • "css" folder contains CSS files. You can find out more about CSS files in HTML Structure section of this documentation.
  • "fonts" folder has all of the custom fonts that are used in this template, such as icon fonts, font awesome, social icons etc.
  • "images" folder contains all of the images that are used on the template pages. It has several subfolders:
    • "events" folder contains images for events page.
    • "gallery" folder contains images for isotope carousel galleries and other subpages.
    • "parallax" folder contains background images for parallax sections.
    • "partners" folder contains images for partners carousel.
    • "shop" folder contains images for shop pages.
    • "team" folder contains photos of team members.
  • "img" folder contains all of the images that are used in CSS files for template styling (such as patterns, preloader etc).
  • "js" folder contains javascript files that are used in this template. It has "vendor" subfolder that containss all of the thirdpart plugins and libs. Go to Sources and Credits section to get the list of the thirdpart libs and plugins.
  • "mailchimp" folder contains PHP scripts for MailChimp subscribe widget.
  • "twitter" folder contains JS and PHP scripts for Twitter widget.

HTML Structure

This HTML Template is based on Twitter Bootstrap v3.3. It is compatible with a IE9 browser and all other modern browsers.

It has several main section classes that may or may not be present on the page (depending on certain page). You can use it depending on your needs. They are:

  • "ls" - light_section - section with white background.
  • "ls ms" - light_section muted_section - section with light grey background.
  • "ds ms" dark_section muted_section - section with dark grey background.
  • "ds" - dark_section - section with dark color background.
  • "cs" - color_section - section with the main template color background.

Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:

  • "page_topline" class - contains some contact information, social icons etc.
  • "page_toplogo" class - contains logo in various header layouts.
  • "page_header" class - contains site Main Menu.
  • "intro_section" class - contains homepage main slider.
  • "page_map" class - contains google map.
  • "page_breadcrumbs" class section - contains site navigation (breadcrumbs).
  • "page_content" class section - used for main content section.
  • "page_footer" class section has footer widgets.
  • "page_copyright" class section contains copyright information.
  • "preloader" div element that is located at the bottom of HTML page is a page preloader. Remove it if you do not need a preloader on your pages.

CSS Files and Structure

There are four main CSS files in this HTML Template. The first one is a standard Bootstrap v3 CSS file. The second CSS file is "animation.css" library, which contains various animation classes that are used in this template.

The third file is "main.css" and it contains all of the specific stylings for the pages. The file is separated into the following sections:

  • bootstrap overrides - Here we override some of the predefined bootstrap styles.
  • vertical margins and paddings - Here we set up vertical margins and paddings for the main sections of our HTML Temlpate.
  • general styles - In this section we set up a base template styles, such as links color, general section styles.
  • icons - styles for icons, inside buttons, headings and paragraphs
  • buttons - styles for template buttons.
  • common sections styles - common styles for general template sections:
    • light section - .ls
    • grey section - .ls.ms
    • dark section - .ds
    • darkgrey section - .ds.ms
    • color section - .cs
  • Subpages - styles for template subpages.
  • Boxed layout - styles for boxed version of the template.
  • Header - styles for template header.
  • Footer - styles for template footer.
  • Intro Slider - styles for template header.
  • main menu (min 768px) styles - styles for desktop version of the main menu.
  • main menu mobile styles - styles for mobile version of the main menu.
  • widgets - In this sections we styled all the major widgets.
  • shortcodes - In this section we styled all of template's shortcodes.
  • utilities - some helper classes for margins and paddings etc.
  • plugins - Styles for plugins that we used in our template:
    • Owl Carousel
    • FlexSlider
    • prettyPhoto
    • Easy pieChart
    • toTop
    • Isotope Portfolio

Fourth file is "fonts.css" that has styles for all of our icon fonts that we used in our template.

Changing template layout

<0p>To change template layout from wide to boxed you need to do two things:

  1. add "boxed" class to div with ID "canvas" HTML element
  2. add "container" class to div with ID "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container"> 
		... 
	</div>
</div>

To add pattern in boxed layout just add one of the following predefined CSS classes to div with ID "canvas" HTML element:

  1. pattern1
  2. pattern2
  3. pattern3
  4. pattern*

Example:

<div id="canvas" class="boxed pattern2"> 
	... 
</div>

To add top and bottom margins for boxed version just add class "top-bottom-margins" for div with id "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container top-bottom-margins"> 
		... 
	</div>
</div>

Changing the main color

If you want to change the main color for this template, just replace all instances of main color hex code with hex color value that you want inside the "main.css" file.

Also you can change "main.css" to "main2.css" or "main3.css" in your HTML code inside "head" which are the same with the exception of predefined colors within it.

Changing Light and Dark versions

You can change a class for any section inside "#box_wraper" div to change your template version from light to light grey or dark.

Available section classes are:

  • ls - light background section
  • ls ms - light section, muted section (light grey background)
  • ds - dark background section
  • ds ms - dark muted section (dark grey background section)
  • cs - background color section

Examples:

<section class="ls" id="content"> 
	... 
</section>

You can change to:

<section class="ds ms" id="content"> 
	... 
</section>

Changing page preloader

To change page preloader just replace preloader.gif file which is in img directory to any other GIF file.

JavaScript Files

Following files are located in "js" subfolder

All of JS files (except "main.js" file and "switcher.js" file) are compressed in a single "compressed.js" file for best perfomance.

If you do not want to use "compressed.js" file, you can replace following code at the bottom of your page: 

	<script src="js/compressed.js"></script>
	<script src="js/main.js"></script>

with this one:

	<script src="js/vendor/jquery-2.2.4.min.js"></script>
	<script src="js/vendor/bootstrap.min.js"></script>
	<script src="js/vendor/jquery.appear.js"></script>
	<script src="js/vendor/jquery.hoverIntent.js"></script>
	<script src="js/vendor/superfish.js"></script>
	<script src="js/vendor/jquery.easing.1.3.js"></script>
	<script src="js/vendor/jquery.ui.totop.js"></script>
	<script src="js/vendor/jquery.localscroll-min.js"></script>
	<script src="js/vendor/jquery.scrollTo-min.js"></script>
	<script src="js/vendor/jquery.parallax-1.1.3.js"></script>
	<script src="js/vendor/jquery.easypiechart.min.js"></script>
	<script src="js/vendor/bootstrap-progressbar.min.js"></script>
	<script src="js/vendor/jquery.countTo.js"></script>
	<script src="js/vendor/jquery.prettyPhoto.js"></script>
	<script src="js/vendor/jquery.countdown.min.js"></script>
	<script src="js/vendor/isotope.pkgd.min.js"></script>
	<script src="js/vendor/owl.carousel.min.js"></script>
	<script src="js/vendor/jquery.flexslider-min.js"></script>
	<script src="js/vendor/jflickrfeed.min.js"></script>
	<script src="js/vendor/jquery-ui.min.js"></script>
	<script src="js/vendor/price-slider.min.js"></script>
	<script src="js/vendor/jquery.cookie.js"></script>
	<script src="twitter/jquery.tweet.min.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

Setup Widgets and Shortcodes.

Widgets and Shortcodes that need to be setup are:

  • Google Map
  • Flickr
  • Twitter
  • Subscribe
  • Contact form
  • Search

To setup Google Map do the following:

First of all, you need to get a Google map API key by following this link:

Go to https://developers.google.com/maps/documentation/javascript/get-api-key#key,click button "GET A KEY" and follow instructions from Google.

Then scroll to the bottom of your contact page and find this code: 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

and replase existing key with your API key.

To provide a Google map address, title, description and marker image do the following:

  • Scroll to section with 'id="map"' or class="page_map" attribute and add or replace value of data-address attribute with your address.
  • Then find inside map section div with class "map_marker_description" and edit following tags:
    • Replace "Map title" text in H3 tag to provide map title.
    • Replace "Map description text" text in P tag to provide map description.
    • Replace "src" attribute of IMG tag with class "map_marker_icon" to change a map marker or remove IMG tag if you do not need a custom map marker.
<section class="page_map" data-address="sydney, australia, Liverpool street">
	<!-- marker description and marker icon goes here -->
	<div class="map_marker_description">
		<h3>Map Title</h3>
		<p>Map description text</p>
		<img class="map_marker_icon" src="images/map_marker_icon.png" alt="">
	</div>
</section>

To setup a Flickr Widget do the following:

  • Go to http://idgettr.com/ and search for your Flickr ID
  • Edit your "main.js" file. Just replace ID with your Flickr ID

To setup a Twitter Widget do the follofing:

  • Go to https://dev.twitter.com/apps and register a new application to receive Consumer Key, Consumer Secret Word, User Token and User Secret Word
  • Edit lines from 27 to 36 of your "twitter/index.php" file. Place your secret keys and words onto the corresponding placeholders.
  • Edit "number of tweets" and "username" in your "main.js" file.
  • Delete cache xxx.json file in "twitter" folder if it exists.

To setup a MailChimp Subscribe form do the following:

Edit the "mailchimp/store-address.php" file:

Line 19: replace "your_apikey" with an API Key retrieved from here:

http://admin.mailchimp.com/account/api/

Line 23: replace "my_list_unique_id" with the List Unique Id obtained by going to: http://admin.mailchimp.com/lists/.

Click the "settings" link for the list - the Unique Id is at the bottom of that page.

To setup a Contact Form do the following:

  • Edit lines from 7 to 22 of your "contact-form.php" file. Place your email and message text.
  • Edit lines from 1 to 7 of your "search.php" file. Place your message text at appropriate variables.

Setup Animation for any HTML elements

To set up animation for the single element, just add class "to_animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

Available values for "data-animation" attribute:

  • fadeIn
  • fadeInLeft
  • fadeInUp
  • fadeInRight
  • fadeInDown
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • slideRight
  • slideUp
  • slideLeft
  • slideInDown
  • slideInLeft
  • slideInRight
  • expandUp
  • slideExpandUp
  • expandOpen
  • bigEntrance
  • hatch
  • tossing
  • pulse
  • floating
  • bounce
  • pullUp
  • pullDown
  • stretchLeft
  • stretchRight
  • moveFromLeft

This template has the following PSD files:

1.1_home_page.psd
2.1_about.psd
2.2_contacts.psd
2.3_booking.psd
2.4_staff.psd
2.5_team_member.psd
2.6_faq.psd
2.7_pricing.psd
2.8_404_page.psd
3.1_gallery.psd
4.1_blog.psd

Following images are used in this template:

Credits and Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

Fonts:

Template Scripts

Images

NOTE: The images used in the template are not included in the main download file, they are only for the preview purpose.

© CarRepair 2016 | Created with by MWTemplates