Documentation - Color Admin

This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.

<!-- begin #page-container -->
<div id="page-container" class="fade">
  <!-- begin #header -->
  <div id="header" class="header navbar navbar-transparent navbar-fixed-top">
    <!-- header here -->
  </div>
  <!-- end #header -->
  
  <!-- begin #home -->
  <div id="home" class="content has-bg home">
    <!-- home here -->
  </div>
  <!-- end #home -->
  
  <!-- begin #about -->
  <div id="about" class="content" data-scrollview="true">
    <!-- about us here -->
  </div>
  <!-- end #about -->

  <!-- begin #milestone -->
  <div id="milestone" class="content bg-black-darker has-bg" data-scrollview="true">
    <!-- milestone here -->
  </div>
  <!-- end #milestone -->
  
  <!-- begin #team -->
  <div id="team" class="content" data-scrollview="true">
    <!-- team here -->
  </div>
  <!-- end #team -->
  
  <!-- begin #quote -->
  <div id="quote" class="content bg-black-darker has-bg" data-scrollview="true">
    <!-- quote here -->
  </div>
  <!-- end #quote -->
  
  <!-- beign #service -->
  <div id="service" class="content" data-scrollview="true">
    <!-- service here -->
  </div>
  <!-- end #about -->
  
  <!-- beign #action-box -->
  <div id="action-box" class="content has-bg" data-scrollview="true">
    <!-- action-box here -->
  </div>
  <!-- end #action-box -->
  
  <!-- begin #work -->
  <div id="work" class="content" data-scrollview="true">
    <!-- work here -->
  </div>
  <!-- end #work -->
  
  <!-- begin #client -->
  <div id="client" class="content has-bg bg-green" data-scrollview="true">
    <!-- client here -->
  </div>
  <!-- end #client -->
  
  <!-- begin #pricing -->
  <div id="pricing" class="content" data-scrollview="true">
    <!-- pricing here -->
  </div>
  <!-- end #pricing -->
  
  <!-- begin #contact -->
  <div id="contact" class="content bg-light" data-scrollview="true">
    <!-- contact here -->
  </div>
  <!-- end #contact -->
  
  <!-- begin #footer -->
  <div id="footer" class="footer">
    <!-- footer here -->
  </div>
  <!-- end #footer -->
  
  <!-- begin theme-panel -->
  <div class="theme-panel">
    <!-- theme-panel here -->
  </div>
  <!-- end theme-panel -->
</div>
<!-- end #page-container -->

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Color Admin | One Page Parallax Front End Theme</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN core-css ================== -->
  <link href="../assets/css/one-page-parallax/vendor.min.css" rel="stylesheet" />
  <link href="../assets/css/one-page-parallax/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
  
  <!-- OR without vendor.min.css -->
  
  <!-- ================== BEGIN core-css ================== -->
  <link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" />
  <link href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
  <link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
  <link href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" />
  <link href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
  <link href="../assets/css/one-page-parallax/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
</head>

<!-- begin #header -->
<div id="header" class="header navbar navbar-transparent navbar-fixed-top navbar-expand-lg">
  <!-- begin container -->
  <div class="container">
    <!-- begin navbar-brand -->
    <a href="index.html" class="navbar-brand">
      <span class="brand-logo"></span>
      <span class="brand-text">
        <span class="text-theme">Color</span> Admin
      </span>
    </a>
    <!-- end navbar-brand -->
    <!-- begin navbar-toggle -->
    <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#header-navbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- end navbar-header -->
    <!-- begin navbar-collapse -->
    <div class="collapse navbar-collapse" id="header-navbar">
      <ul class="nav navbar-nav navbar-end">
        <li class="nav-item dropdown">
          <a class="nav-link active" href="#home" data-click="scroll-to-target" data-scroll-target="#home">HOME <b class="caret"></b></a>
          <div class="dropdown-menu dropdown-menu-left animated animate__fadeInDown">
            <a class="dropdown-item" href="index.html">Page with Transparent Header</a>
            <a class="dropdown-item" href="index_inverse_header.html">Page with Inverse Header</a>
            <a class="dropdown-item" href="index_default_header.html">Page with White Header</a>
            <a class="dropdown-item" href="extra_element.html">Extra Element</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about" data-click="scroll-to-target">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#team" data-click="scroll-to-target">TEAM</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#service" data-click="scroll-to-target">SERVICES</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#work" data-click="scroll-to-target">WORK</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#client" data-click="scroll-to-target">CLIENT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#pricing" data-click="scroll-to-target">PRICING</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact" data-click="scroll-to-target">CONTACT</a>
        </li>
      </ul>
    </div>
    <!-- end navbar-collapse -->
  </div>
  <!-- end container -->
