Hello colleagues I would like to change the skin of the AdminLTE Template through a menu, by that I mean that I create a menu where the different skins that it brings appear and when they change without changing the CSS class, modifying it every time since: This is for the light black color
Here's the call to the css:
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<?php echo base_url();?>assets/template/dist/css/skins/_all-skins.min.css">
<body class="hold-transition skin-black-light sidebar-mini">
the menu would be in the header with something like this:
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
<li>Azul</li>
<li>Negro</li>
</li>
</li>
Add this and add the jQuery that was recommended to me, will the html be ok?
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gears"></i>
<span class="label label-success">3</span>
</a>
<ul class="dropdown-menu">
<li class="header">Seleccionar Tema</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="fa fa-circle">
<ul id="azul">Azul</ul>
</div>
</li>
<!-- end message -->
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<ul id="negro">Black</ul>
</div>
</li>
</ul>
</li>
<li class="footer"><a href="#">Proximamente mas temas...</a></li>
</ul>
</li>
This is the body where the css class of the skins is:
<body class="hold-transition skin-black sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="<?php echo base_url(); ?>" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>Q</b>C</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>QC</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gears"></i>
<span class="label label-success">3</span>
</a>
<ul class="dropdown-menu">
<li class="header">Seleccionar Tema</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="fa fa-circle" >
<ul id="azul">Azul</ul>
</div>
</li>
<!-- end message -->
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<ul id="black">Negro</ul>
</div>
</li>
</ul>
</li>
<li class="footer"><a href="#">Proximamente mas temas...</a></li>
</ul>
</li>
Here the JQuery
$('.azul').click(function(){
$('.body').removeClass('skin-black').addClass('skin-blue');});
$('.black').click(function(){$('.body').removeClass('skin-blue').addClass('skin-black');});