Documentation - Color Admin

Generate the css & plugins file from gulp command

cd /your-path-url/template_asp/ColorAdmin/

npm install --force
gulp all-css
gulp plugins

Download the .NET Core SDK from official website and install on your machine.

If you are using dotnet cli, run the following command:

cd /your-path-url/template_asp/ColorAdmin/

dotnet run
dotnet watch

If you are using visual studio, just double click the ColorAdmin.sln inside the template folder. You may download the latest version of Visual studio from here.

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into asp folder -->
/admin/template/template_asp/ColorAdmin/wwwroot/img

File structure overview for .NET Core 8.0 MVC Version

template_asp/
├── ColorAdmin.sln        
└── ColorAdmin/
    ├── Areas/                        // ASP Identity Files
    ├── bin/
    ├── Controllers/
    ├── Data/
    ├── Models/
    ├── obj/
    ├── Properties/
    ├── src/                          // scss / img / js source file
    ├── Views/
    ├── wwwroot/                      // generated css / js / img file
    ├── app.db
    ├── Program.cs
    ├── Startup.cs
    ├── appsettings.development.json
    ├── appsettings.json
    ├── package.json
    ├── sidebar.json                  // sidebar menu structure
    ├── ScaffoldingReadMe.txt
    ├── gulpfile.js                   // gulp setting files
    └── ColorAdmin.csproj

Below is the general page structure for /Views/Shared/Layout.cshtml.

@using Microsoft.AspNetCore.Http

@{
  string appMode = "";
  if (Context.Request.Cookies.TryGetValue("app-theme-dark-mode", out string appModeValue))
  {
    if (appModeValue == "dark-mode") {
      appMode = "dark";
    }
  }
}
<!DOCTYPE html>
<html lang="en" data-bs-theme="@appMode" @ViewData["AppHtmlAttr"]>
<head>
  <meta charset="utf-8" />
  <title>Color Admin | @ViewData["Title"]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="@ViewData["MetaDescription"]" />
  <meta name="author" content="@ViewData["MetaAuthor"]" />
  <meta name="keywords" content="@ViewData["MetaKeywords"]" />

  @RenderSection("MetaTag", required: false)

  <!-- ================== BEGIN core-css ================== -->
  <link href="~/css/vendor.min.css" rel="stylesheet" />
  <link href="~/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->

  @RenderSection("Styles", required: false)
</head>
<body class="@ViewData["AppBodyClass"]">
  <!-- BEGIN #app -->
  <div id="app" class="app @(ViewData["AppSidebarNone"] == null ? "app-sidebar-fixed" : "") @(ViewData["AppHeaderNone"] == null ? "app-header-fixed" : "") @ViewData["AppClass"]">
    @if (ViewData["AppHeaderNone"] == null) {
      <partial name="_Header" />
    }
    
    @if (ViewData["AppTopMenu"] != null) {
      <partial name="_TopMenu" />
    }

    @if (ViewData["AppSidebarNone"] == null) {
      <partial name="_Sidebar" />
    }
    
    @if (ViewData["AppSidebarTwo"] != null) {
      <partial name="_SidebarRight" />
    }

    @if (ViewData["AppEmpty"] == null) {
      <div id="content" class="app-content @ViewData["AppContentClass"]" @ViewData["AppContentAttr"]>
        @RenderBody()
      </div>
    } else {
      @RenderBody()
    }

    @RenderSection("AppOutterContent", required: false)
  </div>
  <!-- END #app -->

  <!-- ================== BEGIN core-js ================== -->
  <script src="~/js/vendor.min.js"></script>
  <script src="~/js/app.min.js"></script>
  <!-- ================== END core-js ================== -->
  @RenderSection("Scripts", required: false)
</body>
</html>

All the css plugin files used in ColorAdmin has been compiled into one single files vendor.min.css by using gulp. Below is the list of library included in vendor.min.css. You may change the setting in gulpfile.js if you wish to add / remove library from vendor.min.css.

FontAwesome
jQuery UI
Animate.css
Pace Loader
Perfect Scrollbar

For app.min.css, it will be the core css file for Color Admin which combine bootstrap 5 scss compiled by using gulp as well. You may check the source code from /admin/src/scss/default/

