Created: 10/02/2021
By: Amentotech
Support: Help Desk
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to create a ticket on our help desk here. Thanks so much!
Follow the steps below to get started with your Site Template:
Main-files/HTML Folder to find all the Templates FilesHTML/css - Extra Stylesheets FolderHTML/images- Images FolderHTML/js - Javacripts FolderHTML/css/dashboard.css - Main Stylesheet File you can also rename it to style.css (for wordpress)HTML/index.html - Index File/HomepageJournal Follows A Simple Coding Structure. Here Is The Sample:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zxx"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BootStrap HTML5 CSS3 Theme</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/fontawesome-all.css">
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="wo-homepage">
<!-- Preloader Start -->
<div class="preloader-outer">
<div class="loader"></div>
</div>
<!-- Preloader End -->
<!-- HEADER START -->
<header>
<div class="wo-header">
<div class="wo-header-topbarwrap">
<div class="container-fluid">
<div class="row">
<div class="wo-topbarcontent">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="wo-header__content">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- HEADER END -->
<!-- BANNER START -->
<div class="wo-mainbanner-wrap">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="wo-banner">
<div class="wo-banner__formwrap">
</div>
<div id="wo-banner__silder" class="wo-banner__silder owl-carousel">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BANNER END -->
<!-- MAIN START -->
<main class="wo-main overflow-hidden">
<!-- CATEGORY START -->
<section class="wo-main-section">
<div class="container">
<div class="row justify-content-md-center">
</div>
<div class="container-fluid">
<div class="row">
<div id="wo-vehiclesslider" class="wo-topvehicles-wrap owl-carousel">
</div>
<div class="col-12">
<div class="wo-sectionbtns">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CATEGORY END -->
<!-- Spare Parts Start -->
<section class="wo-main-section wo-spareparts-section">
<span class="wo-spareparts-section__bg"></span">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="wo-sectionhead">
</div>
</div>
<div class="wo-spareparts">
</div>
</div>
</div>
</section>
<!-- Spare Parts End -->
<!-- Vehicles Featured Start -->
<section class="wo-main-section">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="wo-sectionhead">
<div class="wo-sectionhead__title">
</div>
<div class="wo-sectionhead__description"">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
</div>
</section>
<!-- Vehicles Featured End -->
<!-- Spare Parts Start -->
<section class="wo-main-section wo-bodytype-wrap">
<div class="wo-bodytype-section">
<span class="wo-bodytype-section__bg"></span>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="wo-sectionhead">
<div class="wo-sectionhead__title">
</div>
<div class="wo-sectionhead__description">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="wo-bodytype">
</ul>
</div>
</div>
</section>
<!-- Spare Parts END -->
<!-- Quick Comparison Start -->
<section class="wo-main-section wo-comparison-section">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-5">
</div>
<div class="col-xl-7">
</div>
</div>
</div>
</section>
<!-- Quick Comparison End -->
<!-- Testimonials Start -->
<section class="wo-main-section wo-testimonials-section">
<span class="wo-testimonials-section__bg"></span>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="wo-testimonials-slider owl-carousel"">
</div>
</div>
</div>
</div>
<div class="wo-usercircle"></div>
</section>
<!-- Testimonials End -->
<!-- Vehicles Featured Start -->
<section class="wo-main-section">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="wo-sectionhead">
</div>
</div>
<div class="wo-articles-wrap"></div>
</div>
</div>
</section>
<!-- Vehicles Featured End -->
</main>
<!-- MAIN END -->
<!-- FOOTER START -->
<footer class="wo-footer-wrap">
<img src="images/footer/shape.png" class="wo-footershape" alt="img description">
<div class="wo-footer">
</div>
<div class="wo-footer-bottom">
</div>
</footer>
<!-- FOOTER END -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/jquery-library.js"></script>
<script src="js/vendor/bootstrap-slider.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/popper.min.js"></script>
<script src="js/vendor/tippy.js"></script>
<script src="js/vendor/appear.js"></script>
<script src="js/vendor/countTo.js"></script>
<script src="js/vendor/select2.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/wheelon-slider.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS / SASS and JS are important part of the website. We've included all the styling in main.css for frontend and dashboard for the dashboard pages, All the styling are inside the SASS files, witch are compiling in main.css and dashboard.css. In order to compile sass files into css file you need to install node.js then install this command npm install -g sass and then for the frontend run this command sass --watch scss/main.scss:css/main.css and for the dashboard run this command sass --watch scss/dashboard.scss:css/dashboard.css And we done main.js file code with proper commenting to avoid more http request to server and to make website faster. Inside HTML > CSS you can find dashboard.css which contains all the css.
<link rel="stylesheet" href="css/dashboard.css">
Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as Wheelon based on bootstrap 4 it is recommended to include bootstrap.css file right before dashboard.css file.
<link rel="stylesheet" href="css/bootstrap.css">
main.js Inside HTML > JS you can find main.js which contains all the custom and plugins code used in website.
<script src="js/main.js"></script>
The Logo Container can be found in the Header Container - logo
<div class="wo-logo">
<a href="index.html"><img src="images/logo.png" alt="Logo"></a>
</div>
NOTE The Logo Image's maximum width can be 150px and maximum height can be 30px
You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the scss/abstracts/_variables.scss file & you are good to go.
Colors are defined with $primary-color and $secondary-color in scss/abstracts/_variables.scss you can change the variable value to change the primary and secondary colors
Now simply change the Codes according to your requirements
Change your Fonts on the Fly as we have included fonts in scss/abstracts/_variables.scss file. Wheelon uses 3 Fonts namely: 'Cabin', sans-serif 'Source Sans Pro', sans-serif and 'Source Serif Pro', serif from the Google Fonts Library. You can find the Linking to the Font Files in the scss/base/_base.scss file
@import url("https://fonts.googleapis.com/css?family=Cabin:400,500,600,700|Source+Sans+Pro:400,600,600i,700|Source+Serif+Pro:600");
In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.
<div class="wo-header-nav-center">
<nav class="navbar-expand-lg">
<button class="navbar-toggler wo-btn-small" type="button" data-toggle="collapse"
data-target="#jbMainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="lnr lnr-menu"></i>
</button>
<div id="jbMainNavbar" class="collapse navbar-collapse">
<ul class="navbar-nav wo-navbarnav">
<li class="menu-item-has-children menu-item-has-mega-menu">
<a class="nav-link" href="javascript:void(0);">Userd Cars</a>
<div class="mega-menu">
<div class="wo-navcarinfowrap">
<div class="wo-navcarinfo">
<div class="wo-navbarinfo">
<div class="wo-navbarinfo__title">
<h4>By Car Body Type</h4>
</div>
<ul class="wo-navbarinfo__title">
<li><a href="javascript:void(0);">By Car Body Type</a></li>
<li><a href="javascript:void(0);">Electric Mini Cars</a></li>
<li><a href="javascript:void(0);">Convertible Targa Cars</a></li>
<li><a href="javascript:void(0);">ELectric Mini Car</a></li>
<li><a href="javascript:void(0);">Universal Wagons</a></li>
<li class="wo-morebtn"><a href="javascript:void(0);">More</a></li>
</ul>
</div>
<div class="wo-navbarinfo">
<div class="wo-navbarinfo__title">
<h4>By Car Make</h4>
</div>
<ul class="wo-navbarinfo__title">
<li><a href="javascript:void(0);">Range Rover Cars</a></li>
<li><a href="javascript:void(0);">Volkswagen Cars</a></li>
<li><a href="javascript:void(0);">Chevrolet Cars</a></li>
<li><a href="javascript:void(0);">Mitsubishi Cars</a></li>
<li><a href="javascript:void(0);">Mercedes Benz Cars</a></li>
<li class="wo-morebtn"><a href="javascript:void(0);">More</a></li>
</ul>
</div>
<div class="wo-navbarinfo">
<div class="wo-navbarinfo__title">
<h4>By Engine Capacity</h4>
</div>
<ul class="wo-navbarinfo__title">
<li><a href="javascript:void(0);">660cc Vehicles</a></li>
<li><a href="javascript:void(0);">1000cc Vehicles</a></li>
<li><a href="javascript:void(0);">1300cc Vehicles</a></li>
<li><a href="javascript:void(0);">Japanese Vehicles</a></li>
<li><a href="javascript:void(0);">Automatic Vehicles</a></li>
<li class="wo-morebtn"><a href="javascript:void(0);">More</a></li>
</ul>
</div>
</div>
<div class="wo-cararticle">
<div class="wo-cararticle__img">
<a href="javascript:void(0);" data-toggle="modal" data-target="#videopopup">
<img src="images/index/video-img.jpg" alt="imagedescription">
</a>
</div>
<div class="wo-cararticle__content">
<h3>Before You Buy Used Car</h3>
<p>Consectetur adipisicing elitem sed dotium eiusmod tempor incididunt ut labore etnalo dolore</p>
<a href="javascript:void(0);">Read Full Article</a>
</div>
</div>
</div>
<div class="wo-navad">
<a href="javascript:void(0);">
<img src="images/ad-img.jpg" alt="img description">
</a>
</div>
</div>
</li>
<li>
<a href="search-result.html">New Cars</a>
</li>
<li>
<a href="search-result.html">Motorbikes</a>
</li>
<li>
<a href="spareparts-grid-classic.html">Spare Parts</a>
</li>
<li class="menu-item-has-children">
<a href="javascript:void(0);">Forum</a>
<ul class="sub-menu">
<li>
<a href="forum-grid.html">Forum Grid</a>
</li>
<li>
<a href="forum-single.html">Forum Single</a>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="javascript:void(0);">More</a>
<ul class="sub-menu">
<li>
<a href="indexv2.html">Home v 2 without login</a>
</li>
<li>
<a href="owner-reviews.html">Owner Reviews</a>
</li>
<li class="page_item_has_children">
<a href="javascript:void(0);">Search Result</a>
<ul class="sub-menu">
<li>
<a href="search-result.html">Search Result</a>
</li>
<li>
<a href="search-result-classic.html">Search Result Classic</a>
</li>
<li>
<a href="search-result-classic-b.html">Search Result Classic v Two</a>
</li>
</ul>
</li>
<li class="page_item_has_children">
<a href="javascript:void(0);">Spareparts</a>
<ul class="sub-menu">
<li>
<a href="spareparts-grid.html">Spareparts Grid</a>
</li>
<li>
<a href="spareparts-grid-classic.html">Spareparts Grid Classic</a>
</li>
<li>
<a href="spare-part-single.html">Spare Part Single</a>
</li>
</ul>
</li>
<li>
<a href="vehicle-single.html">Vehicle Single</a>
</li>
<li>
<a href="compare-vehicles.html">Compare Vehicles</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
<li>
<a href="404.html">404</a>
</li>
<li>
<a href="signup.html">Signup</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Wheelon includes One slider.Owl Slider V2 for you to be used on any Page with 100s of Options.
Owl Slider V2
/* Banner Slider */
var _wo_banner__silder = jQuery("#wo-banner__silder")
_wo_banner__silder.owlCarousel({
items: 1,
loop: true,
nav: true,
autoplay: false,
dots: false,
smartSpeed: 500,
responsiveClass: true,
navClass: ['wo-prev', 'wo-next'],
navContainerClass: 'wo-bannernav',
navText: ['<span class="ti-angle-left"></span >', '<span class="ti-angle-right"></span>'],
responsive: {
0: {
dots: true,
nav: false,
},
481: {
dots: false,
nav: true,
},
}
});
});
Wheelon boasts of a huge number of handy Pages which are quite powerful, flexible, functional & easy to use. Setting up pages is very easy & Self Explanatory. Here is the List of Pages included with Wheelon
index.htmlindexv2.htmlabout.htmlowner-reviews.htmlsearch-result.htmlsearch-result-classic.htmlsearch-result-classic-b.htmlspareparts-grid.htmlspareparts-grid-classic.htmlspare-part-single.htmlvehicle-single.htmlcompare-vehicles.htmlforum-grid.htmlforum-single.htmlcontact.html404.htmldashboard-accountsetting.htmldashboard-alerts.htmldashboard-messages.htmldashboard-my-ads.htmldashboard-packages.htmldashboard-payments_receipts.htmldashboard-post-ads.htmldashboard-post-ads-b.htmldashboard-profilesetting.htmldashboard-saved-ads.htmlsignup.htmlEach of the above mentioned Pages are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.
Setup content you want to stand out. You can use Parallax Images or HTML5 Videos as Sections.
Setting Up Sections:
Setup your Sections outside the .container element. sections padding-top and padding-boottom is 80px by default but you can change it by adding handy classes like paddingnull, padding-top-20 etc.
Light Section:
<section class="wo-main-section"> </section>
You can add Embedded Google Maps to any Page using the following setup:
Step 1:
Add the Google Maps Specific Scripts in the <main.js> Tag below the js/main.js script linking:
<script src="https://maps.google.com/maps/api/js?key=YOUR-API-KEY"></script>
Step 2:
Add a div which will contain your Google Map:
<div id="wo-locationmap" class="wo-locationmap"></div>
We've used Font Awesome icons , themify-icons. and Linearicons.
Released on 10 February 2021
- Released Wheelon Template