github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #436 from freezy-sk/doc-skins 

Updated list of skins with skin switch and removed whitespace from end of lines
pull/456/head
Abdullah Almsaeed 2015-05-23 13:12:49 +03:00
parent 68ff51a0c4 1ca9859367
commit 0d5a039b5d
7 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
documentation/build/include/adminlte-options.html
View File

@ -21,7 +21,7 @@
}; };
</script> </script>
&LT;script src='dist/js/app.js' type='text/javascript'>&LT;/script></code></pre> &LT;script src='dist/js/app.js' type='text/javascript'>&LT;/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'>{
//Add slimscroll to navbar menus //Add slimscroll to navbar menus

6
documentation/build/include/components.html
View File

@ -465,7 +465,7 @@
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p> these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
<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">&LT;!-- The Right Sidebar --> <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-dark"> &LT;aside class="control-sidebar control-sidebar-dark">
&LT;!-- Content of the sidebar goes here --> &LT;!-- Content of the sidebar goes here -->
@ -473,8 +473,8 @@
&LT;!-- The sidebar's background --> &LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work--> &LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre> &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
<p class="lead">Light Sidebar Markup</p> <p class="lead">Light Sidebar Markup</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar --> <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-light"> &LT;aside class="control-sidebar control-sidebar-light">
&LT;!-- Content of the sidebar goes here --> &LT;!-- Content of the sidebar goes here -->

6
documentation/build/include/implementations.html
View File

@ -2,14 +2,14 @@
<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>
<ul class=""> <ul class="">
<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 href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
<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> <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>
<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/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/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a></li> <li><a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</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 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>

22
documentation/build/include/layout.html
View File

@ -10,7 +10,7 @@
<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 start from scratch.</p> <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>
</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 on of these classes can be added <p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
@ -27,12 +27,18 @@
<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.
Choose and the skin file that you want then add the appropriate Choose and the skin file that you want then add the appropriate
class to the body tag to change the template's appearance. Here is the list of available skins:</p> class to the body tag to change the template's appearance. Here is the list of available skins:</p>
<ul class="bring-up"> <ul id="layout-skins-list" class="bring-up">
<li><code>skin-blue</code></li> <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow</code></li> <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-purple</code></li> <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green</code></li> <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red</code></li> <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black</code></li> <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
</ul> </ul>
</section> </section>

6
documentation/build/index.html
View File

@ -13,7 +13,7 @@
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style --> <!-- Theme style -->
<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@ -70,7 +70,7 @@
<li><a href='#component-main-header'>Main Header</a></li> <li><a href='#component-main-header'>Main Header</a></li>
<li><a href='#component-sidebar'>Sidebar</a></li> <li><a href='#component-sidebar'>Sidebar</a></li>
<li><a href='#component-control-sidebar'>Control Sidebar</a></li> <li><a href='#component-control-sidebar'>Control Sidebar</a></li>
<li><a href='#component-info-box'>Info Box</a></li> <li><a href='#component-info-box'>Info Box</a></li>
<li><a href='#component-box'>Boxes</a></li> <li><a href='#component-box'>Boxes</a></li>
<li><a href='#component-direct-chat'>Direct Chat</a></li> <li><a href='#component-direct-chat'>Direct Chat</a></li>
</ul> </ul>
@ -181,7 +181,7 @@ include "license.html"
<!-- Bootstrap 3.3.2 JS --> <!-- Bootstrap 3.3.2 JS -->
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- FastClick --> <!-- FastClick -->
<script src='../plugins/fastclick/fastclick.min.js'></script> <script src='../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="../dist/js/app.min.js" type="text/javascript"></script> <script src="../dist/js/app.min.js" type="text/javascript"></script>
<!-- SlimScroll 1.3.0 --> <!-- SlimScroll 1.3.0 -->

6
documentation/docs.js
View File

