Overview
The Modern UI Framework is a premium Web Application Admin Dashboard built on top of Twitter Bootstrap 3.3.4 Framework. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.
We love when all updates are free. Once you’ve purchased Modern, you’ll be able to download all future updates. If you love our theme don’t forget to rate us five starsGood rating provides more and better updates in future!
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Folder Structure
List of folders in Modern download
Source/
└── assets/
├── css/
├── images/
├── js/
└── plugins/
HTML Structure
Head
<head>
<!-- Title -->
<title>Modern | Admin Dashboard Template</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta charset="UTF-8">
<meta name="description" content="Admin Dashboard Template" />
<meta name="keywords" content="admin,dashboard" />
<meta name="author" content="Steelcoders" />
<!-- Styles -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="assets/plugins/pace-master/themes/blue/pace-theme-flash.css" rel="stylesheet"/>
<link href="assets/plugins/uniform/css/uniform.default.min.css" rel="stylesheet"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/line-icons/simple-line-icons.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/offcanvasmenueffects/css/menu_cornerbox.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/waves/waves.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/3d-bold-navigation/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/weather-icons-master/css/weather-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/metrojs/MetroJs.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme Styles -->
<link href="assets/css/modern.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/white.css" class="theme-color" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/3d-bold-navigation/js/modernizr.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/snap.svg-min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Body
<body class="page-header-fixed">
<div class="overlay"></div>
<div class="menu-wrap">
<nav class="profile-menu">
<div class="profile"><img src="assets/images/avatar1.png" width="52px" alt="David Green"/><span>David Green</span></div>
<div class="profile-menu-list">
<a href="#"><i class="fa fa-star"></i><span>Favorites</span></a>
<a href="#"><i class="fa fa-bell"></i><span>Alerts</span></a>
<a href="#"><i class="fa fa-envelope"></i><span>Messages</span></a>
<a href="#"><i class="fa fa-comment"></i><span>Comments</span></a>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
</div>
<form class="search-form" action="#" method="GET">
<div class="input-group">
<input type="text" name="search" class="form-control search-input" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default close-search waves-effect waves-button waves-classic" type="button"><i class="fa fa-times"></i></button>
</span>
</div><!-- Input Group -->
</form><!-- Search Form -->
<main class="page-content content-wrap">
<div class="navbar">
<div class="navbar-inner">
<div class="sidebar-pusher">
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic push-sidebar">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo-box">
<a href="index.html" class="logo-text"><span>Modern</span></a>
</div><!-- Logo Box -->
<div class="search-button">
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic show-search"><i class="fa fa-search"></i></a>
</div>
<div class="topmenu-outer">
<div class="top-menu">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic sidebar-toggle"><i class="fa fa-bars"></i></a>
</li>
<li>
<a href="#cd-nav" class="waves-effect waves-button waves-classic cd-nav-trigger"><i class="fa fa-diamond"></i></a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic toggle-fullscreen"><i class="fa fa-expand"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<i class="fa fa-cogs"></i>
</a>
<ul class="dropdown-menu dropdown-md dropdown-list theme-settings" role="menu">
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Fixed Header
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Fixed Sidebar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-sidebar-check">
</div>
</li>
<li class="no-link" role="presentation">
Horizontal bar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right horizontal-bar-check">
</div>
</li>
<li class="no-link" role="presentation">
Toggle Sidebar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right toggle-sidebar-check">
</div>
</li>
<li class="no-link" role="presentation">
Compact Menu
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right compact-menu-check">
</div>
</li>
<li class="no-link" role="presentation">
Hover Menu
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right hover-menu-check">
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Boxed Layout
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right boxed-layout-check">
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Choose Theme Color
<div class="color-switcher">
<a class="colorbox color-blue" href="?theme=blue" title="Blue Theme" data-css="blue"></a>
<a class="colorbox color-green" href="?theme=green" title="Green Theme" data-css="green"></a>
<a class="colorbox color-red" href="?theme=red" title="Red Theme" data-css="red"></a>
<a class="colorbox color-white" href="?theme=white" title="White Theme" data-css="white"></a>
<a class="colorbox color-purple" href="?theme=purple" title="purple Theme" data-css="purple"></a>
<a class="colorbox color-dark" href="?theme=dark" title="Dark Theme" data-css="dark"></a>
</div>
</li>
</ul>
</li>
<li class="no-link"><button class="btn btn-default reset-options">Reset Options</button></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic show-search"><i class="fa fa-search"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge badge-success pull-right">4</span></a>
<ul class="dropdown-menu title-caret dropdown-lg" role="menu">
<li><p class="drop-title">You have 4 new messages !</p></li>
<li class="dropdown-menu-list slimscroll messages">
<ul class="list-unstyled">
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar2.png" alt=""></div>
<p class="msg-name">Sandra Smith</p>
<p class="msg-text">Hey ! I'm working on your project</p>
<p class="msg-time">3 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar4.png" alt=""></div>
<p class="msg-name">Amily Lee</p>
<p class="msg-text">Hi David !</p>
<p class="msg-time">8 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar3.png" alt=""></div>
<p class="msg-name">Christopher Palmer</p>
<p class="msg-text">See you soon !</p>
<p class="msg-time">56 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar5.png" alt=""></div>
<p class="msg-name">Nick Doe</p>
<p class="msg-text">Nice to meet you</p>
<p class="msg-time">2 hours ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar2.png" alt=""></div>
<p class="msg-name">Sandra Smith</p>
<p class="msg-text">Hey ! I'm working on your project</p>
<p class="msg-time">5 hours ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar4.png" alt=""></div>
<p class="msg-name">Amily Lee</p>
<p class="msg-text">Hi David !</p>
<p class="msg-time">9 hours ago</p>
</a>
</li>
</ul>
</li>
<li class="drop-all"><a href="#" class="text-center">All Messages</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"><i class="fa fa-bell"></i><span class="badge badge-success pull-right">3</span></a>
<ul class="dropdown-menu title-caret dropdown-lg" role="menu">
<li><p class="drop-title">You have 3 pending tasks !</p></li>
<li class="dropdown-menu-list slimscroll tasks">
<ul class="list-unstyled">
<li>
<a href="#">
<div class="task-icon badge badge-success"><i class="icon-user"></i></div>
<span class="badge badge-roundless badge-default pull-right">1min ago</span>
<p class="task-details">New user registered.</p>
</a>
</li>
<li>
<a href="#">
<div class="task-icon badge badge-danger"><i class="icon-energy"></i></div>
<span class="badge badge-roundless badge-default pull-right">24min ago</span>
<p class="task-details">Database error.</p>
</a>
</li>
<li>
<a href="#">
<div class="task-icon badge badge-info"><i class="icon-heart"></i></div>
<span class="badge badge-roundless badge-default pull-right">1h ago</span>
<p class="task-details">Reached 24k likes</p>
</a>
</li>
</ul>
</li>
<li class="drop-all"><a href="#" class="text-center">All Tasks</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">David<i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="assets/images/avatar1.png" width="40" height="40" alt="">
</a>
<ul class="dropdown-menu dropdown-list" role="menu">
<li role="presentation"><a href="profile.html"><i class="fa fa-user"></i>Profile</a></li>
<li role="presentation"><a href="calendar.html"><i class="fa fa-calendar"></i>Calendar</a></li>
<li role="presentation"><a href="inbox.html"><i class="fa fa-envelope"></i>Inbox<span class="badge badge-success pull-right">4</span></a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="lock-screen.html"><i class="fa fa-lock"></i>Lock screen</a></li>
<li role="presentation"><a href="login.html"><i class="fa fa-sign-out m-r-xs"></i>Log out</a></li>
</ul>
</li>
<li>
<a href="login.html" class="log-out waves-effect waves-button waves-classic">
<span><i class="fa fa-sign-out m-r-xs"></i>Log out</span>
</a>
</li>
</ul><!-- Nav -->
</div><!-- Top Menu -->
</div>
</div>
</div><!-- Navbar -->
<div class="page-sidebar sidebar">
<div class="page-sidebar-inner slimscroll">
<div class="sidebar-header">
<div class="sidebar-profile">
<a href="javascript:void(0);" id="profile-menu-link">
<div class="sidebar-profile-image">
<img src="assets/images/avatar1.png" class="img-circle img-responsive" alt="">
</div>
<div class="sidebar-profile-details">
<span>David Green<br><small>Art Director</small></span>
</div>
</a>
</div>
</div>
<ul class="menu accordion-menu">
<li class="active"><a href="index.html" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-home"></span><p>Dashboard</p></a></li>
<li><a href="profile.html" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-user"></span><p>Profile</p></a></li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-envelope"></span><p>Mailbox</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="inbox.html">Inbox</a></li>
<li><a href="message-view.html">View Message</a></li>
<li><a href="compose.html">Compose</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-briefcase"></span><p>UI Kits</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-icons.html">Icons</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-notifications.html">Notifications</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
<li><a href="ui-panels.html">Panels</a></li>
<li><a href="ui-progress.html">Progress Bars</a></li>
<li><a href="ui-nestable.html">Nestable</a></li>
<li><a href="ui-tree-view.html">Tree View</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-th"></span><p>Layouts</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="layout-blank.html">Blank Page</a></li>
<li><a href="layout-boxed.html">Boxed Page</a></li>
<li><a href="layout-horizontal-menu.html">Horizontal Menu</a></li>
<li><a href="layout-horizontal-menu-boxed.html">Boxed & Horizontal Menu</a></li>
<li><a href="layout-horizontal-menu-minimal.html">Horizontal Menu Minimal</a></li>
<li><a href="layout-fixed-sidebar.html">Fixed Sidebar</a></li>
<li><a href="layout-static-header.html">Static Header</a></li>
<li><a href="layout-collapsed-sidebar.html">Collapsed Sidebar</a></li>
<li><a href="layout-compact-menu.html">Compact Menu</a></li>
<li><a href="layout-hover-menu.html">Hover Menu</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-list"></span><p>Tables</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="table-static.html">Static Tables</a></li>
<li><a href="table-responsive.html">Responsive Tables</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-edit"></span><p>Forms</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-image-crop.html">Image Crop</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-stats"></span><p>Charts</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="charts-sparkline.html">Sparkline</a></li>
<li><a href="charts-Rickshaw.html">Rickshaw</a></li>
<li><a href="charts-morris.html">Morris</a></li>
<li><a href="charts-flotchart.html">Flotchart</a></li>
<li><a href="charts-chartjs.html">Chart.js</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-log-in"></span><p>Login</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="login.html">Login Form</a></li>
<li><a href="register.html">Register Form</a></li>
<li><a href="forgot.html">Forgot Password</a></li>
<li><a href="lock-screen.html">Lock Screen</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-map-marker"></span><p>Maps</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-gift"></span><p>Extra</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="404.html">404 Page</a></li>
<li><a href="500.html">500 Page</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="search.html">Search Results</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</div><!-- Page Sidebar Inner -->
</div><!-- Page Sidebar -->
<div class="page-inner">
<div class="page-title">
<h3>Dashboard</h3>
<div class="page-breadcrumb">
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li class="active">Dashboard</li>
</ol>
</div>
</div>
<div id="main-wrapper">
</div><!-- Main Wrapper -->
<div class="page-footer">
<p class="no-s">2015 © Modern by Steelcoders.</p>
</div>
</div><!-- Page Inner -->
</main><!-- Page Content -->
<nav class="cd-nav-container" id="cd-nav">
<header>
<h3>Navigation</h3>
<a href="#0" class="cd-close-nav">Close</a>
</header>
<ul class="cd-nav list-unstyled">
<li class="cd-selected" data-menu="index">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-home"></i>
</span>
<p>Dashboard</p>
</a>
</li>
<li data-menu="profile">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-user"></i>
</span>
<p>Profile</p>
</a>
</li>
<li data-menu="inbox">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-envelope"></i>
</span>
<p>Mailbox</p>
</a>
</li>
<li data-menu="#">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-tasks"></i>
</span>
<p>Tasks</p>
</a>
</li>
<li data-menu="#">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-cog"></i>
</span>
<p>Settings</p>
</a>
</li>
<li data-menu="calendar">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-calendar"></i>
</span>
<p>Calendar</p>
</a>
</li>
</ul>
</nav>
<div class="cd-overlay"></div>
<!-- Javascripts -->
<script src="assets/plugins/jquery/jquery-2.1.3.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/plugins/pace-master/pace.min.js"></script>
<script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/switchery/switchery.min.js"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/classie.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/main.js"></script>
<script src="assets/plugins/waves/waves.min.js"></script>
<script src="assets/plugins/3d-bold-navigation/js/main.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/jquery-counterup/jquery.counterup.min.js"></script>
<script src="assets/plugins/toastr/toastr.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.symbol.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/plugins/curvedlines/curvedLines.js"></script>
<script src="assets/plugins/metrojs/MetroJs.min.js"></script>
<script src="assets/js/modern.min.js"></script>
<script src="assets/js/pages/dashboard.js"></script>
</body>
Customization
All theme CSS files are located in source/assets/css folder. For your CSS customization you can use Source/assets/css/custom.css. Keep your custom CSS separate it makes more easier when updating the theme in future.
All Javascript files are located in source/assets/js/ folder. Also Page-level Javascript files are located in source/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use Source/assets/js/custom.js. Keep your custom Javascript separate it makes more easier when updating the theme in future.
Fonts
Modern uses Montserrat, Ubuntu and Open Sans fonts. They must be loaded in HTML Head before other CSS files.
Font code example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
Modern also uses Fontawesome, Glyphicons, Weather icons and Simple Line Font Icon packs. Font Icons must be loaded in HTML Head before theme css files.
Themes & Layouts
Moder comes with 6 color themes: blue, green, red, white, purple and dark. You can check them in themes & layouts settings dropdown menu.
Once you've chosen one of the themes you must include this theme in HTML Head. For example, if you like the green theme color, you must write the following code:
<link href="assets/css/themes/green.css" class="theme-color" rel="stylesheet" type="text/css"/>
To create your own color theme edit one of the theme css files located in source/assets/css/themes.
Modern comes with many flexible and functional layout options. It lets you to create the most relevant layout for your application. In Modern UI Framework layouts are selected by adding classes on the HTML body tag or/and exactly on that element which must be changed. You can choose layout options very easily by playing with them in themes & layouts settings dropdown menu, which is located on left side of topmenu.
By default modern uses Fixed Header Mode, it's made by adding class page-header-fixed to HTML body. If you don't want to use Fixed Header Mode, then just remove this class from HTML body.
To use Fixed Sidebar Mode you must add page-sidebar-fixed class to HTML body. By default modern uses Static Sidebar Mode.
To use Horizontal Bar Mode you must add page-horizontal-bar class to HTML body, add horizontal-bar class to .sidebar and remove page-sidebar class from it. By default modern don't uses Horizontal Bar Mode.
If you want to use Collapsed Sidebar Mode, then you must just add a small-sidebar class to HTML body. Also, there is a special button in the topmenu which toggles Collapsed Sidebar Mode. By default Modern is not using Collapsed Sidebar Mode.
Modern comes with Compact/Large menu modes. To use compact menu you must add compact-menu class to HTML body. Large mode is set by default.
Modern also includes Accordion/Hover menu modes. To use hover menu you must add hover-menu class to HTML body. Accordion mode is set by default.
Moder includes Boxed Layout Mode. To use it you must add container class to .page-content. By default modern don't uses this layout option.
Note! Some Layout options aren't compatible together. You can see it when changing layout options from themes & layouts settings dropdown menu.
Colors
Modern comes with 8 color palettes for creating colorful widgets and elements.
#877CC7
#7A6FBE
#6E63B4
.bg-primary
#32C6AD
#22BAA0
#1DA890
.bg-success
#20BEDA
#12AFCB
#0BA0BB
.bg-info
#FADA44
#F6D433
#F1CA11
.bg-warning
#F66D6D
#F25656
#E54F4F
.bg-danger
#3B3B3B
#333333
#2B2B2B
.bg-dark
#D7D7D7
#CCCCCC
#B9B9B9
.bg-gray
#F9F9F9
#F1F1F1
#E5E5E5
.bg-light
Utilities
All available Helper Classes in Modern:
| Prefix | Second Prefix (side) | third Prefix | Suffix (value) | |
|---|---|---|---|---|
| Margin | m | t,r,b,l | n (only for negative values) | xxs, xs, sm, md, lg, xxl |
| Padding | p | v,h (top & bottom, left & right) | xxs, xs, sm, md, lg, xxl |
.no-s Removes margins & paddings
.no-m Removes margins
.no-p Removes paddings
.no-p-h Removes paddings from left & right
.no-p-v Removes Paddings from top & bottom
.no-b Removes borders
.b Adds border from all sides
.b-t, .b-r, .b-b, .b-l Adds border from top, right, bottom, left
.b-default, .b-primary, .b-success, .b-info, .b-warning, .b-danger Adds border by contextual colors, see colors doc.
.b-2, .b-3, .b-4 Border size
.b-n-t, .b-n-r, .b-n-b, .b-n-l Removes border from top, right, bottom, left
.no-r Removes border radius
.r Adds border radius
.r-t-l, .r-t-r, .r-b-l, .r-b-r Adds border radius From top-left, top-right, bottom-left, bottom-right sides.
.no-r-t-l, .no-r-t-r, .no-r-b-l, .no-r-b-r Removes border radius From top-left, top-right, bottom-left, bottom-right sides.
Sources & Credits
We've used following sources & credits
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section