Get Started,

We are here to support,

If you encounter any difficulties while editing this template or have any questions, please don't hesitate to reach out to us through our support page. We are here to help!

The guidelines provided here explain the basic structure and framework of the template. We've outlined all unique criteria to make understanding easy. For third-party components, we recommend visiting their official documentation for complete guidelines. Visual Studio Code was used as the editor for this documentation and code writing.

Required things:

1. A good code editor of your choice (we recommend VS Code)
2. A latest good web browser
3. node.js installed on your machine (we developed with v20.11)
4. Intermediate html knowledge
5. Intermediate scss knowledge
6. Intermediate javascript and jQuery knowledge

Important: Please read the documentation thoroughly before customizing this template. Incorrect modifications can lead to severe layout problems. Support is not available for customization errors.

Project Structure

Folders and file structure is important to understand

Here very basic outline presented to show how project is organized. All node modules folder will not be included. We have kept dist folder where all complied files will be available to quick preview in browser by opening it into browser. When you run the project dist folder will be updated each time you build project

 downloaded Zip file
 |-- .vscode
 |-- dist
 |-- src
 |   |-- assets
 |   |   |-- img
 |   |   |-- js
 |   |   |   |--component
 |   |   |   |--core
 |   |   |   |--investment
 |   |   |   |--app.js
 |   |   |-- scss
 |   |   |-- vendor
 |   |-- pages
 |   |-- partials
 |   |   |-- footer
 |   |   |-- header
 |   |   |-- navigation
 |   |   |-- pageloader
 |   |   |-- scripts
 |-- .babelrc
 |-- .gitignore
 |-- .htmllintrc
 |-- .jshintrc
 |-- package.json
 |-- postcss.conig.js
 |-- README.md
 |-- Webpack.config.js
                                            

Run Project

Just follow few steps and start running in local host.

Using webpack gives you complete control over the template and dependency management, automating all the important tasks so you don't have to. We'll provide detailed instructions to help you get the most out of the template, even if you're new to npm, webpack, and partials.

To streamline your workflow, our template build with webpack, webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser. Before starting with the template, you'll need to set up a Node.js environment. If you already have Node.js and npm installed on your machine, you can move to the next sections.

Quickly unzip the downloaded template file and open it your code editor like we have used Visual Code. Once you are done, you will required to install the project dependencies with npm, that we previously installed. Enter the following command at the root of the folder :

npm install

This command will automatically fetch all the dependencies listed in your package.json file and install them in your project (creating a new directory named node_modules). Once the installation is complete, you are ready to start using webpack and begin your development process. Before you get started, let's take a closer look at the template structure and how everything is organized like in previous section we have mentioned.

Start development

To start development, you will require to run the below command at terminal of your project root:

npm start

This will execute a series of tasks mentioned in package.json and webpack.config.js, including the compilation of the Sass files, the concatenation of the Javascript files, the compilation of the partial templates with webpack and html-loader, and the start of the BrowserSync server. Once all series of tasks are completed, automatically open browser with server port or you can open your browser and go to http://localhost:8080 to see the template live and make modification to preview it.

Build Project

When you are done with changes and updates, you can build project for deployment. To initiate deployment process, run specified command within project root directory:

npm run build

This will again execute a series of tasks mentioned in webpack.config.js, including the compilation of the Scss files, the concatenation of the Javascript files, the compilation of the partial templates with webpack and html-loader, the minification of the CSS and Javascript files, and the creation of the dist folder, which contains all the files that you need.

Customization

Theme-styles, scripts, partials and more...

theme-styles

Our styles used cookie, you should have cookie enabled and use server, localhost to make it works. We have different set of predefined styles, you can pick one of it by changing just class name like theme-yellow, theme-red, theme-purple so on...

All theme-classes list and you can also check colors in personalization section of template to customize layout interface:

• theme-default
• theme-blue
• theme-indigo
• theme-purple
• theme-pink
• theme-red
• theme-orange
• theme-yellow
• theme-green
• theme-teal
• theme-cyan
• theme-grey
• theme-brown
• theme-chocolate
• theme-black

Create your own by changing variables color codes in _variable.scss for light and dark mode.

:root,
[data-bs-theme=light]{
    .theme-[your theme style name like: theme-company] {

        /* theme colors */
        --adminuiux-theme-1: #0049e8;
        --adminuiux-theme-1-hover: #003fc7;
        --adminuiux-theme-1-active: #0037ad;
        --adminuiux-theme-1-rgb: 0, 73, 232;
        --adminuiux-theme-1-text: #ffffff;
        --adminuiux-theme-2: rgb(76, 189, 255);
        --adminuiux-theme-2-rgb: 76, 189, 255;
        --adminuiux-theme-2-text: #ffffff;

        /* theme accent colors */
        --adminuiux-theme-accent-1: #03045e;
        --adminuiux-theme-accent-1-hover: #01024b;
        --adminuiux-theme-accent-1-active: #010235;
        --adminuiux-theme-accent-1-rgb: 3, 4, 94;
        --adminuiux-theme-accent-1-text: #ffffff;
        --adminuiux-theme-accent-2: rgb(171, 19, 197);
        --adminuiux-theme-accent-2-rgb: 171, 19, 197;
        --adminuiux-theme-accent-2-text: #ffffff;

        /* theme general colors */
        --adminuiux-bg-1: #e6eef5;
        --adminuiux-bg-2: #badaf0;

        /* other */
        --bs-link-color: #657792;
    }
}

