# Auto Care

## Joomla Template for Car Mechanic, Workshops, Auto Repair Centers

- created: 19/04/2017
- by: payothemes
- Email: payothemes@gmail.com
- Site: http://payo-themes.com/
- Tips/Video tutorial: http://blog.payo-themes.com/

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

### Introduction

Auto Care is modern and good looking Joomla template, perfect fit for car mechanic and auto mechanic. The Auto Care Template is built for Auto Mechanic, Car Repair Shops, Car Wash, Garages, Automobile Mechanicals, Mechanic Workshops, Auto Painting, Auto Centres and other Auto and Car related services and it is suitable for any kind of small business activity.
Also suitable for Car Service Mot, Tyres, Brakes Hire, Car Rental, Auto Care, Maintenance, Vehicle Diagnostics, Auto Glass, Body Shops, Auto Inspections, Handyman, Serviceman.

### Installation Guide

The quickstart package is basically a clone of my demo preview, a package of Joomla, Auto Care template, Components, Modules, plugins, libraries, etc all of these already installed. All you need to do is to unzip to your host, create a fresh database and just follow the quick install steps. That's it, only 5 min and you have a full working website. This solution is mostly for users who will start a fresh website.
Also you will recieve an akeeba backup with our demo.
INSTALLING AKEEBA BACKUP:
1) Create a fresh database.
2) Unzip the files into your host, eg: www.yourwebsite.com would be just into public_html/ ; www.yourwebsite.com/folder/ would be in public_html/folder/
3) Access the url where you extracted the files eg: http://www.yourwebsite.com/ . A regular joomla installation should appear. Follow all the steps providing the needed details for installation. eg: https://youtu.be/z6Q0fbUPQKs
4) Access your administrator eg: www.yourwebsite.com/administrator/ , login and go to Site > System Information. Here look at the tab called "Directory Permission" and make sure all the folders listed are green "Writable". If not change their permissions to 755 for folders (or in some rare servers try 757) and files to 644 (the same in some rare servers try 646).
Also, Joomla recommends the php option Display Errors to be disabled. Some servers have this option enabled. The advantage is you can change this settings from the Global Configuration, 3rd tab called Servers. There is an option there, Display Errors, and set it to None.
INSTALLING STANDALONE VERSION (Piece by piece):
Install Joomla by downloading from here http://www.joomla.org/ or by installing it from your cPanel Fantastico. After install, please have a look inside the folder called Auto Care template (piece by piece) and install every zip you find through Extension Manager > Upload & Install. I also attached screenshots of each extensions/template/module/etc's settings page so you will know what settings to apply.
If you prefer this method, we recomand you to install on subdomain Quickstart to see exactly how our theme is setup.
1. Install theme
2. Install both plugins from Plugins folder
3. Enable both plugins
4. Set our template as default
5. Customise and make import of our demo settings.

Update
Is very simple to update our template. You need to:
1. Make full backup
2. Install our new version of theme/extension like you are install like first time. or read point 3.
3. Check first folder update and using FTP client like Win scp, file zilla, etc replace old files with new files from folder Update.

### Css suffix in modules

We are using Page builder PRO 2 and we made some css customs only for Page builder's addons. You can see them above: How to add css class in builder: http://screencast-o-matic.com/watch/cbejlV6wje

Home page

call-to-action-area

<div class="box">
<div class="row">
<div class="col-md-8">
<h2>Get First Class Services For Your Vichcle</h2>
</div>
<div class="col-md-4">
<a href="">Get Free Appoinment</a>
</div>
</div>
</div>

we01

Separator

<span class="decor"></span>

homecarousel

features01

First

<div class="single-item-obs">
<div class="img-holder-obs">
<img src="images/obs1.jpg" alt="Awesome Image">
</div>
<div class="overlay-obs">
<div class="img-holder-obs">
<img src="images/obs1hover.jpg" alt="Awesome Image">
</div><!-- /.img-holder -->
<div class="icon-holder-obs">
<span class="flaticon-float"></span>
</div>
<div class="content">
<h3>diagnostic</h3>
<p>We should point out that maintaining your vehiclewith an occasional visual inspectionfluid level.</p>
<a href="#">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="title clearfix">
<div class="icon-holder-obs">
<span class="flaticon-float"></span>
</div>
<h3>diagnostic</h3>
<div class="go-top-icon">
<a href="#"><span class="flaticon-up-arrow"></span></a>
</div>
</div>
</div>

Second

