Template version 1.2
Hello,
thank you for downloading. I hope you wil enjoy working with the
template.
You are entitled to get free lifetime updates to this product.
This documentation is to help you with template's customization. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
You will need the following sofwares to customize this template.
This template uses Bootstrap 4 CSS framework, a powerful tool to help you building great websites in a short time.
/css
- CSS files including Bootstrap CSS, CSS for the components
and main template stylesheets/icons-reference
- Custom icons list and sources/fonts
- Font Awesome icon font/img
- Images for demo purposes. Mostly replaced by placeholder images in
the download archive./js
- Javascript files/scss
- SCSS source files for easier customizationThe theme stylesheet is css/style.default.css
. Colour variants are named accordingly,
to use a different colour variant, just replace link to the style.default.css
with
e.g. style.pink.css
in the <head>
element in HTML files.
I suggest placing your changes and CSS declarations in custom.css
file. This way, you
will keep your code separated and you can update the original template stylesheet if an updated
is released.
This template contains its SCSS source codes too. These can be very handy when you would want to create your own custom colour variant, create a new button style and similar situations.
If you are completely new to SASS, check out their official website and download a compiler for your OS. SASS uses a bit different syntax than CSS but you should not have a problem working with it if you understand CSS.
The easies way to change theme colours, fonts and any CSS rules in general is by editing the SCSS files.
In the SCSS directory, there is a main file style.default.scss
or its colour variants.
In these files, we just define which of the predefined colours will be used and the rest is done
by core.scss
file. It takes control of all the necessary module includes. The modules
(blog, pages, etc.) are located in the modules subdirectory.
core.scss (core file handling all the includes) style.default.scss (main file) style.blue.scss (main file) style.green.scss (main file) style.pink.scss (main file) style.red.scss (main file) style.sea.scss (main file) style.violet.scss (main file) theme.scss (main Bootstrap components based on settings in the variable file) -- <modules> (includes all partials included in the main stylesheets - style.default.scss, etc.) ---- _general.scss - generic styling of the template -buttons, header, footer, sections.. ---- _mixins-custom.scss - my custom mixins ---- _mixins.scss - Bootstrap 4 mixins (included from the mixins directory) ---- _variables-custom.scss - file based on the Bootstrap 4 variables file. ---- about.scss - styles for the about page ---- blog.scss - styles for the blog pages ---- cart.scss - styles for the shopping cart ---- contact.scss - styles for the contact page ---- checkout.scss - styles for the checkout pages ---- product-categories.scss - styles for the detail page ---- product-details.scss - styles for the category pages ---- _demo.scss - styles for the demo purposes only ---- <mixins> (original Bootstrap 4 mixins) ---- <utilities> (original Bootstrap 4 ulilities)
Main template file is called js/front.js
and takes care of the following tasks. Most
of them can be reconfigured there too.
Provided Google API key is OK for localhost but will not work on production server. You will need to generate your own API key at https://developers.google.com/maps/documentation/javascript/get-api-key.
Replacing API key:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
----------------------------------------------------------------------------------------- Version 1.2 - 01/11/2017 ----------------------------------------------------------------------------------------- - Added 6 new pages: customer-account, customer-addresses, customer-login, customer-order, customer-orders, checkout5 - Fixed a bug in breadcrums (changed syntax) - For unlogged user, user icon in navbar leads to Login page now - Added optional shipping address in checkout1 ----------------------------------------------------------------------------------------- Version 1.1.2 - 24/10/2017 ----------------------------------------------------------------------------------------- - Fixed a bug in product modals (.modal-body should be a child of .modal-content, added .btn to one of the buttons) ----------------------------------------------------------------------------------------- Version 1.1.1 - 24/10/2017 ----------------------------------------------------------------------------------------- - Updated to Bootstrap 4.0.0-Beta.2 - Removed Bootstrap utilities from SCSS and CSS (= stylesheets lot smaller now) ----------------------------------------------------------------------------------------- Version 1.1 - 6/10/2017 ----------------------------------------------------------------------------------------- - Moved 3rd-party plugins to vendor directory - Added SCSS files - Updated plugins to last stable versions ----------------------------------------------------------------------------------------- Version 1.0 - 12/9/2017 ----------------------------------------------------------------------------------------- - Initial release