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 Stroyka template:
After downloading and unpacking the Stroyka template, pre-compiled HTML files will be located in the HTML directory.
So, the HTML directory will look like after unpacking:
HTML/
black/
blue/
default/
green/
red/This directory contains different versions of the template:
Choose the one you want to use (for example default):
HTML/
default/
css/
images/
js/
vendor/
404.html
about-us.html
account-addresses.html
blog-classic.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">
<!-- mobile site__header -->
<header class="site__header d-lg-none">
...
</header>
<!-- mobile site__header / end -->
<!-- desktop site__header -->
<header class="site__header d-lg-block d-none">
...
</header>
<!-- desktop 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 -->
<!-- quickview-modal -->
<div id="quickview-modal">
...
</div>
<!-- quickview-modal / end -->
<!-- mobilemenu -->
<div class="mobilemenu">
...
</div>
<!-- mobilemenu / end -->
<!-- photoswipe -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- photoswipe / end -->
</body>This template uses seven 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.
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
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
...
- Header
...
- Footer
...
- Pages
...
- Shop
...
- Blog
...
- Blocks
...
- Widgets
...
---------------------------------------- */
/* ----------------------------------------
// Common
// ---------------------------------------- */
/*
// animations
*/
...
/*
// base
*/
...
/*
// .document
*/
...
/* ----------------------------------------
// Components
// ---------------------------------------- */
...
This template uses eleven javascript files:
js/main.js
This file contains all code related to theme, except for the code related to the header.
js/header.js
Contains code related to site header and mobile header.
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/nouislider/nouislider.min.js
Lightweight JavaScript range slider with full touch support.
vendor/owl-carousel/owl.carousel.min.js
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
vendor/svg4everybody/svg4everybody.min.js
SVG for Everybody adds SVG External Content support to all browsers.
vendor/photoswipe/photoswipe.min.js
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 three 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.
stroyka (fonts/stroyka) Custom Icon Font to display some icons in the template. It is used only in Edge to solve performance issue associated with rendering a huge amount of SVG icons.
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 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.src/fonts directory to the dist/fonts 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.
Each file from the Sources/src/data directory is projected into the global namespace.
The variable name is the file name without the extension.
For example, we have the file Sources/src/data/theme.json with the following contents:
{
"name": "Stroyka"
}Now, to display the name of the theme in the template, we can use the following construction {{ theme.name }}.
Pay attention to the fact that all files must be in json format, and their names must match the
regular expression /^[_A-Za-z0-9]+\.json$/.
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/
blocks/
blog/
common/
components/
filters/
footer/
header/
mixins/
pages/
shop/
themes/
widgets/
_custom.scss
_custom-variables.scss
_functions.scss
_variables.scss
style.ltr.scss
style.rtl.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._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, then find and uncomment one of the following lines:
//@import 'themes/red';
//@import 'themes/blue';
//@import 'themes/black';
//@import 'themes/green';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 directionsIf 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/header.twig file.<!-- logo --> and <!-- logo / end --> and replace code between them with your logo image.src/twig/header/nav-panel.twig file.<!-- logo --> and <!-- logo / end --> and replace code between them with your logo image.src/twig/header/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 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.Social links appear in the About Us widget on the blog and in the site footer. To add your own link, follow the instructions:
If you are working with HTML files:
In HTML files, find comments <!-- social-links --> and <!-- social-links / end -->,
between these comments add an additional element to the .social-links__list, for example:
<ul class="social-links__list">
...
<li class="social-links__item">
<!-- Next .social-links__link--type--github class will be used to set the icon color. -->
<a class="social-links__link social-links__link--type--github" href="https://github.com/4Bos" target="_blank">
<!-- Put the early copied CSS classes (fab fa-github) in the "class" attribute of this tag. -->
<i class="fab fa-github"></i>
</a>
</li>
</ul>Open the css/style.css and append to the end:
.social-links__link--type--github {
background-color: #24292e;
color: #fff;
}If you are working with source code:
src/data/social_links.json and add a new element to the root array:[
// ...
// type - will be used to generate link class,
// for example: social-links__link--type--github.
// icon - the early copied CSS classes (fab fa-github).
// url - social link url.
{"type": "github", "icon": "fab fa-github", "url": "https://github.com/4Bos"}
]src/scss/_custom-variables.scss and define colors for our social link:$social-links: (
// The map key (github) must be the same as the type in the
// social_links.json file.
github: (bg-color: #24292e, font-color: #fff),
);This is the end. Of course, don't forget to follow me on github.
Just remove the class product-card--hidden-actions from all .product-card's.
<!-- Replace -->
<div class="product-card product-card--hidden-actions">
...
</div>
<!-- With -->
<div class="product-card">
...
</div>If you are working with HTML files:
css/style.css file..product-image__body {
padding-bottom: calc(100% * (3 / 4));
}If you are working with source code:
src/scss/_custom-variables.scss file.$product-image-width: 4; // Relative image width.
$product-image-height: 3; // Relative image height.If you are working with HTML files:
HTML/{THEME_NAME}/{*}.html (for example HTML/default/index.html);dir attribute (ltr or rtl) for <html> tag, for example:<!DOCTYPE html>
<html lang="en" dir="rtl">
...By default, style.css is used in template files, it contains styles for both directions.
If you want to use one direction, you can replace it with a more efficient version style.{direction}.css.
<link rel="stylesheet" href="css/style.css">.<link rel="stylesheet" href="css/style.rtl.css">If you are working with source code:
Described in the "Sources" section.
If you are working with HTML files:
HTML/{THEME_NAME}/{*}.html (for example HTML/default/index.html);If you are working with source code:
Open src/twig/header/nav-panel.twig and/or src/twig/header/mobile-header.twig.
Find:
<!-- for desktop: -->
<div class="nav-panel nav-panel--sticky" data-sticky-mode="pullToShow">
<!-- for mobile: -->
<div class="mobile-header mobile-header--sticky" data-sticky-mode="pullToShow">Specify the value of data-sticky-mode attribute (possible values: pullToShow, alwaysOnTop);
If you are working with HTML files:
HTML/{THEME_NAME}/{*}.html (for example HTML/default/index.html);If you are working with source code:
Open src/twig/header/nav-panel.twig and/or src/twig/header/mobile-header.twig.
Find:
<!-- for desktop: -->
<div class="nav-panel nav-panel--sticky" data-sticky-mode="pullToShow">
<!-- for mobile: -->
<div class="mobile-header mobile-header--sticky" data-sticky-mode="pullToShow">Remove nav-panel--sticky and/or mobile-header--sticky class;
If you are working with HTML files:
HTML/{THEME_NAME}/product{*}.html (for example HTML/default/product.html);If you are working with source code:
src/twig/partials/product-tabs.twig;product-tabs--sticky class.Version 1.14.0 – August 15, 2021
3.5.1 to 3.6.0;Version 1.13.0 – May 14, 2020
4.4.1 to 4.5.0;5.11.2 to 5.13.0;3.4.1 to 3.5.1;14.1.0 to 14.5.0;4.0.12 to 4.0.13.Version 1.12.0 – March 23, 2020
Version 1.11.0 – March 7, 2020
Version 1.10.0 – March 4, 2020
Version 1.9.0 – February 27, 2020
Version 1.8.0 – February 15, 2020
Version 1.7.1 – January 25, 2020
Version 1.7.0 – December 6, 2019
4.2.1 to 4.4.1;5.6.1 to 5.11.2;3.3.1 to 3.4.1;12.1.0 to 14.1.0;4.0.10 to 4.0.12;Version 1.6.0 – November 1, 2019
Version 1.5.0 – October 7, 2019
Version 1.4.0 – August 16, 2019
Version 1.3.1 – August 2, 2019
Version 1.3.0 – July 6, 2019
Version 1.2.0 – April 27, 2019
Version 1.1.0 – March 15, 2019
Version 1.0.0 – February 17, 2019
SVG icons are not displayed when opening HTML files in a browser
When loading pages via file:// URI, due to the security policy,
browsers block the loading of external SVG icons because they have a unique origin.
To fix this, you need to open HTML files using the HTTP/HTTPS protocol.
To do this, launch a local HTTP server or upload files to a remote server.