mirror of https://github.com/ColorlibHQ/AdminLTE
Update docs links
parent
406cda26d9
commit
87209a984a
|
@ -22,12 +22,15 @@
|
||||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
|
<!-- Google Font -->
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
|
||||||
</head>
|
</head>
|
||||||
<body class="skin-blue" data-spy="scroll" data-target="#scrollspy">
|
<body class="skin-blue" data-spy="scroll" data-target="#scrollspy">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<!-- Logo -->
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<a href="../index2.html" class="logo">
|
<a href="../index2.html" class="logo">
|
||||||
<!-- mini logo for sidebar mini 50x50 pixels -->
|
<!-- mini logo for sidebar mini 50x50 pixels -->
|
||||||
|
@ -137,10 +140,8 @@
|
||||||
<span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
|
<span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
<p>Compiled and ready to use in production. Download this version if you don't want to customize
|
<p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
|
||||||
AdminLTE's LESS files.</p>
|
<a href="https://adminlte.io/download/AdminLTE-dist" class="btn btn-primary"><i class="fa fa-download"></i> Download</a>
|
||||||
<a href="https://adminlte.io/download/AdminLTE-dist" class="btn btn-primary"><i
|
|
||||||
class="fa fa-download"></i> Download</a>
|
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
|
@ -151,10 +152,8 @@
|
||||||
<span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
|
<span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
<p>All files including the compiled CSS. Download this version if you plan on customizing the template.
|
<p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>
|
||||||
<b>Requires a LESS compiler.</b></p>
|
<a href="https://adminlte.io/download/AdminLTE" class="btn btn-danger"><i class="fa fa-download"></i> Download</a>
|
||||||
<a href="https://adminlte.io/download/AdminLTE" class="btn btn-danger"><i
|
|
||||||
class="fa fa-download"></i> Download</a>
|
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
|
@ -201,26 +200,11 @@ AdminLTE/
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><b>AdminLTE is based on <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.</b> If you are
|
<li><b>AdminLTE is based on <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>.</b> If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of AdminLTE and provide a consistent look throughout the template. This way, we guarantee you will get the best of AdminLTE.</li>
|
||||||
unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap
|
<li><b>Go through the pages that are bundled with the theme.</b> Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.</li>
|
||||||
components have been modified to fit the style of AdminLTE and provide a consistent look throughout the
|
<li><b>Documentation.</b> We are trying our best to make your experience with AdminLTE be smooth. One way to achieve that is to provide documentation and support. If you think that something is missing from the documentation, please do not hesitate to create an issue to tell us about it.</li>
|
||||||
template. This way, we guarantee you will get the best of AdminLTE.
|
<li><b>Built with <a href="http://lesscss.org/" target="_blank">LESS</a>.</b> This theme uses the LESS compiler to make it easier to customize and use. LESS is easy to learn if you know CSS or SASS. It is not necessary to learn LESS but it will benefit you a lot in the future.</li>
|
||||||
</li>
|
<li><b>Hosted on <a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank">GitHub</a>.</b> Visit our GitHub repository to view issues, make requests, or contribute to the project.</li>
|
||||||
<li><b>Go through the pages that are bundled with the theme.</b> Most of the template example pages contain
|
|
||||||
quick tips on how to create or use a component which can be really helpful when you need to create something
|
|
||||||
on the fly.
|
|
||||||
</li>
|
|
||||||
<li><b>Documentation.</b> We are trying our best to make your experience with AdminLTE be smooth. One way to
|
|
||||||
achieve that is to provide documentation and support. If you think that something is missing from the
|
|
||||||
documentation, please do not hesitate to create an issue to tell us about it.
|
|
||||||
</li>
|
|
||||||
<li><b>Built with <a href="http://lesscss.org/" target="_blank">LESS</a>.</b> This theme uses the LESS
|
|
||||||
compiler to make it easier to customize and use. LESS is easy to learn if you know CSS or SASS. It is not
|
|
||||||
necessary to learn LESS but it will benefit you a lot in the future.
|
|
||||||
</li>
|
|
||||||
<li><b>Hosted on <a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank">GitHub</a>.</b> Visit
|
|
||||||
our GitHub repository to view issues, make requests, or contribute to the project.
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<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.
|
||||||
|
@ -241,28 +225,19 @@ AdminLTE/
|
||||||
</ul>
|
</ul>
|
||||||
<div class="callout callout-danger lead">
|
<div class="callout callout-danger lead">
|
||||||
<h4>Tip!</h4>
|
<h4>Tip!</h4>
|
||||||
<p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to
|
<p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
|
||||||
start from scratch.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Layout Options</h3>
|
<h3>Layout Options</h3>
|
||||||
<p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each one of these classes
|
<p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each one of these classes can be added
|
||||||
can be added
|
|
||||||
to the body tag to get the desired goal.</p>
|
to the body tag to get the desired goal.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
|
<li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
|
||||||
<li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon
|
<li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
|
||||||
loading.
|
<li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
|
||||||
</li>
|
<li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
|
||||||
<li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to
|
|
||||||
1250px.
|
|
||||||
</li>
|
|
||||||
<li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links
|
|
||||||
at the top navbar.
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed
|
<p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
|
||||||
together.</p>
|
|
||||||
|
|
||||||
<h3>Skins</h3>
|
<h3>Skins</h3>
|
||||||
<p class="lead">Skins can be found in the dist/css/skins folder.
|
<p class="lead">Skins can be found in the dist/css/skins folder.
|
||||||
|
@ -284,18 +259,15 @@ AdminLTE/
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-blue-light</code></td>
|
<td><code>skin-blue-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a>
|
<td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-yellow</code></td>
|
<td><code>skin-yellow</code></td>
|
||||||
<td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a>
|
<td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-yellow-light</code></td>
|
<td><code>skin-yellow-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i
|
<td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
class="fa fa-eye"></i></a></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-green</code></td>
|
<td><code>skin-green</code></td>
|
||||||
|
@ -303,8 +275,7 @@ AdminLTE/
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-green-light</code></td>
|
<td><code>skin-green-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i
|
<td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
class="fa fa-eye"></i></a></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-purple</code></td>
|
<td><code>skin-purple</code></td>
|
||||||
|
@ -312,8 +283,7 @@ AdminLTE/
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-purple-light</code></td>
|
<td><code>skin-purple-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a>
|
<td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-red</code></td>
|
<td><code>skin-red</code></td>
|
||||||
|
@ -321,8 +291,7 @@ AdminLTE/
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-red-light</code></td>
|
<td><code>skin-red-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a>
|
<td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-black</code></td>
|
<td><code>skin-black</code></td>
|
||||||
|
@ -330,8 +299,7 @@ AdminLTE/
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>skin-black-light</code></td>
|
<td><code>skin-black-light</code></td>
|
||||||
<td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a>
|
<td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
@ -350,8 +318,7 @@ AdminLTE/
|
||||||
<p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p>
|
<p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p>
|
||||||
|
|
||||||
<h3>Defining AdminLTEOptions</h3>
|
<h3>Defining AdminLTEOptions</h3>
|
||||||
<p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it
|
<p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it before loading app.js.</p>
|
||||||
before loading app.js.</p>
|
|
||||||
<p>Example</p>
|
<p>Example</p>
|
||||||
<pre class="prettyprint"><code class="html"><script>
|
<pre class="prettyprint"><code class="html"><script>
|
||||||
var AdminLTEOptions = {
|
var AdminLTEOptions = {
|
||||||
|
@ -493,8 +460,7 @@ AdminLTE/
|
||||||
<h3 id="component-main-header">Main Header</h3>
|
<h3 id="component-main-header">Main Header</h3>
|
||||||
<p class="lead">The main header contains the logo and navbar. Construction of the
|
<p class="lead">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.
|
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
|
The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for
|
||||||
an example for
|
|
||||||
the top nav layout.</p>
|
the top nav layout.</p>
|
||||||
<div class="box box-solid">
|
<div class="box box-solid">
|
||||||
<div class="box-body" style="position: relative;">
|
<div class="box-body" style="position: relative;">
|
||||||
|
@ -578,8 +544,7 @@ AdminLTE/
|
||||||
<small class="pull-right">20%</small>
|
<small class="pull-right">20%</small>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="progress xs">
|
<div class="progress xs">
|
||||||
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
|
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
||||||
<span class="sr-only">20% Complete</span>
|
<span class="sr-only">20% Complete</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -774,8 +739,7 @@ AdminLTE/
|
||||||
<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>
|
||||||
<p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to
|
<p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p>
|
||||||
the body tag.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="box box-solid">
|
<div class="box box-solid">
|
||||||
<div class="box-body layout-top-nav">
|
<div class="box-body layout-top-nav">
|
||||||
|
@ -785,8 +749,7 @@ AdminLTE/
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
|
<a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
|
||||||
data-target="#navbar-collapse">
|
|
||||||
<i class="fa fa-bars"></i>
|
<i class="fa fa-bars"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -966,8 +929,7 @@ AdminLTE/
|
||||||
automatically act as the toggle button.</p>
|
automatically act as the toggle button.</p>
|
||||||
|
|
||||||
<p class="lead">Toggle Button Example</p>
|
<p class="lead">Toggle Button Example</p>
|
||||||
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button>
|
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br><br>
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<p class="lead">Sidebar Toggle Markup</p>
|
<p class="lead">Sidebar Toggle Markup</p>
|
||||||
<pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre>
|
<pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre>
|
||||||
|
@ -1104,10 +1066,8 @@ AdminLTE/
|
||||||
</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
|
<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
|
||||||
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>
|
|
||||||
<!-- ===================================================================== -->
|
<!-- ===================================================================== -->
|
||||||
|
|
||||||
<h3 id="component-box">Box</h3>
|
<h3 id="component-box">Box</h3>
|
||||||
|
@ -1294,8 +1254,7 @@ AdminLTE/
|
||||||
<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
|
<p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
|
||||||
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>
|
||||||
|
@ -1381,8 +1340,7 @@ AdminLTE/
|
||||||
</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
|
<p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
|
||||||
examples:</p>
|
|
||||||
<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">
|
||||||
|
@ -1445,10 +1403,8 @@ AdminLTE/
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Tootips on buttons</h3>
|
<h3 class="box-title">Tootips on buttons</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i
|
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
|
||||||
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>
|
||||||
<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-tools -->
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
|
@ -1520,8 +1476,7 @@ AdminLTE/
|
||||||
</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
|
<p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
|
||||||
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>
|
||||||
<!-- Direct Chat -->
|
<!-- Direct Chat -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -1533,8 +1488,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
||||||
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1547,8 +1501,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1560,8 +1513,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1607,8 +1559,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
|
||||||
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1621,8 +1572,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1634,8 +1584,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1681,8 +1630,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
|
||||||
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1695,8 +1643,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1708,8 +1655,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1755,8 +1701,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
|
<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>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1769,8 +1714,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1782,8 +1726,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1894,8 +1837,7 @@ AdminLTE/
|
||||||
</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.
|
<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>
|
||||||
Here are a couple of examples:</p>
|
|
||||||
|
|
||||||
<!-- Direct Chat With Solid Boxes -->
|
<!-- Direct Chat With Solid Boxes -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -1907,8 +1849,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
||||||
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1921,8 +1862,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1934,8 +1874,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -1981,8 +1920,7 @@ AdminLTE/
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
|
||||||
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
||||||
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts"
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
||||||
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>
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-header -->
|
</div><!-- /.box-header -->
|
||||||
|
@ -1995,8 +1933,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
||||||
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
Is this template really for free? That's unbelievable!
|
Is this template really for free? That's unbelievable!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -2008,8 +1945,7 @@ AdminLTE/
|
||||||
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
||||||
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
||||||
</div><!-- /.direct-chat-info -->
|
</div><!-- /.direct-chat-info -->
|
||||||
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
||||||
<!-- /.direct-chat-img -->
|
|
||||||
<div class="direct-chat-text">
|
<div class="direct-chat-text">
|
||||||
You better believe it!
|
You better believe it!
|
||||||
</div><!-- /.direct-chat-text -->
|
</div><!-- /.direct-chat-text -->
|
||||||
|
@ -2054,8 +1990,7 @@ AdminLTE/
|
||||||
|
|
||||||
<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,
|
<p class="lead">AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.</p>
|
||||||
please visit the provided links.</p>
|
|
||||||
<div class="row bring-up">
|
<div class="row bring-up">
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
|
@ -2082,8 +2017,7 @@ AdminLTE/
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li><h4>Editors</h4></li>
|
<li><h4>Editors</h4></li>
|
||||||
<li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap
|
<li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap WYSIHTML5</a></li>
|
||||||
WYSIHTML5</a></li>
|
|
||||||
<li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
|
<li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /. col -->
|
</div><!-- /. col -->
|
||||||
|
@ -2115,8 +2049,7 @@ AdminLTE/
|
||||||
<li>Chrome (latest)</li>
|
<li>Chrome (latest)</li>
|
||||||
<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
|
<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>
|
||||||
use animations/transitions on IE9.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
@ -2134,25 +2067,19 @@ AdminLTE/
|
||||||
<li>Change the .header div to .main-header <code><div class="main-header"></code></li>
|
<li>Change the .header div to .main-header <code><div class="main-header"></code></li>
|
||||||
<li>Change the .right-side class to .content-wrapper <code><div class="content-wrapper"></code></li>
|
<li>Change the .right-side class to .content-wrapper <code><div class="content-wrapper"></code></li>
|
||||||
<li>Change the .left-side class to .main-sidebar <code><div class="main-sidebar"></code></li>
|
<li>Change the .left-side class to .main-sidebar <code><div class="main-sidebar"></code></li>
|
||||||
<li>In the navbar, change .navbar-right to .navbar-custom-menu <code><div
|
<li>In the navbar, change .navbar-right to .navbar-custom-menu <code><div class="navbar-custom-menu"></code></li>
|
||||||
class="navbar-custom-menu"></code></li>
|
|
||||||
</ol>
|
</ol>
|
||||||
<h3>Navbar Custom Dropdown Menus</h3>
|
<h3>Navbar Custom Dropdown Menus</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text
|
<li>The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text color class such as text-aqua or text-red.</li>
|
||||||
color class such as text-aqua or text-red.
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
<h3>Login, Registration and Lockscreen Pages</h3>
|
<h3>Login, Registration and Lockscreen Pages</h3>
|
||||||
<p>There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code
|
<p>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.</p>
|
||||||
and customize it.</p>
|
|
||||||
<p>And you should be set to go!</p>
|
<p>And you should be set to go!</p>
|
||||||
<h3>Mailbox</h3>
|
<h3>Mailbox</h3>
|
||||||
<p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new
|
<p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
|
||||||
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
|
<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>
|
||||||
removed by the next release.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
@ -2164,31 +2091,19 @@ AdminLTE/
|
||||||
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>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a
|
<li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
|
||||||
href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
|
<li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
|
||||||
<li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a
|
<li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
|
||||||
href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
|
<li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
|
||||||
<li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a
|
<li><a href="https://github.com/jeroennoten/Laravel-AdminLTE" target="_blank">Laravel-AdminLTE</a> by <a href="https://github.com/jeroennoten" target="_blank">Jeroen Noten</a></li>
|
||||||
href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
|
<li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
|
||||||
<li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a
|
<li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a> and <a href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by <a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
|
||||||
href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
|
<li><a href="https://github.com/misterGF/CoPilot" target="_blank">CoPilot (AdminLTE with Vue.js)</a> by<a href="https://github.com/misterGF" target="_blank">Gil Ferreira</a></li>
|
||||||
<li><a href="https://github.com/jeroennoten/Laravel-AdminLTE" target="_blank">Laravel-AdminLTE</a> by <a
|
|
||||||
href="https://github.com/jeroennoten" target="_blank">Jeroen Noten</a></li>
|
|
||||||
<li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a
|
|
||||||
href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
|
|
||||||
<li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails"
|
|
||||||
target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard"
|
|
||||||
target="_blank">Nicolas Besnard</a> and <a
|
|
||||||
href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by
|
|
||||||
<a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
|
|
||||||
<li><a href="https://github.com/misterGF/CoPilot" target="_blank">CoPilot (AdminLTE with Vue.js)</a> by<a
|
|
||||||
href="https://github.com/misterGF" target="_blank">Gil Ferreira</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<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
|
of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://adminlte.io">website</a></p>
|
||||||
href="https://adminlte.io">website</a></p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
@ -2197,21 +2112,14 @@ AdminLTE/
|
||||||
<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
|
<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>
|
||||||
easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do
|
|
||||||
so.</p>
|
|
||||||
|
|
||||||
<h3>Is there an integration guide for PHP frameworks such as Yii or Symfony?</h3>
|
<h3>Is there an integration guide for PHP frameworks such as Yii or Symfony?</h3>
|
||||||
<p class="lead">Short answer, no. However, there are forks and tutorials around the web that provide info on how
|
<p class="lead">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.</p>
|
||||||
to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with
|
|
||||||
jQuery ajax, AngularJS and/or MVC5 ASP .NET.</p>
|
|
||||||
|
|
||||||
<h3>How do I get notified of new AdminLTE versions?</h3>
|
<h3>How do I get notified of new AdminLTE versions?</h3>
|
||||||
<p class="lead">The best option is to subscribe to our mailing list using the <a
|
<p class="lead">The best option is to subscribe to our mailing list using the <a href="https://adminlte.io/#subscribe">subscription form on Almsaeed Studio</a>.
|
||||||
href="https://adminlte.io/#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> or visit <a href="https://adminlte.io">Almsaeed Studio</a> every now and then for updates and announcements.</p>
|
||||||
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="https://adminlte.io">Almsaeed Studio</a> every now and then for
|
|
||||||
updates and announcements.</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
@ -2221,8 +2129,7 @@ AdminLTE/
|
||||||
<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">
|
<p class="lead">
|
||||||
AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT
|
AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
|
||||||
license</a>.
|
|
||||||
This allows you to do pretty much anything you want as long as you include
|
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."
|
the copyright in "all copies or substantial portions of the Software."
|
||||||
Attribution is not required (though very much appreciated).
|
Attribution is not required (though very much appreciated).
|
||||||
|
@ -2235,7 +2142,7 @@ AdminLTE/
|
||||||
|
|
||||||
<footer class="main-footer">
|
<footer class="main-footer">
|
||||||
<div class="pull-right hidden-xs">
|
<div class="pull-right hidden-xs">
|
||||||
<b>Version</b> 2.4.0
|
<b>Version</b> 2.3.12
|
||||||
</div>
|
</div>
|
||||||
<strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
|
<strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
|
||||||
reserved.
|
reserved.
|
||||||
|
@ -2256,7 +2163,6 @@ AdminLTE/
|
||||||
|
|
||||||
<!-- jQuery 3.1.1 -->
|
<!-- jQuery 3.1.1 -->
|
||||||
<script src="../plugins/jQuery/jquery-3.1.1.min.js"></script>
|
<script src="../plugins/jQuery/jquery-3.1.1.min.js"></script>
|
||||||
<!-- Bootstrap 3.3.6 -->
|
|
||||||
<!-- Bootstrap 3.3.7 -->
|
<!-- Bootstrap 3.3.7 -->
|
||||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||||
<!-- FastClick -->
|
<!-- FastClick -->
|
||||||
|
|
Loading…
Reference in New Issue