<div class="single-item-obs">
<div class="img-holder-obs">
<img src="images/obs2.jpg" alt="Awesome Image">
</div>
<div class="overlay-obs">
<div class="img-holder-obs">
<img src="images/obs2hover.jpg" alt="Awesome Image">
</div><!-- /.img-holder -->
<div class="icon-holder-obs">
<span class="flaticon-car-service"></span>
</div>
<div class="content">
<h3>Inspection</h3>
<p>We should point out that maintaining your vehiclewith an occasional visual inspectionfluid level.</p>
<a href="#">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="title clearfix">
<div class="icon-holder-obs">
<span class="flaticon-car-service"></span>
</div>
<h3>diagnostic</h3>
<div class="go-top-icon">
<a href="#"><span class="flaticon-up-arrow"></span></a>
</div>
</div>
</div>

Third

<div class="single-item-obs">
<div class="img-holder-obs">
<img src="images/obs3.jpg" alt="Awesome Image">
</div>
<div class="overlay-obs">
<div class="img-holder-obs">
<img src="images/obs3hover.jpg" alt="Awesome Image">
</div><!-- /.img-holder -->
<div class="icon-holder-obs">
<span class="flaticon-technology"></span>
</div>
<div class="content">
<h3>Upgrades</h3>
<p>We should point out that maintaining your vehiclewith an occasional visual inspectionfluid level.</p>
<a href="#">Read More<i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="title clearfix">
<div class="icon-holder-obs">
<span class="flaticon-technology"></span>
</div>
<h3>diagnostic</h3>
<div class="go-top-icon">
<a href="#"><span class="flaticon-up-arrow"></span></a>
</div>
</div>
</div>

footer3area

<div class="single-item">
<div class="icon-holder">
<span class="flaticon-transport-1"></span>
</div>
<div class="content">
<h3>24/7 Road Side Towing</h3>
<p>(561) 859-485-9469</p>
</div>
</div>

About us page

ab01

<div class="working-time">
<h3>Working Time</h3>
<ul>
<li>Monday - Friday<span>9.00 to 18.00</span></li>
<li>Saturday<span>10.00 to 15.00</span></li>
<li>Sunday<span><a href="#">Closed</a></span></li>
</ul>
</div>

<div class="subscribe">
<h3>Subscribe Us</h3>
<form action="#">
<input name="email" placeholder="Email Address" type="email">
<button type="submit"><span class="flaticon-paper"></span></button>
<p>* Your Mail id is Fully Protected.</p>
</form>
</div>

<div class="working-time">
<h3>Working Time</h3>
<ul>
<li>Monday - Friday<span>9.00 to 18.00</span></li>
<li>Saturday<span>10.00 to 15.00</span></li>
<li>Sunday<span><a href="#">Closed</a></span></li>
</ul>
</div>

<div class="subscribe">
<h3>Subscribe Us</h3>
<form action="#">
<input name="email" placeholder="Email Address" type="email">
<button type="submit"><span class="flaticon-paper"></span></button>
<p>* Your Mail id is Fully Protected.</p>
</form>
</div>

fact-counter

Pricing Table page

<div class="single-price-box">
<div class="table-header">
<h3>Maintanence Service</h3>
<div class="most-popular-plan">
<h6>Most Popular</h6>
</div>
</div>
<div class="price">
<h1>$ 320</h1>
<h6>Onwards</h6>
</div>
<div class="price-list">
<ul>
<li>Clutch and Gear Box Service<span class="flaticon-mark-2"></span></li>
<li>Brakes and Suspension Service<span class="flaticon-mark-2"></span></li>
<li>Ac and electrical Service<span class="flaticon-mark-2"></span></li>
<li>Wheel & Steering Checkup<span class="flaticon-mark-2"></span></li>
<li>Water Wash & Oil Level<span class="flaticon-mark-2"></span></li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Book Now</a>
</div>
</div>

Second

<div class="single-price-box">
<div class="table-header">
<h3>Car Care Service</h3>
</div>
<div class="price">
<h1>$ 740</h1>
<h6>Onwards</h6>
</div>
<div class="price-list">
<ul>
<li>Wate Wash & Oil Paint Level<span class="flaticon-mark-2"></span></li>
<li>Interior & Exterior Cleaning<span class="flaticon-mark-2"></span></li>
<li>exterior Polishing Paint<span class="flaticon-mark-2"></span></li>
<li>Wheel & Steering Checkup<span class="flaticon-mark-2"></span></li>
<li>Door & Drive Line Checkup<span class="flaticon-mark-2"></span></li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Book Now</a>
</div>
</div>

Third

<div class="single-price-box middle">
<div class="table-header">
<h3>General Checkup</h3>
</div>
<div class="price">
<h1>$ 560</h1>
<h6>Onwards</h6>
</div>
<div class="price-list">
<ul>
<li>Oil Level & Battery Checkup<span class="flaticon-mark-2"></span></li>
<li>Engine Cooling System Checkup<span class="flaticon-mark-2"></span></li>
<li>Ac and electrical Checkup<span class="flaticon-mark-2"></span></li>
<li>Door & All Belt Checkup<span class="flaticon-mark-2"></span></li>
<li>Under Chasis & Line Checkup<span class="flaticon-mark-2"></span></li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Book Now</a>
</div>
</div>

