Stroyka Admin

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!

Support

You can get support by filling out the form on the support page. The answer will be sent to the email specified in the settings. Don't forget to specify the purchase code.

What does support include and what does not?

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item's features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

Item support does not include:

  • Customization services
  • Installation services

For more details, view the item support policy.

I have not received an answer

First of all, do not worry, most likely you did not receive an answer for one of the following reasons:

  • The author's response time can be up to 2 business days (What business day means?).
  • Perhaps in the settings you specified an invalid email address, and the author simply cannot contact you. Check it out.

Getting Started

There are two ways to start using the Stroyka Admin template:

  • The first way is to use pre-compiled HTML files. The description of this method is below;
  • The second way is to build a template from sources, it is suitable for experienced developers (See the section Sources).

Pre-compiled HTML

After downloading and unpacking the Stroyka Admin template, pre-compiled HTML files will be located in the HTML directory.

So, the HTML directory will look like after unpacking:

HTML/
  ajax/
  css/
  images/
  js/
  vendor/
  index.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.

Please note that any errors or broken layouts that result from you editing the CSS or JavaScript files are not covered by support. Edit these files at your own risk.

HTML Structure

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>
    <!-- sa-app -->
    <div class="sa-app sa-app--desktop-sidebar-shown sa-app--mobile-sidebar-hidden sa-app--toolbar-fixed">
        <!-- sa-app__sidebar -->
        <div class="sa-app__sidebar">
            ...
        </div>
        <!-- sa-app__sidebar / end -->

        <!-- sa-app__content -->
        <div class="sa-app__content">
            <!-- sa-app__toolbar -->
            <div class="sa-toolbar sa-toolbar--search-hidden sa-app__toolbar">
                ...
            </div>
            <!-- sa-app__toolbar / end -->

            <!-- sa-app__body -->
            <div id="top" class="sa-app__body">
                ...
            </div>
            <!-- sa-app__body / end -->

            <!-- sa-app__footer -->
            <div class="sa-app__footer d-block d-md-flex">
                ...
            </div>
            <!-- sa-app__footer / end -->
        </div>
        <!-- sa-app__content / end -->

        <!-- sa-app__toasts -->
        <div class="sa-app__toasts toast-container bottom-0 end-0">
            ...
        </div>
        <!-- sa-app__toasts / end -->
    </div>
    <!-- sa-app / end -->
</body>

CSS Files

This template uses ten css files:

  • css/style.css
    Main template stylesheet. Contains styles for both directions, but you can use versions containing styles for only one direction css/style.ltr.css, css/style.rtl.css.
  • vendor/bootstrap/css/bootstrap.ltr.css
    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. There is also an RTL version vendor/bootstrap/css/bootstrap.rtl.css.
  • vendor/highlight.js/styles/github.css
    Syntax highlighting for the Web. Used in example codes.
  • vendor/simplebar/simplebar.min.css
    Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
  • vendor/quill/quill.snow.css
    Quill is a modern WYSIWYG editor built for compatibility and extensibility.
  • vendor/air-datepicker/css/datepicker.min.css
    Lightweight cross-browser jQuery datepicker.
  • 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/datatables/css/dataTables.bootstrap5.min.css
    Add advanced interaction controls to your HTML tables.
  • vendor/nouislider/nouislider.min.css
    Lightweight JavaScript range slider library with full multi-touch support.
  • vendor/fullcalendar/main.min.css
    Full-sized drag & drop event calendar.

style.css

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
// - Bootstrap
//   - accordion
//   - alert
//   - badge
//   ...
// - Components
//   ...
// - Layout
//   ...
// - Widgets
//   ...
// - Inbox
//   ...
// - Chat
//   ...
// - Blocks
//   ...
// - Demo
//   ...
*/

/*
// Common
*/
    ...

/*
// Bootstrap
*/
    ...

/*
// Components
*/
    ...

/*
// Layout
*/
    ...

...

Javascript

The template uses three script files:

  • js/stroyka.js
    The main script file. Usually, you don't need to edit it.
  • js/custom.js
    This is where you can write your scripts. It already contains some scripts that you can freely edit.
  • js/calendar.js
    Calendar related scripts.

Two more are used for demonstration purposes only (you can delete them):

  • js/demo.js
    Contains scripts for demonstration purposes only.
  • js/demo-chart-js.js
    Responsible for initializing Chart.js charts.

