Setup

Introduction

Axetic is build in ASP.NET MVC 5 web app using Visual Studio 2022. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Visual Studio

    Make sure to have the Latest Visual Studio installed & running on your computer. If you already have installed latest Visual Studio on your computer, you can skip this step.

  • Yarn

    Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node letest version 20*.

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command npm install -g gulp from your terminal.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command Description
Open Solution file Open Axetic.sln file with Visual studio and make sure to check asstes folder contain libs folder.

Light Version

Keep your body element with data attribute data-layout-mode="light" E.g. <body data-layout-mode="light"> to have light layout.

Dark Version

Keep your body element with data attribute data-layout-mode="dark" E.g. <body data-layout-mode="dark"> to have dark layout.

RTL Version

To have rtl layout enabled, replace the reference of app.min.css to app-rtl.min.css and bootstrap.min.css to bootstrap-rtl.min.css and in the Views/Shared/_Layout.cshtml file update the html tag like <html lang="en" dir="rtl">.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform in:

image
Light Sidebar
Remove data attribute data-sidebar="dark" body element to have light sidebar.
image
Compact Sidebar
Keep your body element with data attribute data-sidebar-size="md" E.g. <body data-sidebar-size="md"> to have compact sidebar.
image
Icon View Sidebar
Keep your body element with data attribute data-sidebar-size="sm" E.g. <body data-sidebar-size="sm"> to have small sidebar.
image
Boxed Layout
Keep your body element with data attribute data-layout-size="boxed" E.g. <body data-layout-size="boxed"> to have boxed layout.
image
Brand Sidebar
Keep your body element with data attribute data-sidebar="brand" E.g. <body data-sidebar="brand"> to have colored sidebar.
image
Scrollable Layout
Keep your body element with data attribute data-layout-scrollable="true" E.g. <body data-layout-scrollable="true"> to have scrollable layout.
Multi Language Settings

Lets add french language.

  • Create new file fr.json in the fr folder in the wwwroot/assets/lang folder and copy the en.json file code in this file.
  • Now you need to add the language in the wwwroot/assets/js/lang/jquery.multiLanguage.js file. In the function setLanguage add the "else if" condition as below and make sure to add french.jpg file. 
        else if(lang=='fr') {
document.getElementById("header-lang-img").src = "assets/images/flags/french.jpg";
}
  • You can simply use in the HTML file to convert the language text just add the attribute "key" to the parent div or any HTML tag. Example: <div key="t-title">This is title.</div>
Tips

SCSS: We suggest you to do not change any scss files from the assets/scss/custom folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you to create new custom.scss file and use that instead of overwrite any theme's custom scss files.