Compiled and ready to use in production. Download this version if you don't want to customize - AdminLTE's LESS files.
- Download +Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.
+ DownloadAll files including the compiled CSS. Download this version if you plan on customizing the template. - Requires a LESS compiler.
- Download +All files including the compiled CSS. Download this version if you plan on customizing the template. Requires a LESS compiler.
+ DownloadFile Hierarchy of the Source Code Package
-AdminLTE/
-├── dist/
-│ ├── CSS/
-│ ├── JS
-│ ├── img
-├── build/
-│ ├── less/
-│ │ ├── AdminLTE's Less files
-│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
-│ ├── mixins/
-│ ├── variables.less
-│ ├── mixins.less
-└── plugins/
- ├── All the customized plugins CSS and JS filesNote: LESS files are better commented than the compiled CSS file. @@ -241,28 +225,19 @@
The starter page is a good place to start building your app if you'd like to - start from scratch.
+The starter page is a good place to start building your app if you'd like to start from scratch.
AdminLTE 2.0 provides a set of options to apply to your main layout. Each one of these classes - can be added +
AdminLTE 2.0 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.
.fixed to get a fixed header and sidebar..sidebar-collapse to have a collapsed sidebar upon
- loading.
- .layout-boxed to get a boxed layout that stretches only to
- 1250px.
- .layout-top-nav to remove the sidebar and have your links
- at the top navbar.
- .sidebar-collapse to have a collapsed sidebar upon loading..layout-boxed to get a boxed layout that stretches only to 1250px..layout-top-nav to remove the sidebar and have your links at the top navbar.Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed - together.
+Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.
Skins can be found in the dist/css/skins folder. @@ -272,67 +247,60 @@
Within the main Javascript file, modify the $.AdminLTE.options object to suit your use case.
Alternatively, you can define a global options variable named AdminLTEOptions and initialize it
- before loading app.js.
Alternatively, you can define a global options variable named AdminLTEOptions and initialize it before loading app.js.
Example
<script>
- var AdminLTEOptions = {
- //Enable sidebar expand on hover effect for sidebar mini
- //This option is forced to true if both the fixed layout and sidebar mini
- //are used together
- sidebarExpandOnHover: true,
- //BoxRefresh Plugin
- enableBoxRefresh: true,
- //Bootstrap.js tooltip
- enableBSToppltip: true
- };
-</script>
-<script src="dist/js/app.js" type="text/javascript"></script>{
- //Add slimscroll to navbar menus
- //This requires you to load the slimscroll plugin
- //in every page before app.js
- navbarMenuSlimscroll: true,
- navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
- navbarMenuHeight: "200px", //The height of the inner menu
- //General animation speed for JS animated elements such as box collapse/expand and
- //sidebar treeview slide up/down. This option accepts an integer as milliseconds,
- //'fast', 'normal', or 'slow'
- animationSpeed: 500,
- //Sidebar push menu toggle button selector
- sidebarToggleSelector: "[data-toggle='offcanvas']",
- //Activate sidebar push menu
- sidebarPushMenu: true,
- //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
- sidebarSlimScroll: true,
- //Enable sidebar expand on hover effect for sidebar mini
- //This option is forced to true if both the fixed layout and sidebar mini
- //are used together
- sidebarExpandOnHover: false,
- //BoxRefresh Plugin
- enableBoxRefresh: true,
- //Bootstrap.js tooltip
- enableBSToppltip: true,
- BSTooltipSelector: "[data-toggle='tooltip']",
- //Enable Fast Click. Fastclick.js creates a more
- //native touch experience with touch devices. If you
- //choose to enable the plugin, make sure you load the script
- //before AdminLTE's app.js
- enableFastclick: true,
- //Control Sidebar Tree Views
- enableControlTreeView: true,
- //Control Sidebar Options
- enableControlSidebar: true,
- controlSidebarOptions: {
- //Which button should trigger the open/close event
- toggleBtnSelector: "[data-toggle='control-sidebar']",
- //The sidebar selector
- selector: ".control-sidebar",
- //Enable slide over content
- slide: true
- },
- //Box Widget Plugin. Enable this plugin
- //to allow boxes to be collapsed and/or removed
- enableBoxWidget: true,
- //Box Widget plugin options
- boxWidgetOptions: {
- boxWidgetIcons: {
- //Collapse icon
- collapse: 'fa-minus',
- //Open icon
- open: 'fa-plus',
- //Remove icon
- remove: 'fa-times'
- },
- boxWidgetSelectors: {
- //Remove button selector
- remove: '[data-widget="remove"]',
- //Collapse button selector
- collapse: '[data-widget="collapse"]'
- }
- },
- //Direct Chat plugin options
- directChat: {
- //Enable direct chat by default
- enable: true,
- //The button to open and close the chat contacts pane
- contactToggleSelector: '[data-widget="chat-pane-toggle"]'
- },
- //Define the set of colors to use globally around the website
- colors: {
- lightBlue: "#3c8dbc",
- red: "#f56954",
- green: "#00a65a",
- aqua: "#00c0ef",
- yellow: "#f39c12",
- blue: "#0073b7",
- navy: "#001F3F",
- teal: "#39CCCC",
- olive: "#3D9970",
- lime: "#01FF70",
- orange: "#FF851B",
- fuchsia: "#F012BE",
- purple: "#8E24AA",
- maroon: "#D81B60",
- black: "#222222",
- gray: "#d2d6de"
- },
- //The standard screen sizes that bootstrap uses.
- //If you change these in the variables.less file, change
- //them here too.
- screenSizes: {
- xs: 480,
- sm: 768,
- md: 992,
- lg: 1200
- }
-}The main header contains the logo and navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. - The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide - an example for + The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for the top nav layout.
<header class="main-header">
- <a href="../../index2.html" class="logo">
- <!-- LOGO -->
- AdminLTE
- </a>
- <!-- Header Navbar: style can be found in header.less -->
- <nav class="navbar navbar-static-top" role="navigation">
- <!-- Navbar Right Menu -->
- <div class="navbar-custom-menu">
- <ul class="nav navbar-nav">
- <!-- Messages: style can be found in dropdown.less-->
- <li class="dropdown messages-menu">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-envelope-o"></i>
- <span class="label label-success">4</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">You have 4 messages</li>
- <li>
- <!-- inner menu: contains the actual data -->
- <ul class="menu">
- <li><!-- start message -->
- <a href="#">
+ <a href="../../index2.html" class="logo">
+ <!-- LOGO -->
+ AdminLTE
+ </a>
+ <!-- Header Navbar: style can be found in header.less -->
+ <nav class="navbar navbar-static-top" role="navigation">
+ <!-- Navbar Right Menu -->
+ <div class="navbar-custom-menu">
+ <ul class="nav navbar-nav">
+ <!-- Messages: style can be found in dropdown.less-->
+ <li class="dropdown messages-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-envelope-o"></i>
+ <span class="label label-success">4</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 4 messages</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- start message -->
+ <a href="#">
+ <div class="pull-left">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+ </div>
+ <h4>
+ Sender Name
+ <small><i class="fa fa-clock-o"></i> 5 mins</small>
+ </h4>
+ <p>Message Excerpt</p>
+ </a>
+ </li><!-- end message -->
+ ...
+ </ul>
+ </li>
+ <li class="footer"><a href="#">See All Messages</a></li>
+ </ul>
+ </li>
+ <!-- Notifications: style can be found in dropdown.less -->
+ <li class="dropdown notifications-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-bell-o"></i>
+ <span class="label label-warning">10</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 10 notifications</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li>
+ <a href="#">
+ <i class="ion ion-ios-people info"></i> Notification title
+ </a>
+ </li>
+ ...
+ </ul>
+ </li>
+ <li class="footer"><a href="#">View all</a></li>
+ </ul>
+ </li>
+ <!-- Tasks: style can be found in dropdown.less -->
+ <li class="dropdown tasks-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-flag-o"></i>
+ <span class="label label-danger">9</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 9 tasks</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- Task item -->
+ <a href="#">
+ <h3>
+ Design some buttons
+ <small class="pull-right">20%</small>
+ </h3>
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+ <span class="sr-only">20% Complete</span>
+ </div>
+ </div>
+ </a>
+ </li><!-- end task item -->
+ ...
+ </ul>
+ </li>
+ <li class="footer">
+ <a href="#">View all tasks</a>
+ </li>
+ </ul>
+ </li>
+ <!-- User Account: style can be found in dropdown.less -->
+ <li class="dropdown user user-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
+ <span class="hidden-xs">Alexander Pierce</span>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- User image -->
+ <li class="user-header">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+ <p>
+ Alexander Pierce - Web Developer
+ <small>Member since Nov. 2012</small>
+ </p>
+ </li>
+ <!-- Menu Body -->
+ <li class="user-body">
+ <div class="col-xs-4 text-center">
+ <a href="#">Followers</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Sales</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Friends</a>
+ </div>
+ </li>
+ <!-- Menu Footer-->
+ <li class="user-footer">
<div class="pull-left">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
- <h4>
- Sender Name
- <small><i class="fa fa-clock-o"></i> 5 mins</small>
- </h4>
- <p>Message Excerpt</p>
- </a>
- </li><!-- end message -->
- ...
- </ul>
- </li>
- <li class="footer"><a href="#">See All Messages</a></li>
- </ul>
- </li>
- <!-- Notifications: style can be found in dropdown.less -->
- <li class="dropdown notifications-menu">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-bell-o"></i>
- <span class="label label-warning">10</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">You have 10 notifications</li>
- <li>
- <!-- inner menu: contains the actual data -->
- <ul class="menu">
- <li>
- <a href="#">
- <i class="ion ion-ios-people info"></i> Notification title
- </a>
- </li>
- ...
- </ul>
- </li>
- <li class="footer"><a href="#">View all</a></li>
- </ul>
- </li>
- <!-- Tasks: style can be found in dropdown.less -->
- <li class="dropdown tasks-menu">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-flag-o"></i>
- <span class="label label-danger">9</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">You have 9 tasks</li>
- <li>
- <!-- inner menu: contains the actual data -->
- <ul class="menu">
- <li><!-- Task item -->
- <a href="#">
- <h3>
- Design some buttons
- <small class="pull-right">20%</small>
- </h3>
- <div class="progress xs">
- <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
- <span class="sr-only">20% Complete</span>
- </div>
+ <div class="pull-right">
+ <a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
- </a>
- </li><!-- end task item -->
- ...
- </ul>
- </li>
- <li class="footer">
- <a href="#">View all tasks</a>
- </li>
- </ul>
- </li>
- <!-- User Account: style can be found in dropdown.less -->
- <li class="dropdown user user-menu">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
- <span class="hidden-xs">Alexander Pierce</span>
- </a>
- <ul class="dropdown-menu">
- <!-- User image -->
- <li class="user-header">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
- <p>
- Alexander Pierce - Web Developer
- <small>Member since Nov. 2012</small>
- </p>
- </li>
- <!-- Menu Body -->
- <li class="user-body">
- <div class="col-xs-4 text-center">
- <a href="#">Followers</a>
- </div>
- <div class="col-xs-4 text-center">
- <a href="#">Sales</a>
- </div>
- <div class="col-xs-4 text-center">
- <a href="#">Friends</a>
- </div>
- </li>
- <!-- Menu Footer-->
- <li class="user-footer">
- <div class="pull-left">
- <a href="#" class="btn btn-default btn-flat">Profile</a>
- </div>
- <div class="pull-right">
- <a href="#" class="btn btn-default btn-flat">Sign out</a>
- </div>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </nav>
-</header>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </nav>
+ </header>
To use this main header instead of the regular one, you must add the layout-top-nav class to
- the body tag.
To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.
-<header class="main-header"> - <nav class="navbar navbar-static-top"> - <div class="container-fluid"> - <div class="navbar-header"> - <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> - <i class="fa fa-bars"></i> - </button> - </div> - - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="navbar-collapse"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - <li class="divider"></li> - <li><a href="#">One more separated link</a></li> - </ul> - </li> - </ul> - <form class="navbar-form navbar-left" role="search"> - <div class="form-group"> - <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> - </div> - </form> - <ul class="nav navbar-nav navbar-right"> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </li> - </ul> - </div><!-- /.navbar-collapse --> - </div><!-- /.container-fluid --> - </nav> -</header>+ <header class="main-header"> + <nav class="navbar navbar-static-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> + <i class="fa fa-bars"></i> + </button> + </div> + + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + <li class="divider"></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> + </div> + </form> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> + </nav> + </header> @@ -893,81 +856,80 @@
-<div class="main-sidebar"> - <!-- Inner sidebar --> - <div class="sidebar"> - <!-- user panel (Optional) --> - <div class="user-panel"> - <div class="pull-left image"> - <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> - </div> - <div class="pull-left info"> - <p>User Name</p> + <div class="main-sidebar"> + <!-- Inner sidebar --> + <div class="sidebar"> + <!-- user panel (Optional) --> + <div class="user-panel"> + <div class="pull-left image"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> + </div> + <div class="pull-left info"> + <p>User Name</p> + + <a href="#"><i class="fa fa-circle text-success"></i> Online</a> + </div> + </div><!-- /.user-panel --> + + <!-- Search Form (Optional) --> + <form action="#" method="get" class="sidebar-form"> + <div class="input-group"> + <input type="text" name="q" class="form-control" placeholder="Search..."> + <span class="input-group-btn"> + <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button> + </span> + </div> + </form><!-- /.sidebar-form --> + + <!-- Sidebar Menu --> + <ul class="sidebar-menu"> + <li class="header">HEADER</li> + <!-- Optionally, you can add icons to the links --> + <li class="active"><a href="#"><span>Link</span></a><</li> + <li><a href="#"><span>Another Link</span></a></li> + <li class="treeview"> + <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> + <ul class="treeview-menu"> + <li><a href="#">Link in level 2</a></li> + <li><a href="#">Link in level 2</a></li> + </ul> + </li> + </ul><!-- /.sidebar-menu --> - <a href="#"><i class="fa fa-circle text-success"></i> Online</a> - </div> - </div><!-- /.user-panel --> - - <!-- Search Form (Optional) --> - <form action="#" method="get" class="sidebar-form"> - <div class="input-group"> - <input type="text" name="q" class="form-control" placeholder="Search..."> - <span class="input-group-btn"> - <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button> - </span> - </div> - </form><!-- /.sidebar-form --> - - <!-- Sidebar Menu --> - <ul class="sidebar-menu"> - <li class="header">HEADER</li> - <!-- Optionally, you can add icons to the links --> - <li class="active"><a href="#"><span>Link</span></a><</li> - <li><a href="#"><span>Another Link</span></a></li> - <li class="treeview"> - <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> - <ul class="treeview-menu"> - <li><a href="#">Link in level 2</a></li> - <li><a href="#">Link in level 2</a></li> - </ul> - </li> - </ul><!-- /.sidebar-menu --> - - </div><!-- /.sidebar --> -</div><!-- /.main-sidebar -->+ </div><!-- /.sidebar --> + </div><!-- /.main-sidebar -->
Control sidebar is the right side bar. It can be used for many purposes and is extremely easy to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to - slide over the content. The second pushes the content to make space for the sidebar. Either of - these methods can be set through the Javascript options.
+ slide over the content. The second pushes the content to make space for the sidebar. Either of + these methods can be set through the Javascript options.The following code should be placed within the .wrapper div. I prefer
- to place it right after the footer.
Dark Sidebar Markup
-<!-- The Right Sidebar -->
-<aside class="control-sidebar control-sidebar-dark">
- <!-- Content of the sidebar goes here -->
-</aside>
-<!-- The sidebar's background -->
-<!-- This div must placed right after the sidebar for it to work-->
-<div class="control-sidebar-bg"></div><!-- The Right Sidebar -->
+ <aside class="control-sidebar control-sidebar-dark">
+ <!-- Content of the sidebar goes here -->
+ </aside>
+ <!-- The sidebar's background -->
+ <!-- This div must placed right after the sidebar for it to work-->
+ <div class="control-sidebar-bg"></div>Light Sidebar Markup
-<!-- The Right Sidebar -->
-<aside class="control-sidebar control-sidebar-light">
- <!-- Content of the sidebar goes here -->
-</aside>
-<!-- The sidebar's background -->
-<!-- This div must placed right after the sidebar for it to work-->
-<div class="control-sidebar-bg"></div><!-- The Right Sidebar -->
+ <aside class="control-sidebar control-sidebar-light">
+ <!-- Content of the sidebar goes here -->
+ </aside>
+ <!-- The sidebar's background -->
+ <!-- This div must placed right after the sidebar for it to work-->
+ <div class="control-sidebar-bg"></div>Once you create the sidebar, you will need a toggle button to open/close it.
- By adding the attribute data-toggle="control-sidebar" to any button, it will
- automatically act as the toggle button.
data-toggle="control-sidebar" to any button, it will
+ automatically act as the toggle button.
Toggle Button Example
- -Sidebar Toggle Markup
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>Markup
<div class="info-box">
- <!-- Apply any bg-* class to to the icon to color it -->
- <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
- <div class="info-box-content">
- <span class="info-box-text">Likes</span>
- <span class="info-box-number">93,139</span>
- </div><!-- /.info-box-content -->
-</div><!-- /.info-box -->Markup
<!-- Apply any bg-* class to to the info-box to color it -->
-<div class="info-box bg-red">
- <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
- <div class="info-box-content">
- <span class="info-box-text">Likes</span>
- <span class="info-box-number">41,410</span>
- <!-- The progress section is optional -->
- <div class="progress">
- <div class="progress-bar" style="width: 70%"></div>
- </div>
- <span class="progress-description">
- 70% Increase in 30 Days
- </span>
- </div><!-- /.info-box-content -->
-</div><!-- /.info-box -->The only thing you need to change to alternate between these style is change the placement of - the bg-* class. For the - first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box - div.
+ <div class="info-box bg-red"> + <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">41,410</span> + <!-- The progress section is optional --> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> +The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the + first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.
<div class="box"> - <div class="box-header with-border"> - <h3 class="box-title">Default Box Example</h3> - <div class="box-tools pull-right"> - <!-- Buttons, labels, and many other things can be placed here! --> - <!-- Here is a label for example --> - <span class="label label-primary">Label</span> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> - <div class="box-footer"> - The footer of the box - </div><!-- box-footer --> -</div><!-- /.box -->+ <div class="box-header with-border"> + <h3 class="box-title">Default Box Example</h3> + <div class="box-tools pull-right"> + <!-- Buttons, labels, and many other things can be placed here! --> + <!-- Here is a label for example --> + <span class="label label-primary">Label</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <div class="box-footer"> + The footer of the box + </div><!-- box-footer --> + </div><!-- /.box -->
You can change the style of the box by adding any of the contextual classes.
<div class="box box-default">...</div> -<div class="box box-primary">...</div> -<div class="box box-info">...</div> -<div class="box box-warning">...</div> -<div class="box box-success">...</div> -<div class="box box-danger">...</div>+ <div class="box box-primary">...</div> + <div class="box box-info">...</div> + <div class="box box-warning">...</div> + <div class="box box-success">...</div> + <div class="box box-danger">...</div>
Solid Boxes are alternative ways to display boxes. @@ -1287,23 +1247,22 @@
-<div class="box box-solid box-default">...</div> -<div class="box box-solid box-primary">...</div> -<div class="box box-solid box-info">...</div> -<div class="box box-solid box-warning">...</div> -<div class="box box-solid box-success">...</div> -<div class="box box-solid box-danger">...</div>+ <div class="box box-solid box-default">...</div> + <div class="box box-solid box-primary">...</div> + <div class="box box-solid box-info">...</div> + <div class="box box-solid box-warning">...</div> + <div class="box box-solid box-success">...</div> + <div class="box box-solid box-danger">...</div>
Boxes can contain tools to deploy a specific event or provide simple info. The following - examples makes use +
Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the box.
AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons are placed in the box-tools which is placed in the box-header.
-<!-- This will cause the box to be removed when clicked --> -<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> -<!-- This will cause the box to collapse when clicked --> -<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>+ <!-- This will cause the box to be removed when clicked --> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + <!-- This will cause the box to collapse when clicked --> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
-<div class="box box-default"> - <div class="box-header with-border"> - <h3 class="box-title">Collapsable</h3> - <div class="box-tools pull-right"> - <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
-<div class="box box-default"> - <div class="box-header with-border"> - <h3 class="box-title">Removable</h3> - <div class="box-tools pull-right"> - <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Removable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
-<div class="box box-default collapsed-box"> - <div class="box-header with-border"> - <h3 class="box-title">Expandable</h3> - <div class="box-tools pull-right"> - <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default collapsed-box"> + <div class="box-header with-border"> + <h3 class="box-title">Expandable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> -
We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few - examples:
+We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
-<div class="box box-default"> - <div class="box-header with-border"> - <h3 class="box-title">Labels</h3> - <div class="box-tools pull-right"> - <span class="label label-default">8 New Messages</span> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Labels</h3> + <div class="box-tools pull-right"> + <span class="label label-default">8 New Messages</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
-<div class="box box-default"> - <div class="box-header with-border"> - <h3 class="box-title">Input</h3> - <div class="box-tools pull-right"> - <div class="has-feedback"> - <input type="text" class="form-control input-sm" placeholder="Search..."> - <span class="glyphicon glyphicon-search form-control-feedback"></span> - </div> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Input</h3> + <div class="box-tools pull-right"> + <div class="has-feedback"> + <input type="text" class="form-control input-sm" placeholder="Search..."> + <span class="glyphicon glyphicon-search form-control-feedback"></span> + </div> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
-<div class="box box-default"> - <div class="box-header with-border"> - <h3 class="box-title">Tooltips on buttons</h3> - <div class="box-tools pull-right"> - <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> - <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> - </div><!-- /.box-tools --> - </div><!-- /.box-header --> - <div class="box-body"> - The body of the box - </div><!-- /.box-body --> -</div><!-- /.box -->+ <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Tooltips on buttons</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box -->
@@ -1475,8 +1431,8 @@
.activateBox():
<script>
- $("#box-widget").activateBox();
-</script>.box closing tag.
<div class="overlay">
- <i class="fa fa-refresh fa-spin"></i>
-</div>
-The direct chat widget extends the box component to create a beautiful chat interface. This - widget +
The direct chat widget extends the box component to create a beautiful chat interface. This widget consists of a required messages pane and an optional contacts pane. Examples:
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Direct Chat Markup
-<!-- Construct the box with style you want. Here we are using box-danger -->
-<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
-<!-- The contextual class should match the box, so we are using direct-chat-danger -->
-<div class="box box-danger direct-chat direct-chat-danger">
- <div class="box-header with-border">
- <h3 class="box-title">Direct Chat</h3>
- <div class="box-tools pull-right">
- <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
- <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
- <!-- In box-tools add this button if you intend to use the contacts pane -->
- <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
- </div>
- </div><!-- /.box-header -->
- <div class="box-body">
- <!-- Conversations are loaded here -->
- <div class="direct-chat-messages">
- <!-- Message. Default to the left -->
- <div class="direct-chat-msg">
- <div class="direct-chat-info clearfix">
- <span class="direct-chat-name pull-left">Alexander Pierce</span>
- <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
- </div><!-- /.direct-chat-info -->
- <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
- <div class="direct-chat-text">
- Is this template really for free? That's unbelievable!
- </div><!-- /.direct-chat-text -->
- </div><!-- /.direct-chat-msg -->
-
- <!-- Message to the right -->
- <div class="direct-chat-msg right">
- <div class="direct-chat-info clearfix">
- <span class="direct-chat-name pull-right">Sarah Bullock</span>
- <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
- </div><!-- /.direct-chat-info -->
- <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
- <div class="direct-chat-text">
- You better believe it!
- </div><!-- /.direct-chat-text -->
- </div><!-- /.direct-chat-msg -->
- </div><!--/.direct-chat-messages-->
-
- <!-- Contacts are loaded here -->
- <div class="direct-chat-contacts">
- <ul class="contacts-list">
- <li>
- <a href="#">
- <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
- <div class="contacts-list-info">
- <span class="contacts-list-name">
- Count Dracula
- <small class="contacts-list-date pull-right">2/28/2015</small>
- </span>
- <span class="contacts-list-msg">How have you been? I was...</span>
- </div><!-- /.contacts-list-info -->
- </a>
- </li><!-- End Contact Item -->
- </ul><!-- /.contatcts-list -->
- </div><!-- /.direct-chat-pane -->
- </div><!-- /.box-body -->
- <div class="box-footer">
- <div class="input-group">
- <input type="text" name="message" placeholder="Type Message ..." class="form-control">
- <span class="input-group-btn">
- <button type="button" class="btn btn-danger btn-flat">Send</button>
- </span>
- </div>
- </div><!-- /.box-footer-->
-</div><!--/.direct-chat -->
-Of course you can use direct chat with a solid box by adding the class solid-box to the box.
- Here are a couple of examples:
Of course you can use direct chat with a solid box by adding the class solid-box to the box. Here are a couple of examples:
-
+
-
+
-
+
-
+
AdminLTE makes use of the following plugins. For documentation, updates or license information, - please visit the provided links.
+AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.
Note: IE9 does not support transitions or animations. The template will function properly but it won't - use animations/transitions on IE9.
+Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.
@@ -2134,25 +2067,19 @@<div class="main-header"><div class="content-wrapper"><div class="main-sidebar"><div
- class="navbar-custom-menu"><div class="navbar-custom-menu">There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code - and customize it.
+There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.
And you should be set to go!
Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new - email. To use these views, +
Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views, you should use the provided HTML files in the pages/mailbox folder.
-Note: the old mailbox layout has been deprecated in favor of the new one and will be - removed by the next release.
+Note: the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.
@@ -2161,34 +2088,22 @@Thanks to many of AdminLTE users, there are multiple implementations of the template - for easy integration with back-end frameworks. The following are some of them:
+ for easy integration with back-end frameworks. The following are some of them:Note: these implementations are not supported by Almsaeed Studio. However, they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release - of AdminLTE, please visit our repository or website
+ of AdminLTE, please visit our repository or websiteAdminLTE is an HTML template that can be used for any purpose. However, it is not made to be - easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do - so.
+AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.
Short answer, no. However, there are forks and tutorials around the web that provide info on how - to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with - jQuery ajax, AngularJS and/or MVC5 ASP .NET.
+Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
The best option is to subscribe to our mailing list using the subscription form on Almsaeed Studio. - If that's not appealing to you, you may watch the repository - on Github or visit Almsaeed Studio every now and then for - updates and announcements.
+The best option is to subscribe to our mailing list using the subscription form on Almsaeed Studio. + If that's not appealing to you, you may watch the repository on Github or visit Almsaeed Studio every now and then for updates and announcements.
- AdminLTE is an open source project that is licensed under the MIT - license. + AdminLTE is an open source project that is licensed under the MIT license. This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated). @@ -2235,7 +2142,7 @@