And fifteen third-party scripts:

  • vendor/jquery/jquery.min.js
    jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • vendor/feather-icons/feather.min.js
    Simply beautiful open source icons.
  • vendor/simplebar/simplebar.min.js
    Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
  • vendor/bootstrap/js/bootstrap.bundle.min.js
    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
  • vendor/highlight.js/highlight.pack.js
    Syntax highlighting for the Web. Used in example codes.
  • vendor/quill/quill.min.js
    Quill is a modern WYSIWYG editor built for compatibility and extensibility.
  • vendor/air-datepicker/js/datepicker.min.js
    Lightweight cross-browser jQuery datepicker.
  • vendor/air-datepicker/js/i18n/datepicker.en.js
    English localization for air datepicker.
  • 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.
  • vendor/fontawesome/js/all.min.js
    Replaces FontAwesome icons with SVG.
  • vendor/chart.js/chart.min.js
    Simple yet flexible JavaScript charting for designers & developers.
  • vendor/datatables/js/jquery.dataTables.min.js
    Add advanced interaction controls to your HTML tables.
  • vendor/datatables/js/dataTables.bootstrap5.min.js
    DataTables integration for Bootstrap 5.
  • vendor/nouislider/nouislider.min.js
    Lightweight JavaScript range slider library with full multi-touch support.
  • vendor/fullcalendar/main.min.js
    Full-sized drag & drop event calendar.

Fonts

We used one font in this template:

To find out how to change the font, the customization section.

Sources

Attention! This section is for advanced users.

Template source codes are in the Sources directory. After downloading and unpacking the template, the Sources directory will look like this:

Sources/
    src/
        ...
    .browserslistrc
    package.json
    package-lock.json
    ...

Preparation

  1. Make sure your system has installed Node.js.
  2. Open a terminal window and go to the Source directory.
  3. Run the npm install command. This command will load all necessary dependencies specified in the package.json file.

Building system

The template uses a custom build system based on React.js. The configuration is in the pulsar.config.tsx file.

To build the project run the command:

npm run build

After executing the command, the compiled template will be located in the dist directory.

To start a build with change tracking, run the command:

npm run dev

Source files description

The directory with the source files (Sources/src) is divided into the following subdirectories and files:

  • components - Contains React components and functions that are used in pages.
  • data - Static data.
  • images - Images used in the template.
  • js - JavaScript files used in the template.
  • pages - React components that will be compiled into HTML pages.
  • scss - Style files. See description below.
  • svg - Custom SVG icons used in the template.
  • highlight.js - The entry point for compiling highlight.js using webpack.

SCSS Files

The directory with SCSS files contains the following files and subdirectories:

scss/
    blocks/
    bootstrap/
    common/
    components/
    demo/
    inbox/
    mixins/
    widgets/
    _bootstrap-utilities.scss
    _bootstrap-variables.scss
    _custom-variables.scss
    _custom.scss
    _direction.scss
    _functions.scss
    _variables.scss
    bootstrap.scss
    style.scss

You 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.

How does LTR/RTL support work?

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.scope mixin.

This example demonstrates how it works:

@use 'direction' as dir;

.alert {
    @include dir.scope {
        #{dir.$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;
    }

What if you want to use only one direction?

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 directions

Customization

How to change logo?

If you are working with HTML files:

  • Sidebar logo - In HTML files, find comments <!-- logo --> and <!-- logo / end --> and replace code between them with your logo image.
  • Invoice logo - In invoice.html, find comments <!-- invoice-logo --> and <!-- invoice-logo / end --> and replace code between them with your logo image.

If you are working with source code:

  • Sidebar logo
    1. Open the src/components/SidebarLogo.tsx file.
    2. Find <Comment value="logo" /> and <Comment value="logo / end" /> and replace code between them with your logo image.
  • Invoice logo
    1. Open the src/components/InvoiceLogo.tsx file.
    2. Find <Comment value="invoice-logo" /> and <Comment value="invoice-logo / end" /> and replace code between them with your logo image.

How to change font?

If you are working with HTML files:

  1. In HTML files find and replace with the desired font:
    <!-- fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i" />
  2. Open the css/style.css file.
  3. Insert at the end:
    body {
        font-family: "YOUR_FONT_NAME";
    }

If you are working with source code:

  • Open the src/components/Layout.tsx file.
  • Find and replace with the desired font:
    {/* fonts */}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i" />
  • Open the src/scss/_custom-variables.scss file.
  • And define a special variable, as in the example below:
    $sa-font-family: 'YOUR_FONT_NAME';

How to change theme color scheme?

If you are working with source code:

  1. Open the src/scss/_custom-variables.scss file.
  2. Find the code below:
    // Change main theme color
    //$sa-scheme-theme--main-color:     #aadcec !default;
    //$sa-scheme-theme--opposite-color: #3d464d !default;
  3. Uncomment these lines and replace the colors with the ones you need.

How to remove/change copyright notice?

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:

  1. Open the src/components/App.tsx file
  2. Find <Comment value="copyright" /> and <Comment value="copyright / end" />, then replace code between them with your copyright.

Changelog

Version 1.0.0 – August 12, 2020

  • Initial Release

Credits