@ -103,7 +103,7 @@
<!-- Main content -->
<!-- Main content -->
< div class = "content body" >
< div class = "content body" >
< section id = 'introduction' > < section id = 'introduction' >
< h2 class = 'page-header' > < a href = "#introduction" > Introduction< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#introduction" > Introduction< / a > < / h2 >
< p class = 'lead' >
< p class = 'lead' >
< b > AdminLTE< / b > is a popular open source WebApp template for admin dashboards and control panels.
< b > AdminLTE< / b > is a popular open source WebApp template for admin dashboards and control panels.
@ -114,11 +114,11 @@
allows it to be easily customized and built upon. This documentation will guide you through
allows it to be easily customized and built upon. This documentation will guide you through
installing the template and exploring the various components that are bundled with the template.
installing the template and exploring the various components that are bundled with the template.
< / p >
< / p >
< / section > <!-- /#introduction --> < / section > <!-- /#introduction -->
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'download' > < section id = 'download' >
< h2 class = 'page-header' > < a href = "#download" > Download< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#download" > Download< / a > < / h2 >
< p class = 'lead' >
< p class = 'lead' >
AdminLTE can be downloaded in two different versions, each appealing to different
AdminLTE can be downloaded in two different versions, each appealing to different
@ -154,25 +154,25 @@
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< pre class = 'hierarchy bring-up' > < code class = "language-bash" data-lang = "bash" > File Hierarchy of the Source Code Package
< pre class = 'hierarchy bring-up' > < code class = "language-bash" data-lang = "bash" > File Hierarchy of the Source Code Package
AdminLTE/AdminLTE/
├── dist/├── dist/
│ ├── CSS/│ ├── CSS/
│ ├── JS│ ├── JS
│ ├── img│ ├── img
├── build/├── build/
│ ├── less/│ ├── less/
│ │ ├── AdminLTE's Less files│ │ ├── AdminLTE's Less files
│ └── Bootstrap-less/ (Only for reference. No modifications have been made)│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
│ ├── mixins/│ ├── mixins/
│ ├── variables.less│ ├── variables.less
│ ├── mixins.less│ ├── mixins.less
└── plugins/└── plugins/
├── All the customized plugins CSS and JS files< / code > < / pre >
├── All the customized plugins CSS and JS files< / code > < / pre >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = "dependencies" > < section id = "dependencies" >
< h2 class = "page-header" > < a href = "#dependencies" > Dependencies< / a > < / h2 >
< h2 class = "page-header" > < a href = "#dependencies" > Dependencies< / a > < / h2 >
< p class = "lead" > AdminLTE depends on two main frameworks.
< p class = "lead" > AdminLTE depends on two main frameworks.
The downloadable package contains both of these libraries, so you don't have to manually download them.< / p >
The downloadable package contains both of these libraries, so you don't have to manually download them.< / p >
@ -181,11 +181,11 @@
< li > < a href = "http://jquery.com/" target = "_blank" > jQuery 1.11+< / a > < / li >
< li > < a href = "http://jquery.com/" target = "_blank" > jQuery 1.11+< / a > < / li >
< li > < a href = "#plugins" > All other plugins are listed below< / a > < / li >
< li > < a href = "#plugins" > All other plugins are listed below< / a > < / li >
< / ul >
< / ul >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'advice' > < section id = 'advice' >
< h2 class = 'page-header' > < a href = "#advice" > A Word of Advice< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#advice" > A Word of Advice< / a > < / h2 >
< p class = 'lead' >
< p class = 'lead' >
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
@ -201,11 +201,11 @@
< p >
< p >
< b > Note:< / b > LESS files are better commented than the compiled CSS file.
< b > Note:< / b > LESS files are better commented than the compiled CSS file.
< / p >
< / p >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'layout' > < section id = 'layout' >
< h2 class = 'page-header' > < a href = "#layout" > Layout< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#layout" > Layout< / a > < / h2 >
< p class = 'lead' > The layout consists of four major parts:< / p >
< p class = 'lead' > The layout consists of four major parts:< / p >
< ul >
< ul >
@ -242,11 +242,11 @@
< li > < code > skin-red< / code > < / li >
< li > < code > skin-red< / code > < / li >
< li > < code > skin-black< / code > < / li >
< li > < code > skin-black< / code > < / li >
< / ul >
< / ul >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'adminlte-options' > < section id = 'adminlte-options' >
< h2 class = 'page-header' > < a href = "#adminlte-options" > AdminLTE Javascript Options< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#adminlte-options" > AdminLTE Javascript Options< / a > < / h2 >
< p class = "lead" > Modifying the options of AdminLTE's app.js can be done using one of the following ways.< / p >
< p class = "lead" > Modifying the options of AdminLTE's app.js can be done using one of the following ways.< / p >
@ -267,8 +267,8 @@
//Bootstrap.js tooltip
//Bootstrap.js tooltip
enableBSToppltip: true
enableBSToppltip: true
};
};
< /script>< /script>
< script src='dist/js/app.js' type='text/javascript'>< /script>< / code > < / pre > < script src='dist/js/app.js' type='text/javascript'>< /script>< / code > < / pre >
< h3 > Available AdminLTE Options< / h3 >
< h3 > Available AdminLTE Options< / h3 >
< pre class = 'prettyprint' > < code class = 'javascript' > {
< pre class = 'prettyprint' > < code class = 'javascript' > {
@ -363,12 +363,12 @@
md: 992,
md: 992,
lg: 1200
lg: 1200
}
}
}< / code > < / pre > }< / code > < / pre >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'components' data-spy = "scroll" data-target = "#scrollspy-components" > < section id = 'components' data-spy = "scroll" data-target = "#scrollspy-components" >
< h2 class = 'page-header' > < a href = "#components" > Components< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#components" > Components< / a > < / h2 >
< div class = 'callout callout-info lead' >
< div class = 'callout callout-info lead' >
< h4 > Reminder!< / h4 >
< h4 > Reminder!< / h4 >
@ -664,7 +664,7 @@
< /ul>
< /ul>
< /div>
< /div>
< /nav>
< /nav>
< /header>< / pre > < /header>< / pre >
< h4 > Top Nav Layout. Main Header Example.< / h4 >
< h4 > Top Nav Layout. Main Header Example.< / h4 >
< div class = "callout callout-info lead" >
< div class = "callout callout-info lead" >
< h4 > Reminder!< / h4 >
< h4 > Reminder!< / h4 >
@ -726,7 +726,7 @@
< / div >
< / div >
< / div >
< / div >
< pre class = 'prettyprint' >
< pre class = 'prettyprint' >
< header class="main-header">< header class="main-header">
< nav class="navbar navbar-static-top">
< nav class="navbar navbar-static-top">
< div class="container-fluid">
< div class="container-fluid">
< div class="navbar-header">
< div class="navbar-header">
@ -775,7 +775,7 @@
< /div>< !-- /.navbar-collapse -->
< /div>< !-- /.navbar-collapse -->
< /div>< !-- /.container-fluid -->
< /div>< !-- /.container-fluid -->
< /nav>
< /nav>
< /header>< / pre > < /header>< / pre >
<!-- ===================================================================== -->
<!-- ===================================================================== -->
@ -785,7 +785,7 @@
Construction of a sidebar:
Construction of a sidebar:
< / p >
< / p >
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="main-sidebar">< div class="main-sidebar">
< !-- Inner sidebar -->
< !-- Inner sidebar -->
< div class="sidebar">
< div class="sidebar">
< !-- user panel (Optional) -->
< !-- user panel (Optional) -->
@ -826,7 +826,7 @@
< /ul>< !-- /.sidebar-menu -->
< /ul>< !-- /.sidebar-menu -->
< /div>< !-- /.sidebar -->
< /div>< !-- /.sidebar -->
< /div>< !-- /.main-sidebar -->< / pre > < /div>< !-- /.main-sidebar -->< / pre >
< h3 id = "component-control-sidebar" > Control Sidebar< / h3 >
< h3 id = "component-control-sidebar" > Control Sidebar< / h3 >
< p class = "lead" > Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
< p class = "lead" > Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
@ -836,22 +836,22 @@
< p class = "lead" > The following code should be placed within the < code > .wrapper< / code > div. I prefer
< p class = "lead" > The following code should be placed within the < code > .wrapper< / code > div. I prefer
to place it right after the footer.< / p >
to place it right after the footer.< / p >
< p class = "lead" > Dark Sidebar Markup< / p >
< p class = "lead" > Dark Sidebar Markup< / p >
< pre class = "prettyprint" > < code class = "lang-html" > < !-- The Right Sidebar -->< pre class = "prettyprint" > < code class = "lang-html" > < !-- The Right Sidebar -->
< aside class="control-sidebar control-sidebar-dark">< aside class="control-sidebar control-sidebar-dark">
< !-- Content of the sidebar goes here -->
< !-- Content of the sidebar goes here -->
< /aside>< /aside>
< !-- The sidebar's background -->< !-- The sidebar's background -->
< !-- This div must placed right after the sidebar for it to work-->< !-- This div must placed right after the sidebar for it to work-->
< div class="control-sidebar-bg">< /div>< / code > < / pre > < div class="control-sidebar-bg">< /div>< / code > < / pre >
< p class = "lead" > Light Sidebar Markup< / p >
< p class = "lead" > Light Sidebar Markup< / p >
< pre class = "prettyprint" > < code class = "lang-html" > < !-- The Right Sidebar -->< pre class = "prettyprint" > < code class = "lang-html" > < !-- The Right Sidebar -->
< aside class="control-sidebar control-sidebar-light">< aside class="control-sidebar control-sidebar-light">
< !-- Content of the sidebar goes here -->
< !-- Content of the sidebar goes here -->
< /aside>< /aside>
< !-- The sidebar's background -->< !-- The sidebar's background -->
< !-- This div must placed right after the sidebar for it to work-->< !-- This div must placed right after the sidebar for it to work-->
< div class="control-sidebar-bg">< /div>< / code > < / pre > < div class="control-sidebar-bg">< /div>< / code > < / pre >
< p class = 'lead' > Once you create the sidebar, you will need a toggle button to open/close it.
< p class = 'lead' > Once you create the sidebar, you will need a toggle button to open/close it.
By adding the attribute < code > data-toggle="control-sidebar"< / code > to any button, it will
By adding the attribute < code > data-toggle="control-sidebar"< / code > to any button, it will
@ -914,7 +914,7 @@
< span class="info-box-text">Likes< /span>
< span class="info-box-text">Likes< /span>
< span class="info-box-number">93,139< /span>
< span class="info-box-number">93,139< /span>
< /div>< !-- /.info-box-content -->
< /div>< !-- /.info-box-content -->
< /div>< !-- /.info-box -->< / code > < / pre > < /div>< !-- /.info-box -->< / code > < / pre >
< h4 > Second Type of Info Boxes< / h4 >
< h4 > Second Type of Info Boxes< / h4 >
< div class = "row" >
< div class = "row" >
@ -981,7 +981,7 @@
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< p class = "lead" > Markup< / p >
< p class = "lead" > Markup< / p >
< pre class = "prettyprint" > < code class = "lang-html" > < -- Apply any bg-* class to to the info-box to color it -->
< pre class = "prettyprint" > < code class = "lang-html" > < -- Apply any bg-* class to to the info-box to color it -->
< div class="info-box bg-red">< div class="info-box bg-red">
< span class="info-box-icon">< i class="fa fa-comments-o">< /i>< /span>
< span class="info-box-icon">< i class="fa fa-comments-o">< /i>< /span>
< div class="info-box-content">
< div class="info-box-content">
< span class="info-box-text">Likes< /span>
< span class="info-box-text">Likes< /span>
@ -994,7 +994,7 @@
70% Increase in 30 Days
70% Increase in 30 Days
< /span>
< /span>
< /div>< !-- /.info-box-content -->
< /div>< !-- /.info-box-content -->
< /div>< !-- /.info-box -->< / code > < / pre > < /div>< !-- /.info-box -->< / code > < / pre >
< p class = "lead" > The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
< p class = "lead" > 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.< / p >
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.< / p >
<!-- ===================================================================== -->
<!-- ===================================================================== -->
@ -1035,7 +1035,7 @@
< div class="box-footer">
< div class="box-footer">
The footer of the box
The footer of the box
< /div>< !-- box-footer -->
< /div>< !-- box-footer -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< h4 > Box Variants< / h4 >
< h4 > Box Variants< / h4 >
< p class = "lead" > You can change the style of the box by adding any of the contextual classes.< / p >
< p class = "lead" > You can change the style of the box by adding any of the contextual classes.< / p >
< div class = "row" >
< div class = "row" >
@ -1102,11 +1102,11 @@
< / div >
< / div >
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< pre class = "prettyprint" > < div class="box box-default">...< /div>
< pre class = "prettyprint" > < div class="box box-default">...< /div>
< div class="box box-primary">...< /div>< div class="box box-primary">...< /div>
< div class="box box-info">...< /div>< div class="box box-info">...< /div>
< div class="box box-warning">...< /div>< div class="box box-warning">...< /div>
< div class="box box-success">...< /div>< div class="box box-success">...< /div>
< div class="box box-danger">...< /div>< / pre > < div class="box box-danger">...< /div>< / pre >
< h4 > Solid Box< / h4 >
< h4 > Solid Box< / h4 >
< p class = "lead" > Solid Boxes are alternative ways to display boxes.
< p class = "lead" > Solid Boxes are alternative ways to display boxes.
@ -1176,22 +1176,22 @@
< / div >
< / div >
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-solid box-default">...< /div>< div class="box box-solid box-default">...< /div>
< div class="box box-solid box-primary">...< /div>< div class="box box-solid box-primary">...< /div>
< div class="box box-solid box-info">...< /div>< div class="box box-solid box-info">...< /div>
< div class="box box-solid box-warning">...< /div>< div class="box box-solid box-warning">...< /div>
< div class="box box-solid box-success">...< /div>< div class="box box-solid box-success">...< /div>
< div class="box box-solid box-danger">...< /div>< / pre > < div class="box box-solid box-danger">...< /div>< / pre >
< h4 > Box Tools< / h4 >
< h4 > Box Tools< / h4 >
< p class = "lead" > Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
< p class = "lead" > 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.< / p >
of multiple AdminLTE components within the header of the box.< / p >
< p > AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
< p > 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.< / p >
are placed in the box-tools which is placed in the box-header.< / p >
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< -- This will cause the box to be removed when clicked -->< -- 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>< 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 -->< -- 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>< / pre > < button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">< i class="fa fa-minus">< /i>< /button>< / pre >
< div class = "row" >
< div class = "row" >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "box box-default" >
< div class = "box box-default" >
@ -1206,7 +1206,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Collapsable< /h3>
< h3 class="box-title">Collapsable< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1216,7 +1216,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "box box-default" >
< div class = "box box-default" >
@ -1231,7 +1231,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Removable< /h3>
< h3 class="box-title">Removable< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1241,7 +1241,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "box box-default collapsed-box" >
< div class = "box box-default collapsed-box" >
@ -1256,7 +1256,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Expandable< /h3>
< h3 class="box-title">Expandable< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1266,7 +1266,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div >
< / div >
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< p > We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:< / p >
< p > We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:< / p >
@ -1284,7 +1284,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Labels< /h3>
< h3 class="box-title">Labels< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1294,7 +1294,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "box box-default" >
< div class = "box box-default" >
@ -1312,7 +1312,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Input< /h3>
< h3 class="box-title">Input< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1325,7 +1325,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "box box-default" >
< div class = "box box-default" >
@ -1341,7 +1341,7 @@
< / div > <!-- /.box - body -->
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.box -->
< pre class = "prettyprint" >
< pre class = "prettyprint" >
< div class="box box-default">< div class="box box-default">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Tooltips on buttons< /h3>
< h3 class="box-title">Tooltips on buttons< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1352,7 +1352,7 @@
< div class="box-body">
< div class="box-body">
The body of the box
The body of the box
< /div>< !-- /.box-body -->
< /div>< !-- /.box-body -->
< /div>< !-- /.box -->< / pre > < /div>< !-- /.box -->< / pre >
< / div > <!-- /.col -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< / div > <!-- /.row -->
@ -1395,8 +1395,8 @@
< / p >
< / p >
< pre class = "prettyprint" > < code class = "html" > < div class="overlay">
< pre class = "prettyprint" > < code class = "html" > < div class="overlay">
< i class="fa fa-refresh fa-spin">< /i>
< i class="fa fa-refresh fa-spin">< /i>
< /div>< /div>
< / code > < / pre > < / code > < / pre >
< h3 id = "component-direct-chat" > Direct Chat< / h3 >
< h3 id = "component-direct-chat" > Direct Chat< / h3 >
< p class = "lead" > The direct chat widget extends the box component to create a beautiful chat interface. This widget
< p class = "lead" > The direct chat widget extends the box component to create a beautiful chat interface. This widget
consists of a required messages pane and an < b > optional< / b > contacts pane. Examples:< / p >
consists of a required messages pane and an < b > optional< / b > contacts pane. Examples:< / p >
@ -1688,10 +1688,10 @@
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< p class = "lead" > Direct Chat Markup< / p >
< p class = "lead" > Direct Chat Markup< / p >
< pre class = "prettyprint" > < code class = "html" >
< pre class = "prettyprint" > < code class = "html" >
< -- Construct the box with style you want. Here we are using box-danger -->< -- 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 -->< -- 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 -->< -- 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 box-danger direct-chat direct-chat-danger">
< div class="box-header with-border">
< div class="box-header with-border">
< h3 class="box-title">Direct Chat< /h3>
< h3 class="box-title">Direct Chat< /h3>
< div class="box-tools pull-right">
< div class="box-tools pull-right">
@ -1756,8 +1756,8 @@
< /span>
< /span>
< /div>
< /div>
< /div>< !-- /.box-footer-->
< /div>< !-- /.box-footer-->
< /div>< !--/.direct-chat -->< /div>< !--/.direct-chat -->
< / code > < / pre > < / code > < / pre >
< p > Of course you can use direct chat with a solid box by adding the class < code > solid-box< / code > to the box. Here are a couple of examples:< / p >
< p > Of course you can use direct chat with a solid box by adding the class < code > solid-box< / code > to the box. Here are a couple of examples:< / p >
@ -1905,11 +1905,11 @@
< / div > <!-- /.direct - chat -->
< / div > <!-- /.direct - chat -->
< / div > <!-- /.col -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'plugins' > < section id = 'plugins' >
< h2 class = 'page-header' > < a href = "#plugins" > Plugins< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#plugins" > Plugins< / a > < / h2 >
< p class = "lead" > AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.< / p >
< p class = "lead" > AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.< / p >
< div class = 'row bring-up' >
< div class = 'row bring-up' >
@ -1955,11 +1955,11 @@
< / ul >
< / ul >
< / div > <!-- /.col -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< / div > <!-- /.row -->
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'browsers' > < section id = 'browsers' >
< h2 class = 'page-header' > < a href = "#browsers" > Browser Support< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#browsers" > Browser Support< / a > < / h2 >
< p class = "lead" > AdminLTE supports the following browsers:< / p >
< p class = "lead" > AdminLTE supports the following browsers:< / p >
< ul >
< ul >
@ -1970,11 +1970,11 @@
< li > Opera (latest)< / li >
< li > Opera (latest)< / li >
< / ul >
< / ul >
< p > < b > Note:< / b > IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.< / p >
< p > < b > Note:< / b > IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.< / p >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'upgrade' > < section id = 'upgrade' >
< h2 class = 'page-header' > < a href = "#upgrade" > Upgrade Guide< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#upgrade" > Upgrade Guide< / a > < / h2 >
< p class = "lead" > To upgrade from version 1.x to the lateset version, follow this guide.< / p >
< p class = "lead" > To upgrade from version 1.x to the lateset version, follow this guide.< / p >
< h3 > New Files< / h3 >
< h3 > New Files< / h3 >
@ -1999,11 +1999,11 @@
< p > Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
< p > 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.< / p >
you should use the provided HTML files in the pages/mailbox folder.< / p >
< p > < b class = "text-red" > Note:< / b > the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.< / p >
< p > < b class = "text-red" > Note:< / b > the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.< / p >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = "implementations" > < section id = "implementations" >
< h2 class = "page-header" > < a href = "#implementations" > Implementations< / a > < / h2 >
< h2 class = "page-header" > < a href = "#implementations" > Implementations< / a > < / h2 >
< p class = "lead" > Thanks to many of AdminLTE users, there are multiple implementations of the template
< p class = "lead" > 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:< / p >
for easy integration with back-end frameworks. The following are some of them:< / p >
@ -2018,11 +2018,11 @@
< p > < b class = "text-red" > Note:< / b > these implementations are not supported by Almsaeed Studio. However,
< p > < b class = "text-red" > Note:< / b > 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
they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
of AdminLTE, please visit our < a href = "https://github.com/almasaeed2010/AdminLTE" > repository< / a > or < a href = "https://almsaeedstudio.com" > website< / a > < / p >
of AdminLTE, please visit our < a href = "https://github.com/almasaeed2010/AdminLTE" > repository< / a > or < a href = "https://almsaeedstudio.com" > website< / a > < / p >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = 'faq' > < section id = 'faq' >
< h2 class = 'page-header' > < a href = "#faq" > FAQ< / a > < / h2 >
< h2 class = 'page-header' > < a href = "#faq" > FAQ< / a > < / h2 >
< h3 > Can AdminLTE be used with Wordpress?< / h3 >
< h3 > Can AdminLTE be used with Wordpress?< / h3 >
< p class = "lead" > 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.< / p >
< p class = "lead" > 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.< / p >
@ -2038,11 +2038,11 @@
< a href = "http://almsaeedstudio.com/#subscribe" > subscription form on Almsaeed Studio< / a > .
< a href = "http://almsaeedstudio.com/#subscribe" > subscription form on Almsaeed Studio< / a > .
If that's not appealing to you, you may watch the < a href = "https://github.com/almasaeed2010/AdminLTE" > repository on Github< / a >
If that's not appealing to you, you may watch the < a href = "https://github.com/almasaeed2010/AdminLTE" > repository on Github< / a >
or visit < a href = "http://almsaeedstudio.com" > Almsaeed Studio< / a > every now and then for updates and announcements.< / p >
or visit < a href = "http://almsaeedstudio.com" > Almsaeed Studio< / a > every now and then for updates and announcements.< / p >
< / section > < / section >
<!-- ============================================================= --> <!-- ============================================================= -->
< section id = "license" > < section id = "license" >
< h2 class = "page-header" > < a href = "#license" > License< / a > < / h2 >
< h2 class = "page-header" > < a href = "#license" > License< / a > < / h2 >
< h3 > AdminLTE< / h3 >
< h3 > AdminLTE< / h3 >
< p class = "lead" > AdminLTE is an open source project that is licensed under the < a href = "http://opensource.org/licenses/MIT" > MIT license< / a > .
< p class = "lead" > AdminLTE is an open source project that is licensed under the < a href = "http://opensource.org/licenses/MIT" > MIT license< / a > .
@ -2084,7 +2084,7 @@
< / ul >
< / ul >
< / ul >
< / ul >
< p > For further question about which license you should get, please email us at < a href = "mailto:support@almsaeedstudio.com" > support@almsaeedstudio.com< / a > .< / p >
< p > For further question about which license you should get, please email us at < a href = "mailto:support@almsaeedstudio.com" > support@almsaeedstudio.com< / a > .< / p >
< / section > < / section >
< / div > <!-- /.content -->
< / div > <!-- /.content -->
< / div > <!-- /.content - wrapper -->
< / div > <!-- /.content - wrapper -->
Abdullah Almsaeed
10 years ago