提交 ec8fa4a9 编写于 作者: A Abdullah Almsaeed

Updated skin list style in documentation

上级 0d5a039b
......@@ -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>
\ No newline at end of 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;
});
});
\ No newline at end of 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>
<!-- ============================================================= -->
......
......@@ -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;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册