</div>
<!-- end #header -->

There have 2 options of page content. HTML code of Content container as shown below:

Page Content with Background

<!-- begin content -->
<div class="content has-bg">
  <!-- begin content-bg -->
  <div class="content-bg">
    <img src="../assets/img/cover/cover-1.jpg" alt="" />
  </div>
  <!-- end content-bg -->
  <!-- begin container -->
  <div class="container">
      <h2 class="content-title">
        <!-- content title here --->
      </h2>
      <p class="content-desc">
        <!-- content desc here --->
      </p>
    <!-- your content here -->
  </div>
  <!-- end container -->
</div>
<!-- end content -->

Page Content without Background

<!-- begin content -->
<div class="content">
  <!-- begin container -->
  <div class="container">
      <h2 class="content-title">
        <!-- content title here --->
      </h2>
      <p class="content-desc">
        <!-- content desc here --->
      </p>
    <!-- your content here -->
  </div>
  <!-- end container -->
</div>
<!-- end content -->

<!-- begin #footer -->
<div id="footer" class="footer">
  <div class="container">
    <div class="footer-brand">
      <div class="footer-brand-logo"></div>
      Color Admin
    </div>
    <p>
      © Copyright Color Admin 2025 <br />
      An admin & front end theme with serious impact. Created by <a href="#">SeanTheme</a>
    </p>
    <p class="social-list">
      <a href="#"><i class="fab fa-facebook-f fa-fw"></i></a>
      <a href="#"><i class="fab fa-instagram fa-fw"></i></a>
      <a href="#"><i class="fab fa-twitter fa-fw"></i></a>
      <a href="#"><i class="fab fa-google-plus fa-fw"></i></a>
      <a href="#"><i class="fab fa-dribbble fa-fw"></i></a>
    </p>
  </div>
</div>
<!-- end #footer -->

Panel Theme used to customize the overall layout options.

<!-- begin theme-panel -->
<div class="theme-panel">
  <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
  <div class="theme-panel-content">
    <div class="theme-list clearfix">
      <div class="theme-list-item">
        <a href="javascript:;" class="bg-purple" 
          data-theme-class="theme-purple" 
          data-click="theme-selector" 
          data-toggle="tooltip" 
          data-trigger="hover" 
          data-container="body" 
          data-title="Purple"> </a>
      </div>
      ...
    </div>
  </div>
</div>
<!-- end theme-panel -->

Javascript files loaded in the end of page. This will reduce page load time.

  <!-- ================== BEGIN core-js ================== -->
  <script src="../assets/js/one-page-parallax/vendor.min.js"></script>
  <script src="../assets/js/one-page-parallax/app.min.js"></script>
  <!-- ================== END core-js ================== -->
  
  <!-- OR without vendor.min.js  -->
  
  <!-- ================== BEGIN core-js ================== -->
  <script src="../assets/plugins/pace-js/pace.min.js"></script>
  <script src="../assets/plugins/jquery/dist/jquery.min.js"></script>
  <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
  <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/plugins/paroller.js/dist/jquery.paroller.min.js"></script>
  <script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
  <script src="../assets/plugins/scrollmonitor/scrollMonitor.js"></script>
  <script src="../assets/js/one-page-parallax/app.min.js"></script>
  <!-- ================== END core-js ================== -->
</body>
</html>

Add the theme to the <body> tag in order to change the theme color.

Available Theme Options

<body class="theme-red">...</body>
<body class="theme-pink">...</body>
<body class="theme-orange">...</body>
<body class="theme-yellow">...</body>
<body class="theme-lime">...</body>
<body class="theme-green">...</body>
<body class="theme-teal">...</body>
<body class="theme-cyan">...</body>
<body class="theme-blue">...</body>
<body class="theme-purple">...</body>
<body class="theme-indigo">...</body>
<body class="theme-gray-500">...</body>

Add the data-bs-theme="dark" attribute to <html> in order to enable the dark mode.

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

Add the dir="rtl" attribute to <html> in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