@ -51,4 +51,10 @@ $(function () {
}, 500); }, 500);
} }
}); });
//Skin switcher
$('#layout-skins-list a').click(function(e) {
e.preventDefault();
var skinName = $(this).siblings('code').text();
$('body').attr('class', skinName + ' fixed');
});
}); });

42
documentation/index.html
View File

@ -13,7 +13,7 @@
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style --> <!-- Theme style -->
<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" /> <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@ -70,7 +70,7 @@
<li><a href='#component-main-header'>Main Header</a></li> <li><a href='#component-main-header'>Main Header</a></li>
<li><a href='#component-sidebar'>Sidebar</a></li> <li><a href='#component-sidebar'>Sidebar</a></li>
<li><a href='#component-control-sidebar'>Control Sidebar</a></li> <li><a href='#component-control-sidebar'>Control Sidebar</a></li>
<li><a href='#component-info-box'>Info Box</a></li> <li><a href='#component-info-box'>Info Box</a></li>
<li><a href='#component-box'>Boxes</a></li> <li><a href='#component-box'>Boxes</a></li>
<li><a href='#component-direct-chat'>Direct Chat</a></li> <li><a href='#component-direct-chat'>Direct Chat</a></li>
</ul> </ul>
@ -217,7 +217,7 @@ AdminLTE/
<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 start from scratch.</p> <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>
</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 on of these classes can be added <p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
@ -234,13 +234,19 @@ AdminLTE/
<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.
Choose and the skin file that you want then add the appropriate Choose and the skin file that you want then add the appropriate
class to the body tag to change the template's appearance. Here is the list of available skins:</p> class to the body tag to change the template's appearance. Here is the list of available skins:</p>
<ul class="bring-up"> <ul id="layout-skins-list" class="bring-up">
<li><code>skin-blue</code></li> <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow</code></li> <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-purple</code></li> <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green</code></li> <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red</code></li> <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black</code></li> <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
</ul> </ul>
</section> </section>
@ -269,7 +275,7 @@ AdminLTE/
}; };
&LT;/script> &LT;/script>
&LT;script src='dist/js/app.js' type='text/javascript'>&LT;/script></code></pre> &LT;script src='dist/js/app.js' type='text/javascript'>&LT;/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'>{
//Add slimscroll to navbar menus //Add slimscroll to navbar menus
@ -835,7 +841,7 @@ AdminLTE/
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p> these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
<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">&LT;!-- The Right Sidebar --> <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-dark"> &LT;aside class="control-sidebar control-sidebar-dark">
&LT;!-- Content of the sidebar goes here --> &LT;!-- Content of the sidebar goes here -->
@ -843,8 +849,8 @@ AdminLTE/
&LT;!-- The sidebar's background --> &LT;!-- The sidebar's background -->
&LT;!-- This div must placed right after the sidebar for it to work--> &LT;!-- This div must placed right after the sidebar for it to work-->
&LT;div class="control-sidebar-bg">&LT;/div></code></pre> &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
<p class="lead">Light Sidebar Markup</p> <p class="lead">Light Sidebar Markup</p>
<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar --> <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
&LT;aside class="control-sidebar control-sidebar-light"> &LT;aside class="control-sidebar control-sidebar-light">
&LT;!-- Content of the sidebar goes here --> &LT;!-- Content of the sidebar goes here -->
@ -2014,14 +2020,14 @@ AdminLTE/
<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>
<ul class=""> <ul class="">
<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 href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
<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> <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>
<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/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/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a></li> <li><a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</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 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>
@ -2121,7 +2127,7 @@ AdminLTE/
<!-- Bootstrap 3.3.2 JS --> <!-- Bootstrap 3.3.2 JS -->
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- FastClick --> <!-- FastClick -->
<script src='../plugins/fastclick/fastclick.min.js'></script> <script src='../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="../dist/js/app.min.js" type="text/javascript"></script> <script src="../dist/js/app.min.js" type="text/javascript"></script>
<!-- SlimScroll 1.3.0 --> <!-- SlimScroll 1.3.0 -->