This theme compiles 6 javascript library into one single file vendor.min.js by using gulp. Below is the list of library included in app.min.js. You may change the setting in gulpfile.js if you wish to add / remove library from vendor.min.js.

Pace Loader
jQuery
jQuery UI
Bootstrap
Perfect Scrollbar
JavaScript Cookie

For app.min.js, it will be the core js file for Color Admin which compiled by using gulp as well. You may check the source code from /admin/src/js/app.js

Below is the list of ViewData you can use to set the application layout

@{
  @ViewData["Title"]            = "Page Title";
  @ViewData["AppHeaderNone"]    = "true";
  @ViewData["AppHeaderInverse"] = "true";
  @ViewData["AppTopMenu"]       = "true";
  @ViewData["AppSidebarNone"]   = "true";
  @ViewData["AppSidebarTwo"]    = "true";
  @ViewData["AppSidebarTransparent"] = "true";
  @ViewData["AppEmpty"]         = "true";
  @ViewData["AppClass"]         = "-- css class --";
  @ViewData["AppBodyClass"]     = "-- css class --";
  @ViewData["AppContentClass"]  = "-- css class --";
  @ViewData["AppContentAttr"]   = "-- data attribute --";
  @ViewData["AppHtmlAttr"]      = "-- data attribute --";
}

Add the data-bs-dark="true" attribute to <html> in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load.

<html lang="en" data-bs-theme="dark" @ViewData["AppHtmlAttr"]>>

Apple Design

Change the base css file from default to apple in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.

<link href="~/css/apple/app.min.css" rel="stylesheet" />
<link href="~/lib/ionicons/css/ionicons.min.css" rel="stylesheet" />

Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
```
<div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</div>
```

Facebook Design

Change the base css file from default to facebook in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<link href="~/css/facebook/app.min.css" rel="stylesheet" />
```
Add the attribute data-bs-theme="dark" to the .app-header container in template_asp/ColorAdmin/Views/Shared/_Header.cshtml.
```
<div id="header" class="app-header" data-bs-theme="dark">
  ...
</div>
```

Transparent Design

Change the base css file from default to facebook in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<link href="~/css/transparent/app.min.css" rel="stylesheet" />
```

Add the .app-cover next to the <body> tag in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.

<body class="@ViewData["AppBodyClass"]">
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