Here is the general structure for the each case of page options.

Page with default small header navigation

<body class="page-navbar-fixed-top-sm">

Installation

Below is the command that required to run / compile the scss with gulpjs. If you are new to the gulpjs, you may refer to their official website for installation guide.

<!-- run the following command -->
cd /your-path-url/frontend/one-page-parallax/src/
npm install
gulp

<!-- available command -->
gulp plugins                    // generate list of plugins

Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Gulp compilation

We are using gulp to compile & combine few plugins js & css into one single vendor file for js & css. This may help to improve the speed for page load if compare to multiple files loading in one page. If you wish to edit the included plugins files, you may refer to the /admin/src/gulpfile.js.

Below is the list of plugins that compile into vendor.min.css.

return gulp.src([
  'node_modules/animate.css/animate.min.css',
  'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
  'node_modules/jquery-ui-dist/jquery-ui.min.css',
  'node_modules/pace-js/themes/black/pace-theme-flash.css',
  'node_modules/bootstrap-icons/font/bootstrap-icons.css'
])
.pipe(sass())
.pipe(concat('vendor.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/one-page-parallax/'))
.pipe(livereload());

Below is the list of plugins that compile into vendor.min.js.

return gulp.src([
  'node_modules/pace-js/pace.min.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/jquery-ui-dist/jquery-ui.min.js',
  'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
  'node_modules/paroller.js/dist/jquery.paroller.min.js',
  'node_modules/js-cookie/src/js.cookie.js',
  'node_modules/scrollmonitor/scrollMonitor.js'
])
.pipe(sourcemaps.init())
.pipe(concat('vendor.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(distPath + '/assets/js/one-page-parallax/'))
.pipe(livereload());

Below is the list of all plugins and external resources used to power this template.

Name	CSS Files
Bootstrap	Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap/dist/css/bootstrap.min.css" /> Required JS File <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> Official Link: http://getbootstrap.com/
jQuery	Required JS File <script src="../assets/plugins/jquery/dist/jquery.min.js"></script> Official Link: http://jquery.com/
jQuery UI	Required CSS File <link rel="stylesheet" href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" /> Required JS File <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> Official Link: https://jqueryui.com/
Bootstrap Icons	Required CSS File <link rel="stylesheet" href="../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" /> Official Link: https://icons.getbootstrap.com/
Font Awesome	Required CSS File <link rel="stylesheet" href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" /> Official Link: https://fontawesome.com/
Animate.css	Required CSS File <link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" /> Official Link: http://daneden.github.io/animate.css/
scrollMonitor	Required JS File <script src="../assets/plugins/scrollmonitor/scrollMonitor.js"></script> Official Link: https://github.com/stutrek/scrollMonitor
Pace	Required CSS File <link rel="stylesheet" href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" /> Required JS File <script src="../assets/plugins/pace-js/pace.min.js"></script> Official Link: https://codebyzach.github.io/pace/
JS Cookie	Required JS File <script src="../assets/plugins/js-cookie/dist/js.cookie.min.js"></script> Official Link: https://github.com/js-cookie/js-cookie
Paroller	Required JS File <script="../assets/plugins/paroller.js/dist/jquery.paroller.min.js"></script> Official Link: https://tgomilar.github.io/paroller.js/

I've used the following images, icons or other files as listed.

jQuery Plugins

Bootstrap:http://getbootstrap.com/
jQuery:http://jquery.com/
jQuery UI:http://jqueryui.com/
Bootstrap Icons:https://icons.getbootstrap.com/
Font Awesome:http://fortawesome.github.io/Font-Awesome/
Animate.css:http://daneden.github.io/animate.css/
scrollMonitor:https://github.com/stutrek/scrollMonitor
Pace:http://github.hubspot.com/pace/
JS Cookie:https://github.com/js-cookie/js-cookie
Paroller:https://tgomilar.github.io/paroller.js/

Color Admin

A) HTML Structure - top

B) Page Head - top

C) Header - top

D) Page Content - top

Page Content with Background

Page Content without Background

E) Page Footer - top

F) Panel Theme - top

G) End of Page (Javascript) - top

H) Page Theme Options - top

Available Theme Options

I) Dark Mode - top

J) RTL Mode - top

K) Page Options - top

Page with default small header navigation

L) Using Gulp SCSS - top

Installation

Gulp compilation

M) Plugins & Resources - top

N) References - top