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

Updated skin list style in documentation

pull/456/head
Abdullah Almsaeed 2015-05-23 13:40:30 +03:00
parent 0d5a039b5d
commit ec8fa4a9e4
4 changed files with 133 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,18 +27,66 @@
<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
class to the body tag to change the template's appearance. Here is the list of available skins:</p>
<ul id="layout-skins-list" class="bring-up">
<li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></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>
<div class="box box-solid" style="max-width: 300px;">
<div class="box-body no-padding">
<table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
<thead>
<tr>
<th style="width: 210px;">Skin Class</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>skin-blue</code></td>
<td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-yellow-light</code></td>
<td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-green</code></td>
<td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-green-light</code></td>
<td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-purple</code></td>
<td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-red</code></td>
<td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-black</code></td>
<td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</section>

9
documentation/docs.js
View File

@ -52,9 +52,12 @@ $(function () {
}
});
//Skin switcher
$('#layout-skins-list a').click(function(e) {
var current_skin = "skin-blue";
$('#layout-skins-list [data-skin]').click(function(e) {
e.preventDefault();
var skinName = $(this).siblings('code').text();
$('body').attr('class', skinName + ' fixed');
var skinName = $(this).data('skin');
$('body').removeClass(current_skin);
$('body').addClass(skinName);
current_skin = skinName;
});
});

76
documentation/index.html
View File

@ -234,20 +234,68 @@ AdminLTE/
<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
class to the body tag to change the template's appearance. Here is the list of available skins:</p>
<ul id="layout-skins-list" class="bring-up">
<li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
<li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></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>
<div class="box box-solid" style="max-width: 300px;">
<div class="box-body no-padding">
<table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
<thead>
<tr>
<th style="width: 210px;">Skin Class</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>skin-blue</code></td>
<td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-yellow-light</code></td>
<td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-green</code></td>
<td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-green-light</code></td>
<td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-purple</code></td>
<td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-red</code></td>
<td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td><code>skin-black</code></td>
<td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</section>
<!-- ============================================================= -->

3
documentation/style.css
View File

@ -11,6 +11,9 @@
position: relative;
z-index: 30;
}
.nth-2-center > tbody > tr > td:last-of-type {
text-align: center!important;
}
.content {
font-size: 16px;
z-index: 500;