Change the base css file from default to facebook in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<link href="~/css/google/app.min.css" rel="stylesheet" />
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Add the class .app-with-wide-sidebar to the .app container in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
```

Add the navbar desktop toggler to the .app-header in template_asp/ColorAdmin/Views/Shared/_Header.cshtml.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="/" class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

Change the base css file from default to material in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<link href="~/css/material/app.min.css" rel="stylesheet" />
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Add the class .app-with-wide-sidebar to the .app container in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.
```
<div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
```

Add the navbar desktop toggler to the .app-header in template_asp/ColorAdmin/Views/Shared/_Header.cshtml.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Add the floating navbar form to the .app-header in template_asp/ColorAdmin/Views/Shared/_Header.cshtml AND REMOVE the default .navbar-form.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" data-toggle="app-header-floating-form" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close" data-dismiss="app-header-floating-form">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>

Change the .app-loader in template_asp/ColorAdmin/Views/Shared/_Layout.cshtml.

<!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

If you wish to enable the gulp compilation during debug / release process, kindly enable the following option in ColorAdmin.csproj.

Do not forget to run the npm install command by using command prompt / terminal to generate the node_module folder.

// remove the comment syntax
 
<!--
<Target Name="MyPreCompileTarget" BeforeTargets="Build">
  <Exec Command="gulp" />
</Target>
-->

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/reactstrap

{
  "name": "color-admin",
  "version": "5.3.3",
  "description": "Color Admin",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "SeanTheme",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-file-include": "^2.3.0",
    "gulp-header": "^2.0.9",
    "gulp-livereload": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "gulp-uglify-es": "^3.0.0",
    "merge-stream": "^2.0.0",
    "sass": "^1.72.0"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.2.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fullcalendar/bootstrap": "^6.1.11",
    "@fullcalendar/core": "^6.1.11",
    "@fullcalendar/daygrid": "^6.1.11",
    "@fullcalendar/interaction": "^6.1.11",
    "@fullcalendar/list": "^6.1.11",
    "@fullcalendar/timegrid": "^6.1.11",
    "@highlightjs/cdn-assets": "^11.9.0",
    "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
    "angular": "^1.8.2",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.30",
    "animate.css": "^4.1.1",
    "apexcharts": "3.47",
    "blueimp-file-upload": "^10.32.0",
    "blueimp-gallery": "^3.4.0",
    "bootstrap": "^5.3.3",
    "bootstrap-datepicker": "^1.10.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-datetime-picker": "^2.4.4",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "bootstrap-timepicker": "^0.5.2",
    "bootstrap3-wysihtml5-bower": "^0.3.3",
    "chart.js": "^4.4.2",
    "clipboard": "^2.0.11",
    "d3": "^3.5.17",
    "datatables.net": "^2.0.3",
    "datatables.net-autofill": "^2.7.0",
    "datatables.net-autofill-bs5": "^2.7.0",
    "datatables.net-bs5": "^2.0.3",
    "datatables.net-buttons": "^3.0.1",
    "datatables.net-buttons-bs5": "^3.0.1",
    "datatables.net-colreorder": "^2.0.0",
    "datatables.net-colreorder-bs5": "^2.0.0",
    "datatables.net-fixedcolumns": "^5.0.0",
    "datatables.net-fixedcolumns-bs5": "^5.0.0",
    "datatables.net-fixedheader": "^4.0.1",
    "datatables.net-fixedheader-bs5": "^4.0.1",
    "datatables.net-keytable": "^2.12.0",
    "datatables.net-keytable-bs5": "^2.12.0",
    "datatables.net-responsive": "^3.0.1",
    "datatables.net-responsive-bs5": "^3.0.1",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",
    "datatables.net-scroller": "^2.4.1",
    "datatables.net-scroller-bs5": "^2.4.1",
    "datatables.net-select": "^2.0.0",
    "datatables.net-select-bs5": "^2.0.0",
    "datepickk": "^1.4.1",
    "dropzone": "^5.9.3",
    "flag-icons": "^7.2.1",
    "flot": "^4.2.6",
    "gritter": "^1.7.4",
    "intro.js": "^7.2.0",
    "ion-rangeslider": "^2.3.1",
    "ionicons": "^7.3.0",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.7.1",
    "jquery-knob": "^1.2.11",
    "jquery-migrate": "^3.4.1",
    "jquery-mockjax": "^2.6.1",
    "jquery-sparkline": "^2.4.0",
    "jquery-ui-dist": "^1.13.2",
    "jquery.maskedinput": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jstree": "^3.3.16",
    "jszip": "^3.10.1",
    "jvectormap-content": "^0.1.0",
    "jvectormap-next": "^3.1.1",
    "kbw-countdown": "^2.1.1",
    "lightbox2": "^2.11.4",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "nvd3": "^1.8.6",
    "oclazyload": "^1.1.0",
    "pace-js": "^1.2.4",
    "parsleyjs": "^2.9.2",
    "pdfmake": "^0.2.10",
    "perfect-scrollbar": "^1.5.5",
    "photoswipe": "^5.4.3",
    "raphael": "^2.3.0",
    "select-picker": "^0.3.2",
    "select2": "^4.0.13",
    "simple-line-icons": "^2.5.5",
    "spectrum-colorpicker2": "^2.0.10",
    "summernote": "^0.8.20",
    "sweetalert": "^2.1.2",
    "swiper": "^11.0.7",
    "switchery": "github:abpetkov/switchery",
    "tag-it": "^2.0.0",
    "x-editable-bs4": "^1.5.6"
  }
}

Color Admin

A) Installation - top

B) File Structure - top

C) Page Structure - top

D) CSS - top

E) Javascript - top

F) Page Options - top

G) Dark Mode - top

H) Switch Design - top

Apple Design

Facebook Design

Transparent Design

Google Design

Material Design

I) Gulp Compilation - top

J) NPM Package - top