Carservice - Mechanic Auto Shop Template
Carservice is a responsive and retina ready HTML Template best suitable for auto mechanics, car repair shops, mechanic workshops, car repair services, auto painting, auto detailing, tire and wheel shops or handyman business. The Template comes with Appointment Form, Slider Revolution jQuery plugin, 90 premium car related font based icons, 12 page templates, sticky menu, touch friendly slider and carousels, ajax contact form and more.
PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.
Template Features
- Responsive Layout
- Retina Ready
- jQuery Powered
- Appointment Form
- Slider Revolution Responsive jQuery Plugin (Value of $14) Included
- Streamline Premium Icon Font with 90 Icons (Value of $69) Included
- Premium Images (Value of $33) Included
- Wide and Boxed Layout
- Sticky Menu
- Mobile Touch Friendly Sliders and Carousels
- Ajax Contact Form
- Isotope Gallery
- Parallax Backgrounds
- Google Location Map
- Page Templates
- Home
- Services
- Single Service
- Galleries
- Single Gallery Page
- About Us
- Blog With Sidebar
- Blog 2 Columns
- Appointment Form
- Contact Style 1
- Contact Style 2
- Error 404
- Social Icons Font with 18 Icons to Choose From
- PSD Files Included (Please Contact Us to Receive Perfectly Organized PSD Files)
- Documentation Included
- Valid HTML5 Code
- Crossbrowser Compatible
- Clean Design
CSS Styles
The project uses the following cascade of template styles (in order):
- animations.css - styles for animated elements,
- jquery.qtip.css - default styles for tooltips (overwritten in style.css),
- superfish.css - default styles for superfish menu,
- odometer-theme-default.css - styles for Odometer smoothly transitioning numbers plugin,
- prettyPhoto.css - default styles for prettyPhoto lightbox,
- style.css - base styles for the entire project,
- responsive.css - styles for responsive design (remove it from header to disable responsive),
- reset.css - styles which resets default browsers styles.
All CSS files are located in /style directory.
Javascript Files
Plugins and library:
- jQuery v1.11.2 - jQuery JavaScript Library, http://jquery.com/,
- jQuery migrate v1.2.1 - APIs and features removed from jQuery core, https://github.com/jquery/jquery-migrate/,
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/,
- Isotope v2.2.0 - An exquisite jQuery plugin for magical layouts http://isotope.metafizzy.co,
- jQuery blockUI v2.66 - http://malsup.com/jquery/block/,
- qTip2 - Pretty powerful tooltips, http://craigsworks.com/projects/qtip2/,
- jQuery prettyPhoto v3.1.5 - Simple lightbox alternative, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/,
- jQuery UI 1.11.4 - jQuery User Interface plugin used for tabs and accordions, http://jqueryui.com/,
- jQuery UI Touch Punch v0.2.3 Touch Event Support for jQuery User Interface plugin, http://touchpunch.furf.com/,
- jQuery BBQ v1.2.1, Plugin which provide support for browser histry, http://benalman.com/projects/jquery-bbq-plugin/,
- Odometer v0.4.6, Plugin for Smoothly transitioning numbers, http://github.hubspot.com/odometer/,
- jQuery carouFredSel v6.2.1 - Carousel plugin, http://dev7studios.com/plugins/caroufredsel/,
- jquery TouchSwipe - touch and swipe support for carousel plugin, http://labs.rampinteractive.co.uk/touchSwipe/demos/,
- jquery Transit - CSS transitions & transformations for jQuery, http://ricostacruz.com/jquery.transit/.
Other files:
- jquery.parallax.js - script which supports parallax animations,
- jquery.hint.js - script which supports hints/placeholders for form fields,
- main.js - script contains all executable instructions of jquery plugins, events handlers etc.
All JS files are located in /js directory.
Plugins
Contact form
This project includes a contact form ready for use.
All you need is to configure some constants located in file contact_form/config.php:
- _from_name - name of your e-mail eg. "My Company",
- _from_email - sender e-mail eg. "mycompany@gmail.com",
- _to_name - name of recipient eg. "My Company",
- _to_email - e-mail of recipent eg. "mycompany@gmail.com",
- _smtp_host - your SMTP host eg. "gmail.com",
- _smtp_username - login to your e-mail account eg. "mycompany",
- _smtp_password - password to your e-mail account,
- _smtp_port - port number for SMTP connection (optional),
- _smtp_secure - authorization method (optional) - ssl or tls.
PSD Files
PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.
Fonts used
- Open Sans By Steve Matteson, Apache License, version 2.0
https://www.google.com/fonts/specimen/Open+Sans, - Streamline Icon Font (90 Icons)
http://www.webalys.com/, - Template Icon Font By Multiple Designers, MIT License,
- Social Icon Font By Multiple Designers, MIT License.
Credits
Images
Premium images you can use along with this Template without asking permission (included in downloadable package):
- Mechanic Examining Under Hood Of Car At The Repair Garage By Wavebreakmedia
https://photodune.net/item/mechanic-examining-under-hood-of-car-at-the-repair-garage/10182885, - Inside A Garage By Lightpoet
https://photodune.net/item/inside-a-garage-shallow-dof-color-toned-image/1652234, - Front Disc Brake On Car In Process Of New Tire Replacement By Wanichs
https://photodune.net/item/front-disc-brake-on-car-in-process-of-new-tire-replacement-the/10303480, - Mechanic Adjusting The Tire Wheel At The Repair Garage By Wavebreakmedia
https://photodune.net/item/mechanic-adjusting-the-tire-wheel-at-the-repair-garage/10213619, - Engine By Gudella
https://photodune.net/item/engine/4862315, - Mechanic Pouring Oil Into Car At The Repair Garage By Wavebreakmedia
https://photodune.net/item/mechanic-pouring-oil-into-car-at-the-repair-garage/10219308, - Mechanic with Diagnostic Equipment By SimpleFoto
https://photodune.net/item/mechanic-with-diagnostic-equipment/675598, - Cars In Garage By Rido81
https://photodune.net/item/cars-in-garage/9412718, - Filling Air Conditioning Liquid By Kitzstocker
https://photodune.net/item/filling-air-conditioning-liquid/9826376, - Mechanic Testing Oil In Car At The Repair Garage By Wavebreakmedia
https://photodune.net/item/mechanic-testing-oil-in-car-at-the-repair-garage/10212780.
All other images comes with this Template are licensed under Creative Commons Zero CC0 1.0 Universal (CC0 1.0). You can use it along with this Template without asking permission.
Changelog
25 March 2017, ver. 1.6- phpMailer script update.
- Slider Revolution update (to version 5.4.1).
- jQuery update (to version 1.12.4).
--- html version --- all html files style/responsive.css style/style.css phpMailer directory rs-plugin directory -- added files --- js/jquery-1.12.4.min.js js/jquery-migrate-1.4.1.min.js --- removed files --- js/jquery-1.11.3.min.js js/jquery-migrate-1.2.1.min.js --- php version --- footer.php header.php home.php index.php style/responsive.css style/style.css phpMailer directory rs-plugin directory -- added files --- js/jquery-1.12.4.min.js js/jquery-migrate-1.4.1.min.js --- removed files --- js/jquery-1.11.3.min.js js/jquery-migrate-1.2.1.min.js18 July 2016, ver. 1.5.1
- Fix for appointment form slider box component display issue under IE.
--- html version --- style/style.css --- php version --- style/style.css
09 July 2016, ver. 1.5
- Fix for Google Maps component - Google API key is now required.
- Slider Revolution update (to version 5.2.6).
--- html version --- all html files js/main.js rs-plugin directory --- php version --- footer.php js/main.js rs-plugin directory
05 April 2016, ver. 1.4
- Slider Revolution update (to version 5.2.4).
- Mobile menu child items as collapsible.
--- html version --- all html files fonts/streamline-small/style.css js/main.js rs-plugin directory style/responsive.css style/style.css --- php version --- menu.php fonts/streamline-small/style.css js/main.js rs-plugin directory style/responsive.css style/style.css style_selector/style_selector.js
04 December 2015, ver. 1.3
- Slider Revolution update (to version 5.1.4).
- Fix for our clients carousel loading issue.
--- html version --- home.html index.html js/main.js style/responsive.css style/style.css rs-plugin directory (old version available under rs-plugin-old directory) --- php version --- home.php js/main.js style/responsive.css style/style.css rs-plugin directory (old version available under rs-plugin-old directory)
12 November 2015, ver. 1.2
- Minor styles and code improvements.
--- html version --- post.html js/main.js style/responsive.css style/style.css --- php version --- post.php js/main.js style/responsive.css style/style.css
07 September 2015, ver. 1.1
- New social icons added: houzz, yelp, github, reddit, soundcloud, vk, vine, angies-list.
- Minor styles and code improvements.
--- html version --- all html files fonts/social/styles.css fonts/social/fonts/social.eot fonts/social/fonts/social.ttf fonts/social/fonts/social.woff fonts/streamline-small/styles.css fonts/template/styles.css js/main.js style/responsive.css style/style.css --- php version --- 404.php about.php contact_2.php footer.php header.php home.php post.php service_air_conditioning.php service_belts_hoses.php service_brake_repair.php service_engine_diagnostics.php service_lube_oil_filters.php service_tire_wheel.php fonts/social/styles.css fonts/social/fonts/social.eot fonts/social/fonts/social.ttf fonts/social/fonts/social.woff fonts/streamline-small/styles.css fonts/template/styles.css js/main.js style/responsive.css style/style.css
11 August 2015, ver. 1.0
- First release
Support
Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.
We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.
Need pure HTML files or PHP version?
Theme could work without PHP. Pure html files are located in /www/html directory.
If you would like to use PHP version just use files located under /www/php directory.
FAQ - Frequently Asked Questions
1. How to choose between HTML or PHP version?
Template contains two versions PHP and HTML. If your server supports PHP please choose PHP version as it's more flexible. For example if you'll make change in header you won't need to duplicate it for each page.
If you would like to use PHP version use files located under /www/php directory.
If you would like to use HTML version use files located under /www/html directory.
2. How to set the menu to be sticky?
PHP version
Please replace line 157 in header.php:
<div class="header-container<?php echo (isset($_COOKIE['cs_menu_type']) ? ' ' . $_COOKIE['cs_menu_type'] : '');?>">
with:
<div class="header-container sticky">
HTML version
For each page please replace:
<div class="header-container">
with:
<div class="header-container sticky">
3. How to set boxed layout?
PHP version
Please replace line 50 in header.php:
<div class="site-container<?php echo ($_COOKIE['cs_layout']=="boxed" ? ' boxed' : ''); ?>">
with:
<div class="site-container boxed">
HTML version
For each page please replace:
<div class="site-container">
with:
<div class="site-container boxed">
4. How to set a pattern or background image for boxed layout?
PHP version
Please replace line 49 in header.php:
<body class="<?php echo (isset($_COOKIE['cs_layout']) && $_COOKIE['cs_layout']=="boxed" ? (isset($_COOKIE['cs_layout_style']) && $_COOKIE['cs_layout_style']!="" ? $_COOKIE['cs_layout_style'] . ' ' . $_COOKIE['cs_image_overlay'] : 'image-1 overlay') : ''); ?>">
with for example (image 1 background):
<body class="image-1">
example with pattern:
<body class="pattern-1">
example with background and overlay on it:
<body class="image-1 overlay">
You can find all available options commented in header.php file (lines 30-49).
HTML version
For each page please replace:
<body>
with for example (image 1 background):
<body class="image-1">
example with pattern:
<body class="pattern-1">
example with background and overlay on it:
<body class="image-1 overlay">
5. I'm getting "Please define Google Maps API Key" alert. What should I do?
You need to generate the Google Maps API Key here - https://developers.google.com/maps/documentation/javascript/get-api-key. Then you'll need to set it in the source code. Please follow the instructions below:
PHP version
Please open footer.php file and set the API Key by replacing YOUR_API_KEY phrase in line 123:
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
HTML version
Please open contact.html, contact_2.html and appointment.html files and set the API Key by replacing YOUR_API_KEY phrase in below line before </body> closing tag:
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>