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!
There are two ways to start using the RedParts template:
After downloading and unpacking the RedParts template, pre-compiled HTML files will be located in the HTML directory.
So, the HTML directory will look like after unpacking:
HTML/
blue/
green/
orange/
red/
violet/This directory contains different versions of the template:
Choose the one you want to use (for example red):
HTML/
red/
css/
images/
js/
vendor/
404.html
about-us.html
account-addresses.html
account-dashboard.html
...Description of HTML Structure, CSS Files and Javascript files are in the relevant sections.
If you want to add images or make changes to CSS or Javascript files, you need to open the corresponding files.
This template based on a responsive layout. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template. Here is the general structure.
<body>
<!-- site -->
<div class="site">
<!-- site__mobile-header -->
<header class="site__mobile-header">
...
</header>
<!-- site__mobile-header / end -->
<!-- site__header -->
<header class="site__header">
...
</header>
<!-- site__header / end -->
<!-- site__body -->
<div class="site__body">
...
</div>
<!-- site__body / end -->
<!-- site__footer -->
<footer class="site__footer">
...
</footer>
<!-- site__footer / end -->
</div>
<!-- site / end -->
<!-- mobile-menu -->
<div class="mobile-menu">
...
</div>
<!-- mobile-menu / end -->
...
<!-- quickview-modal -->
<div id="quickview-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
<!-- quickview-modal / end -->
<!-- add vehicle-modal -->
<div id="add-vehicle-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- add-vehicle-modal / end -->
<!-- photoswipe -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- photoswipe / end -->
</body>This template uses nine css files:
css/style.css
Contains main stylesheets.
css/style.ltr.css - same as css/style.css but only contains styles for LTR direction.
css/style.rtl.css - same as css/style.css but only contains styles for RTL direction.
css/style.header-*.css
Contains styles related to the desktop header. This file available in several variants, choose the one you want.
*.ltr.css and *.rtl.css versions are also available.
css/style.mobile-header-*.css
Contains styles related to the mobile header. This file available in several variants, choose the one you want.
*.ltr.css and *.rtl.css versions are also available.
vendor/bootstrap/css/bootstrap.min.css
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
vendor/owl-carousel/assets/owl.carousel.min.css
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Used for home page slider, products carousel, posts carousel, etc.
vendor/photoswipe/photoswipe.css
JavaScript image gallery for mobile and desktop, modular, framework independent.
Used on the product page in the product gallery.
vendor/photoswipe/default-skin/default-skin.css
JavaScript image gallery for mobile and desktop, modular, framework independent.
Used on the product page in the product gallery.
vendor/select2/css/select2.min.css
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
User for some select boxes.
vendor/fontawesome/css/all.min.css
This CSS file is required for Icon Font.
At the very beginning of the css/style.css file you will find a table of
contents that you can use to quickly navigate through the file.
Here is an example of the structure of the style.css:
/* ----------------------------------------
Table of Contents:
- Common
- animations
- base
- .document
...
- Components
...
- Filters
...
- Footer
...
- Pages
...
- Blocks
...
- Widgets
...
- Shop
...
- Blog
...
- Account
...
---------------------------------------- */
/* ----------------------------------------
// Common
// ---------------------------------------- */
/*
// animations
*/
...
/*
// base
*/
...
/*
// .document
*/
...
/* ----------------------------------------
// Components
// ---------------------------------------- */
...
Have a similar structure as style.css. At the very beginning you will find a table of
contents that you can use to quickly navigate through the file.
This template uses nine javascript files:
js/main.js
This file contains all javascript code related to theme.
js/number.js
Defines behaviour of the ".input-number" component.
vendor/jquery/jquery.min.js
jQuery is a Javascript library that greatly reduces the amount of code that you must write.
vendor/bootstrap/js/bootstrap.bundle.min.js
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
vendor/owl-carousel/owl.carousel.min.js
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
vendor/nouislider/nouislider.min.js
Lightweight JavaScript range slider with full touch support.
vendor/photoswipe/photoswipe.min.js
JavaScript image gallery for mobile and desktop, modular, framework independent.
Used on the product page in the product gallery.
vendor/photoswipe/photoswipe-ui-default.min.js
JavaScript image gallery for mobile and desktop, modular, framework independent.
Used on the product page in the product gallery.
vendor/select2/js/select2.min.js
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
User for some select boxes.
We used two fonts in this template:
Roboto (Google Web Font: https://fonts.google.com/specimen/Roboto) The main font used in the template.
FontAwesome (https://fontawesome.com/) Icon Font to display some icons in the template.
If you are working with HTML files:
<!-- logo --> and <!-- logo / end --> and replace code between them with your logo image. <!-- mobile-logo --> and <!-- mobile-logo / end --> and replace code between them with your logo image.If you are working with source code:
src/twig/header/logo.twig file.<!-- logo --> and <!-- logo / end --> and replace code between them with your logo image. src/twig/mobile/mobile-header.twig file.<!-- mobile-logo --> and <!-- mobile-logo / end --> and replace code between them with your logo image.If you are working with HTML files:
<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">css/style.css file.body {
font-family: "YOUR_FONT_NAME";
}If you are working with source code:
src/twig/layouts/default.twig file.<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">src/scss/_custom-variables.scss file.$body-font-family: 'YOUR_FONT_NAME';If you are working with source code:
src/scss/_custom-variables.scss file.// Change main theme color
//$theme-scheme: (
// main: #584d8c, // main theme color
// muted: #cdc8e5, // muted text color
//);If you are working with HTML files:
In HTML files, find comments <!-- copyright --> and <!-- copyright / end -->, then replace code between them with your copyright.
If you are working with source code:
src/twig/footer/footer.twig file.<!-- copyright --> and <!-- copyright / end -->, then replace code between them with your copyright.If you are working with HTML files:
header-*.html. For example header-classic-variant-two.html.<!-- site__header --> and <!-- site__header / end --> comments.<!-- site__header --> and <!-- site__header / end --> to other HTML files.<!-- Replace: -->
<link rel="stylesheet" href="css/style.header-*.css" media="(min-width: 1200px)">
<!-- With: -->
<link rel="stylesheet" href="css/style.header-classic-variant-two.css" media="(min-width: 1200px)"><!-- Replace: -->
<link rel="stylesheet" href="css/style.mobile-header-*.css" media="(max-width: 1199px)">
<!-- With: -->
<link rel="stylesheet" href="css/style.mobile-header-variant-two.css" media="(max-width: 1199px)">If you are working with source code:
Desktop header
Open the src/twig/layouts/default.twig file.
Then change the values of the following variables:
{# Value must be one of [spaceship, classic] #}
{% set global_header_layout = global_header_layout|default('spaceship') %}
{# If global_header_layout == spaceship, value must be one of 'style.header-spaceship-variant-[one, two, three].css' #}
{# If global_header_layout == classic, value must be one of 'style.header-classic-variant-[one, two, three, four, five].css' #}
{% set global_header_style = global_header_style|default('style.header-spaceship-variant-one.css') %}Mobile header
src/twig/layouts/default.twig file.{# Value must be one of 'style.mobile-header-variant-[one, two].css' #}
{% set global_mobile_header_style = global_mobile_header_style|default('style.mobile-header-variant-one.css') %}Template source codes are in the Sources directory.
After downloading and unpacking the template, the Sources directory will look like this:
Sources/
gulp/
tasks.js
src/
...
gulpfile.js
package.json
package-lock.jsonSource directory.npm install command. This command will load all necessary dependencies specified in the package.json file.To build the project run the command:
./node_modules/.bin/gulp buildOr (if gulp is installed globally):
gulp buildAfter executing the command, the compiled template will be located in the dist directory.
For a complete list of available commands, see the Gulp Tasks section below.
Gulp tasks are in the gulp/tasks.js and gulpfile.js files.
Unfortunately, such a bit unusual structure is necessary for us to automatically build the package for themeforest.
Gulp tasks description:
css/style.css, style.header-*.css, style.mobile-*.scss files.vendor/bootstrap/css/bootstrap.css file.src/vendor directory to the dist/vendor directory.src/images directory to the dist/images directory.sprite.svg) from svg files and save it to the dist/images directory.src/js directory to the dist/js directory.dist directory.We used twig.js as a template engine (this is a port of the popular PHP library for javascript). Documentation on its syntax can be found on the official site.
Data for templates stored in the src/data directory. To get access to data use function data.
For example, we have the file src/data/theme.json with the following contents:
{
"name": "RedParts"
}Now, to display the name of the theme in the template, we can use the following construction:
<div>
{{ data('theme.json').name }}
</div>Will be compiled to:
<div>
RedParts
</div>classnames - A simple utility for conditionally joining classNames together. https://github.com/JedWatson/classnames
data(path) - Loads and returns data from JSON files. path must be relative to the src/data directory.
image(path, options?) - Returns the image url. path must be relative to the src directory.
{# images/image.jpg #}
{{ image('images/image.jpg') }}
{# images/image-200x200.jpg #}
{{ image('images/image.jpg', {size: 200}) }}
{# images/image-200x400.jpg #}
{{ image('images/image.jpg', {size: [200, 400]}) }}
{# images/image-autox400.jpg #}
{{ image('images/image.jpg', {size: ['auto', 400]}) }}svg(path) - Loads the SVG from the path and returns it as a string. path must be relative to the src/svg directory.
currency - Format a number to price.
{# 249.00$ #}
{{ 249|currency }}The directory with the templates (Sources/src/twig) is divided into the following subdirectories:
The directory with SCSS files contains the following files and subdirectories:
scss/
account/
blocks/
blog/
common/
components/
filters/
footer/
header/
mixins/
mobile/
pages/
shop/
themes/
widgets/
_bootstrap-variables.scss
_constants.scss
_custom.scss
_custom-variables.scss
_functions.scss
_style.header.scss
_style.mobile.scss
_svg.scss
_variables.scss
bootstrap.scss
style.header-*.scss
style.mobile-*.scss
style.scssYou can make changes to any of these files.
To make it easier for you in the future to upgrade the template to the new version,
we recommend (if possible) making changes only to _custom-variables.scss and _custom.scss files.
_custom-variables.scss - It is used to override the values of variables. Also contains examples of how to change theme colors._custom.scss - Use to write your own scss code.To compile a template with one of the predefined color schemes,
open the _custom-variables.scss file and scroll down, then find and uncomment one of the following lines:
//@import 'themes/theme-red/theme-variables';
//@import 'themes/theme-blue/theme-variables';
//@import 'themes/theme-green/theme-variables';
//@import 'themes/theme-orange/theme-variables';
//@import 'themes/theme-violet/theme-variables';After that, you need to rebuild the template using the gulp build command.
The direction is controlled using two scss variables:
$direction - indicates direction. Possible values: ltr or rtl.$both-directions - if true compiles styles for two directions, the $direction variable will be ignored.
Possible values: true or false.Some "magic" variables are also used, which change their value depending on the given direction value.
The names of these variables are the same as the names of the
Logical Properties
(for example, variable $margin-inline-start).
These variables should only be used in the direction mixin.
This example demonstrates how it works:
.alert {
@include direction {
#{$margin-inline-start}: 20px;
}
}Will be compiled to:
If $direction == ltr and $both-directions == false:
.alert {
margin-left: 20px;
}If $direction == rtl and $both-directions == false:
.alert {
margin-right: 20px;
}If $both-directions == true:
[dir=ltr] .alert {
margin-left: 20px;
}
[dir=rtl] .alert {
margin-right: 20px;
}Open src/scss/_custom-variables.scss, and define next variables:
$direction: ltr; // specify the direction you need (ltr or rtl)
$both-directions: false; // set to false to disable style compilation
// for two directionsBy default, the icons used in the template are included as "Inline SVG". For example:
<body>
<svg width="16" height="16">
<path d="..."></path>
</svg>
</body>If this approach does not suit you. The template also implements another approach called "SVG Sprite". For example:
<body>
<svg width="18px" height="14px">
<use xlink:href="images/sprite.svg#menu-18x14"></use>
</svg>
</body>To build a template using "SVG Sprite" to display icons, run the following command from the Sources directory:
./node_modules/.bin/gulp build --icons svg-spritePlease note that before running this command you need to follow all the steps specified in the "Sources / Preparation" section of this documentation.
If you are having difficulty building the template yourself, contact me through the contact form and in response I will send you a ZIP archive containing the template with the necessary configuration.
Version 1.3.1 – June 14, 2020
Version 1.3.0 – June 13, 2020
4.4.1 to 4.5.0;3.4.0 to 3.5.1;4.0.12 to 4.0.13;14.1.1 to 14.5.0;5.12.0 to 5.13.0;Version 1.2.0 – February 10, 2020
Version 1.1.0 – January 24, 2020
4.3.1 to 4.4.1;3.4.0 to 3.4.1;4.0.10 to 4.0.12;13.1.4 to 14.1.1;5.8.1 to 5.12.0;Version 1.0.0 – September 30, 2019