There are two ways to start using the Meblya template:
After downloading and unpacking the Meblya template, pre-compiled HTML files will be located in the HTML directory.
So, the HTML directory will look like after unpacking:
HTML/
classic/
dark/This directory contains different versions of the template:
Choose the one you want to use (for example classic):
HTML/
classic/
css/
images/
js/
vendor/
404.html
about-us.html
account.html
blog.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.
To continue customizing the template, go to the "Customization" section.
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>
<!-- mobilemenu -->
<div class="mobilemenu">
...
</div>
<!-- mobilemenu / end -->
<!-- site -->
<div class="site">
<!-- 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 -->
<!-- photoswipe -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- photoswipe / end -->
</body>This template uses six css files:
css/style.css but only contains styles for LTR direction.css/style.css but only contains styles for RTL direction.
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 content:
- Components:
- alert
- breadcrumb
- button-remove
...
- Common:
...
- Blog:
...
- Shop:
...
- Blocks:
...
- Widgets:
...
- Filters:
...
- Header:
...
- Footer:
...
---------------------------------------- */
/* ----------------------------------------
// Components
// ---------------------------------------- */
/*
* alert
*/
...
/*
* breadcrumb
*/
...
/*
* button-remove
*/
...
/* ----------------------------------------
// Common
// ---------------------------------------- */
...This template uses seven javascript files:
We used two fonts in this template:
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 of 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.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": "Meblya"
}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/
shop/
widgets/
_custom.scss
_custom-variables.scss
_dark-theme.scss
_functions.scss
_mixins.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 enable dark header and footer, open the _custom-variables.scss file, then find and uncomment following line:
//@import 'dark-theme';
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:
$direction == ltr and $both-directions == false:.alert {
margin-left: 20px;
}$direction == rtl and $both-directions == false:.alert {
margin-right: 20px;
}$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:
In HTML files, find comments <!-- logo --> and <!-- 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.If you are working with HTML files:
<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i">css/style.css file.body {
font-family: "YOUR_FONT_NAME";
}If you are working with source code:
src/twig/layouts/basic.twig file.<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,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.
If you are working with HTML files:
HTML/{THEME_NAME}/{*}.html (for example HTML/classic/index.html);dir attribute (ltr or rtl) for <html> tag, for example:<!DOCTYPE html>
<html lang="en" dir="rtl">
...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.
Version 1.3.0 – January 18, 2022
3.4.1 to 3.6.0;4.4.1 to 5.1.3 and other dependencies;Version 1.2.0 – March 11, 2020
4.3.1 to 4.4.1;3.3.1 to 3.4.1;13.1.4 to 14.1.1;5.8.1 to 5.12.1;Version 1.1.0 – March 29, 2019
4.1.3 to 4.3.1;5.6.1 to 5.8.1;12.1.0 to 13.1.4.Version 1.0.0 – January 20, 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.