Service page

services-package-area text-center

<div class="single-price-boxv2 single-package">
<div class="table-header">
<h3>Maintanence Service</h3>
</div>
<div class="price">
<h1>$ 320</h1>
<h6>Per Year</h6>
</div>
<div class="text">
<p>We should point out that maintaining your vehiclewith an occasional seds visual inspectionfluid level.</p>
</div>
<div class="price-list">
<ul>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Intial Engagement</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Each Drive Range</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Intial Internal Diagnostics</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>UpShift Timing</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Upshift Quality</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Passing Gear Quality</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Downshift Timing</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Downshift Quality</li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Buy Now</a>
</div>
</div>

Second

services-package-area text-center

<div class="single-price-boxv2 single-package top">
<div class="table-header">
<h3>Car Care Service</h3>
<div class="most-popular-plan">
<h6>Most Popular</h6>
</div>
</div>
<div class="price">
<h1>$ 740</h1>
<h6>Per Year</h6>
</div>
<div class="text">
<p>We should point out that maintaining your vehiclewith an occasional seds visual inspectionfluid level.</p>
</div>
<div class="price-list care-service-bg">
<ul>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Engine Performance</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Harness Connections</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Computer for Trouble Codes.</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Vaccuum Connections</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Ground Connections</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Wire Condition</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Computer and Internal Diagnostics</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Downshift Quality</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Check the Electronic Components</li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Buy Now</a>
</div>
</div>

Third

services-package-area text-center

<div class="single-price-boxv2 single-package">
<div class="table-header">
<h3>General Checkup
</h3>
</div>
<div class="price">
<h1>$ 560</h1>
<h6>Per Year</h6>
</div>
<div class="text">
<p>We should point out that maintaining your vehiclewith an occasional seds visual inspectionfluid level.</p>
</div>
<div class="price-list general-checkup-bg">
<ul>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Ground Connections</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Each Drive Range Diagnostic</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Intial Engagement</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>UpShift Timing Gear quality</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Upshift Quality Quality Check</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Passing Gear</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Downshift Timing</li>
<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Downshift Quality</li>
</ul>
</div>
<div class="table-footer">
<a class="aut-cr-btn" href="#">Buy Now</a>
</div>
</div>

serv-page

form-home

Air page

we06 working-topics-content

Contact page

getin-touch

<ul class="contact-info">
<li class="address">
<div class="icon-holder">
<span class="flaticon-map"></span>
</div>
<div class="content">
<h4>Address :</h4>
<p>21/17, Level 4 Steel Rock St,<br>Melbourne, Victoria 3000 Australia</p>
</div>
</li>
<li class="email">
<div class="icon-holder">
<span class="flaticon-note"></span>
</div>
<div class="content">
<h4>Ask Anything Here :</h4>
<p>support@steelthemes.com</p>
</div>
</li>
<li>
<div class="icon-holder">
<span class="flaticon-telephone"></span>
</div>
<div class="content">
<h4>Call Us:</h4>
<p>+1 (44) 123-45-67</p>
</div>
</li>
</ul>

Male appoinment

makeap

### Extension used

Page builder PRO (click here for official doc)

Layer slider for Joomla

Helix3 framework

JB easy form maker

J2store

Sp simple portfolio

Owl module

### Configuration

Extensions- templates- click on Auto Care template and his childs :)

Header:
- Sticky Header: yes or no
- Favicon: here you can upload your favicon
Logo
- logo type image and you can upload your image here, or select as TEXT and you can add your text.
Footer
- Here you can change footer text
Social Icons
- you can add top socials like twitter, facebook, etc
Contact Information
- in this section you can enter your contact infos and will be shown in top bar, before menu.
Coming Soon
- If you site is not ready, you can check this option and visitors will see custom page under construction
Layout tab:
- here you can create your site layout,
- you can create one layour or more layouts: if you want to create new/different layout, you need to duplicate your theme and to build your layout. Please check our images how we add css class in layout's template. Also best ideea is to install our demo on subdomain and check how is configured. And why not, if you don't know something, please let as know on support website, and we will help you.
Menu tab:
- here you can have 3 options:
- menu mega menu, off canvas (just icon) and both:menu and icon
Custom code tab:
- here you can add your custom css

You can find our config import in folder import from our pack.

### Support & FAQ

If you need any support with this template, You can place comment on item comment section or you can send me mail through my profile .
Thank You

### Source & Credits

Page builder pro

Layer slider for Joomla

Helix3 framework

JB easy form maker

J2store

Sp simple portfolio

Dj image slider

Submenu module