“Transparent Design” Documentation by “Sean Ngu” v4.7
Last Updated: 25/October/2020
By: Sean Ngu
Email: nguoksiong@live.co.uk
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 your question to my email nguoksiong@live.co.uk. Thanks so much!
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-cover -->
<div class="page-cover"></div>
<!-- end page-cover -->
<!-- begin #page-loader -->
<div id="page-loader" class="fade show"><span class="spinner"></span></div>
<!-- end #page-loader -->
<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed">
<!-- begin #header -->
<div id="header" class="header navbar-default"></div>
<!-- end #header -->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar"></div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
<!-- begin #content -->
<div id="content" class="content"></div>
<!-- end #content -->
<!-- begin theme-panel -->
<div class="theme-panel"></div>
<!-- end theme-panel -->
<!-- begin scroll to top btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
data-click="scroll-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- end scroll to top btn -->
</div>
<!-- end page container -->
Below code is used to detect the internet explorer for browser compatibility & styling setting usage.
<!DOCTYPE html> <html lang="en">
Page head contains metadata, javascript and css files:
<head>
<meta charset="utf-8" />
<title>Color Admin | Transparent Design</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 BASE CSS STYLE ================== -->
<link href="../assets/css/transparent/app.min.css" rel="stylesheet" />
<!-- ================== END BASE CSS STYLE ================== -->
</head>
<!-- begin #header -->
<div id="header" class="header navbar-default">
<!-- begin navbar-header -->
<div class="navbar-header">
...
</div>
<!-- end navbar-header -->
<!-- begin header-nav -->
<ul class="navbar-nav navbar-right">
<li>
<form class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter keyword" />
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</div>
</form>
</li>
...
<li class="dropdown navbar-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<img src="../assets/img/user/user-13.jpg" alt="" />
<span class="d-none d-md-inline">Adam Schwartz</span> <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</li>
</ul>
<!-- end header-nav -->
</div>
<!-- end #header -->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
...
</ul>
<!-- end sidebar user -->
<!-- begin sidebar nav -->
<ul class="nav">
<li class="nav-header">Navigation</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret"></b>
<i class="fa fa-th-large"></i>
<span>Dashboard</span>
</a>
<ul class="sub-menu">
<li><a href="index.html">Dashboard v1</a></li>
<li><a href="index_v2.html">Dashboard v2</a></li>
</ul>
</li>
...
<!-- begin sidebar minify button -->
<li>
<a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify">
<i class="fa fa-angle-double-left"></i>
</a>
</li>
<!-- end sidebar minify button -->
</ul>
<!-- end sidebar nav -->
</div>
<!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:
<!-- begin #content -->
<div id="content" class="content">
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-right">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Page Options</a></li>
<li class="active">Blank Page</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
<!-- end page-header -->
<!-- Page Content Here -->
</div>
<!-- end #content -->
Javascript files loaded in the end of page. This will reduce page load time.
<!-- ================== BEGIN BASE JS ================== --> <script src="../assets/js/app.min.js"></script> <script src="../assets/js/theme/transparent.min.js"></script> <!-- ================== END BASE JS ================== --> </body> </html>
You may use our pre-generated theme files in ../assets/css/transparent/theme folder to set the theme color OR you may change the primary color by using SCSS. Select one of the following files and include it in your <head>Section.
Available Theme Options:
<!-- BLUE --> <link href="../assets/css/transparent/theme/blue.min.css" rel="stylesheet" /> <!-- PURPLE --> <link href="../assets/css/transparent/theme/purple.min.css" rel="stylesheet" /> <!-- RED --> <link href="../assets/css/transparent/theme/red.min.css" rel="stylesheet" /> <!-- ORANGE --> <link href="../assets/css/transparent/theme/orange.min.css" rel="stylesheet" /> <!-- BLACK --> <link href="../assets/css/transparent/theme/black.min.css" rel="stylesheet" /> <!-- AQUA --> <link href="../assets/css/transparent/theme/aqua.min.css" rel="stylesheet" /> <!-- TEAL --> <link href="../assets/css/transparent/theme/teal.min.css" rel="stylesheet" /> <!-- GREEN --> <link href="../assets/css/transparent/theme/green.min.css" rel="stylesheet" /> <!-- LIME --> <link href="../assets/css/transparent/theme/lime.min.css" rel="stylesheet" /> <!-- YELLOW --> <link href="../assets/css/transparent/theme/yellow.min.css" rel="stylesheet" /> <!-- PINK --> <link href="../assets/css/transparent/theme/pink.min.css" rel="stylesheet" /> <!-- INDIGO --> <link href="../assets/css/transparent/theme/indigo.min.css" rel="stylesheet" />
Here is the general structure for the each case of page options.
<!-- begin #page-container --> <div id="page-container" class="fade page-container page-without-sidebar"> <!-- begin #sidebar --> <div id="sidebar" class="sidebar"> <!-- end #sidebar -->
<!-- begin #page-container --> <div id="page-container" class="fade page-container page-with-two-sidebar"> <!-- begin #sidebar --> <div id="sidebar" class="sidebar"></div> <div class="sidebar-bg"></div> <!-- end #sidebar --> <!-- begin #sidebar-right --> <div id="sidebar-right" class="sidebar sidebar-right"></div> <div class="sidebar-bg sidebar-right"></div> <!-- end #sidebar-right -->
<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
<!-- begin #footer -->
<div id="footer" class="footer">
...
</div>
<!-- end #footer -->
<!-- begin #page-container --> <div id="page-container" class="fade page-container page-header-fixed"> <!-- begin #header --> <div id="header" class="header navbar-default">
<!-- begin #page-container -->
<div id="page-container" class="fade page-container">
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
...
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
<!-- begin #page-container --> <div id="page-container" class="fade page-container page-sidebar-fixed"> <!-- begin #sidebar --> <div id="sidebar" class="sidebar">
<!-- begin #page-container -->
<div id="page-container" class="fade page-container page-sidebar-minified">
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
...
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->
<!-- begin #page-container --> <div id="page-container" class="fade page-container page-with-right-sidebar"> <!-- begin #sidebar --> <div id="sidebar" class="sidebar">
<!-- begin #sidebar --> <div id="sidebar" class="sidebar sidebar-grid">
<!-- begin #page-container --> <div id="page-container" class="fade page-container gradient-enabled">
<!-- begin #content -->
<div id="content" class="content content-full-width">
<div class="vertical-box">
<div class="vertical-box-column width-250">
<div class="vertical-box">
<div class="wrapper bg-blue-darker text-white">
Header
</div>
<div class="vertical-box-row bg-blue text-white">
<div class="vertical-box-cell">
<div class="vertical-box-inner-cell">
<div data-scrollbar="true" data-height="100%" class="wrapper">
<!-- auto adjust vertical box with scrollbar here -->
</div>
</div>
</div>
</div>
<div class="wrapper bg-silver bg-blue-darker text-white">
Footer
</div>
</div>
</div>
</div>
<div class="vertical-box">
<!-- next vertical box column with same / different option like the previous sample code -->
</div>
</div>
<!-- end #content -->
If you wish to remove the page loading animation, you just need to remove the #page-loader and remove the class .fade from #page-container
from
<!-- begin #page-loader --> <div id="page-loader" class="fade show"> <span class="spinner"></span> </div> <!-- end #page-loader --> <!-- begin #page-container --> <div id="page-container" class="fade"> </div> <!-- end #page-container -->
to
<!-- begin #page-container --> <div id="page-container" class=""> </div> <!-- end #page-container -->
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/admin/src/ npm install gulp transparent <!-- available theme command --> gulp // default theme gulp material // material theme gulp apple // apple theme gulp transparent // transparent theme gulp facebook // facebook theme gulp google // google theme
Verify that you are running at least node 10.9.x or later and npm 6.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
To enable the RTL Support, you might need to change the following variable from admin/src/scss/transparent/_variables.scss.
<!-- LINE 92 --> $enable-rtl: true; <!-- run the command to regenerate the /css/transparent/app.min.css --> gulp transparent
We are using gulp to compile & combine few plugins js & css into one single 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 app.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',
'scss/transparent/styles.scss'
])
.pipe(sass())
.pipe(concat('app.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/transparent/'))
.pipe(livereload());
Below is the list of plugins that compile into app.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/jquery-slimscroll/jquery.slimscroll.min.js',
'node_modules/js-cookie/src/js.cookie.js',
'js/app.js',
])
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload())
To change the color theme / primary color, you may refer to the _variables.scss and set the variable. Npm can be used to update the plugins version as well.
admin/src/
├── gulpfile.js
├── package.json
├── js/
└── scss/
├── default/
├── apple/
├── facebook/
├── google/
├── material/
└── transparent/
├── _app.scss
├── _functions.scss
├── _helper.scss
├── _layout.scss
├── _mixins.scss
├── _plugins.scss
├── _reboot.scss
├── _ui.scss
├── _ui.scss
├── _variables.scss
├── theme.scss
├── styles.scss
├── app/
├── images/
├── layout/
├── mixins/
├── plugins/
└── ui/