[data-bs-theme=dark] {
    .theme-[your theme style name like: theme-company] {
        --adminuiux-bg-1: #01051b;
        --adminuiux-bg-2: #09113d;
        
        /* bs colors */
        --bs-dd-bg: #192447;
        --bs-link-color: rgba(255, 255, 255, 0.5);
        --bs-body-bg: var(--adminuiux-bg-1);
    }
}
                                            

One color template

For static single color template and no need of color personalization selection. We recommend to remove color-scheme js from scripts files from assets > js > app.js.

 
import './core/color-scheme.js'
            

Now you can add theme-* class to your template main body like below mentioned.

<body class="theme-teal" data-theme="theme-teal">
            

Scripts

There you can add and remove js from layout app.js script bundling file. You can find relative script partials under assets > js > app.js. file and respective folder in assets > js.. Basic code structure for bundling script files are as below in app.js.

// main style.scss
import "../scss/style.scss";

....
....
other third parties import
....
....

// global js
import './core/functions.js';
import './core/main.js';
import './core/responsive.js';
import './core/color-scheme.js'         
            

Partials

You can find partial folder in main downloaded file folder. Partial can be used to have chunk of code to be adopted in multiple files. If you have created index-header partial, it can be call or have html code in any page with <%= require('../partials/headbody/headbody.html').default %>. When you compile project or run, header code will be available in respective page name defined webpack.config.js.

<!-- page head section with body -->
<%= require('../partials/headbody/headbody.html').default %>

<!-- page loader -->
<%= require('../partials/pageloader/investment-pageloader.html').default %>

<!-- page header main navigation -->
<%= require('../partials/header/investment-header.html').default %>

<!-- page wrapper -->
<div class="adminuiux-wrap">

<!-- standard sidebar -->
<%= require('../partials/navigation/investment-sidebar.html').default %>

</div>

<!-- page footer -->
<%= require('../partials/footer/investment-footer.html').default %>
<%= require('../partials/offcanvas/theming.html').default %>

<!-- page Level js -->
<!-- page body close -->
<%= require('../partials/footbody/footbody.html').default %>
            

Page should be defined in the webpack with title, page name and source url withing htmlwebpackplugin.

// blank
new HtmlWebpackPlugin({ 
    filename: "index.html", 
    template: "!!html-webpack-plugin/lib/loader.js!./src/pages/index.html", 
    inject: true, 
    hash: true, 
    title: "Blank Page" 
}),
                                                    

Fill or Change element's color

You can change color for header in multiple ways by using classes on body tag

<body class="adminuiux-header-fill-accent" >
            

You can check preview with personalization, Also available option are as below:

• adminuiux-header-fill-white
• adminuiux-header-fill-bg
• adminuiux-header-fill-theme
• adminuiux-header-fill-accent

You can change color for sidebar similar to header in multiple ways by using classes on body tag

<body class="adminuiux-sidebar-fill-accent" >
            

You can check preview with personalization, Also available option are as below:

• adminuiux-sidebar-fill-white
• adminuiux-sidebar-fill-bg
• adminuiux-sidebar-fill-theme
• adminuiux-sidebar-fill-accent

You can change color for background color of main page along with style.
Also there are gradient color defined to use it by using classes on body tag

<body class="bg-white" >
            

You can check preview with personalization, Also available option are as below:

• bg-default
• bg-white
• bg-r-gradient
• bg-gradient-1
• bg-gradient-2
• bg-gradient-3
• bg-gradient-4
• bg-gradient-5
• bg-gradient-6
• bg-gradient-7
• bg-gradient-8
• bg-gradient-9
• bg-gradient-10

Dark Mode

You can change layout light mode to dark mode by using attribute as below on on html tag.

<html lang="en" data-bs-theme="dark" >
            

RTL

As always there is quick and simple way to use RTL with just putting attribute on html tag

<html lang="en" dir="rtl">
            

Special Thanks,

We thank all the third parties and supportive communities.

Third party libraries

Here are some major library and resource used to develop our template:

• Bootstrap 5.3.x
• Bootstrap icons
• Dropzone
• Feather icons
• Chart js
• Full calendar
• Date range picker
• Progress bar
• SmartWizard
• Swiper
• DataTable
• and many more...

Images

We have used placeholder images photo library from https://picsum.photos/ which has MIT license. Also there is quick way to use random placeholder photo image like https://picsum.photos/1000/600

We have used placeholder avatar picture library from https://pravatar.cc/ which has CC0 license. Also there is quick way to use random avatar pic like https://i.pravatar.cc/300

We have used some of images created with AI. AI images are made with "Image Creator from Designer". Powered by DALL·E 3 from Skype App Windows.