123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- <div class="theme-config">
- <div class="theme-config-box">
- <div class="spin-icon">
- <i class="fa fa-cogs fa-spin"></i>
- </div>
- <div class="skin-setttings">
- <div class="title">Configuration</div>
- <div class="setings-item">
- <span>
- Collapse menu
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
- <label class="onoffswitch-label" for="collapsemenu">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="setings-item">
- <span>
- Fixed sidebar
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="fixedsidebar" class="onoffswitch-checkbox" id="fixedsidebar">
- <label class="onoffswitch-label" for="fixedsidebar">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="setings-item">
- <span>
- Top navbar
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
- <label class="onoffswitch-label" for="fixednavbar">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="setings-item">
- <span>
- Top navbar v.2
- <br/>
- <small>*Primary layout</small>
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="fixednavbar2" class="onoffswitch-checkbox" id="fixednavbar2">
- <label class="onoffswitch-label" for="fixednavbar2">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="setings-item">
- <span>
- Boxed layout
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
- <label class="onoffswitch-label" for="boxedlayout">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="setings-item">
- <span>
- Fixed footer
- </span>
-
- <div class="switch">
- <div class="onoffswitch">
- <input type="checkbox" name="fixedfooter" class="onoffswitch-checkbox" id="fixedfooter">
- <label class="onoffswitch-label" for="fixedfooter">
- <span class="onoffswitch-inner"></span>
- <span class="onoffswitch-switch"></span>
- </label>
- </div>
- </div>
- </div>
-
- <div class="title">Skins</div>
- <div class="setings-item default-skin">
- <span class="skin-name ">
- <a href="#" class="s-skin-0">
- Default
- </a>
- </span>
- </div>
- <div class="setings-item blue-skin">
- <span class="skin-name ">
- <a href="#" class="s-skin-1">
- Blue light
- </a>
- </span>
- </div>
- <div class="setings-item yellow-skin">
- <span class="skin-name ">
- <a href="#" class="s-skin-3">
- Yellow/Purple
- </a>
- </span>
- </div>
- <div class="setings-item ultra-skin">
- <span class="skin-name ">
- <a href="md-skin.html" class="md-skin">
- Material Design
- </a>
- </span>
- </div>
- </div>
- </div>
- </div>
- <script>
- // Config box
-
- // Enable/disable fixed top navbar
- $('#fixednavbar').click(function (){
- if ($('#fixednavbar').is(':checked')){
- $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
- $("body").removeClass('boxed-layout');
- $("body").addClass('fixed-nav');
- $('#boxedlayout').prop('checked', false);
-
- if (localStorageSupport){
- localStorage.setItem("boxedlayout",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar",'on');
- }
- } else{
- $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
- $("body").removeClass('fixed-nav');
- $("body").removeClass('fixed-nav-basic');
- $('#fixednavbar2').prop('checked', false);
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar2",'off');
- }
- }
- });
-
- // Enable/disable fixed top navbar
- $('#fixednavbar2').click(function (){
- if ($('#fixednavbar2').is(':checked')){
- $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
- $("body").removeClass('boxed-layout');
- $("body").addClass('fixed-nav').addClass('fixed-nav-basic');
- $('#boxedlayout').prop('checked', false);
-
- if (localStorageSupport){
- localStorage.setItem("boxedlayout",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar2",'on');
- }
- } else {
- $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
- $("body").removeClass('fixed-nav').removeClass('fixed-nav-basic');
- $('#fixednavbar').prop('checked', false);
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar2",'off');
- }
- if (localStorageSupport){
- localStorage.setItem("fixednavbar",'off');
- }
- }
- });
-
- // Enable/disable fixed sidebar
- $('#fixedsidebar').click(function (){
- if ($('#fixedsidebar').is(':checked')){
- $("body").addClass('fixed-sidebar');
- $('.sidebar-collapse').slimScroll({
- height: '100%',
- railOpacity: 0.9
- });
-
- if (localStorageSupport){
- localStorage.setItem("fixedsidebar",'on');
- }
- } else{
- $('.sidebar-collapse').slimscroll({destroy: true});
- $('.sidebar-collapse').attr('style', '');
- $("body").removeClass('fixed-sidebar');
-
- if (localStorageSupport){
- localStorage.setItem("fixedsidebar",'off');
- }
- }
- });
-
- // Enable/disable collapse menu
- $('#collapsemenu').click(function (){
- if ($('#collapsemenu').is(':checked')){
- $("body").addClass('mini-navbar');
- SmoothlyMenu();
-
- if (localStorageSupport){
- localStorage.setItem("collapse_menu",'on');
- }
-
- } else{
- $("body").removeClass('mini-navbar');
- SmoothlyMenu();
-
- if (localStorageSupport){
- localStorage.setItem("collapse_menu",'off');
- }
- }
- });
-
- // Enable/disable boxed layout
- $('#boxedlayout').click(function (){
- if ($('#boxedlayout').is(':checked')){
- $("body").addClass('boxed-layout');
- $('#fixednavbar').prop('checked', false);
- $('#fixednavbar2').prop('checked', false);
- $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
- $("body").removeClass('fixed-nav');
- $("body").removeClass('fixed-nav-basic');
- $(".footer").removeClass('fixed');
- $('#fixedfooter').prop('checked', false);
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixednavbar2",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixedfooter",'off');
- }
-
-
- if (localStorageSupport){
- localStorage.setItem("boxedlayout",'on');
- }
- } else{
- $("body").removeClass('boxed-layout');
-
- if (localStorageSupport){
- localStorage.setItem("boxedlayout",'off');
- }
- }
- });
-
- // Enable/disable fixed footer
- $('#fixedfooter').click(function (){
- if ($('#fixedfooter').is(':checked')){
- $('#boxedlayout').prop('checked', false);
- $("body").removeClass('boxed-layout');
- $(".footer").addClass('fixed');
-
- if (localStorageSupport){
- localStorage.setItem("boxedlayout",'off');
- }
-
- if (localStorageSupport){
- localStorage.setItem("fixedfooter",'on');
- }
- } else{
- $(".footer").removeClass('fixed');
-
- if (localStorageSupport){
- localStorage.setItem("fixedfooter",'off');
- }
- }
- });
-
- // SKIN Select
- $('.spin-icon').click(function (){
- $(".theme-config-box").toggleClass("show");
- });
-
- // Default skin
- $('.s-skin-0').click(function (){
- $("body").removeClass("skin-1");
- $("body").removeClass("skin-2");
- $("body").removeClass("skin-3");
- });
-
- // Blue skin
- $('.s-skin-1').click(function (){
- $("body").removeClass("skin-2");
- $("body").removeClass("skin-3");
- $("body").addClass("skin-1");
- });
-
- // Inspinia ultra skin
- $('.s-skin-2').click(function (){
- $("body").removeClass("skin-1");
- $("body").removeClass("skin-3");
- $("body").addClass("skin-2");
- });
-
- // Yellow skin
- $('.s-skin-3').click(function (){
- $("body").removeClass("skin-1");
- $("body").removeClass("skin-2");
- $("body").addClass("skin-3");
- });
-
- if (localStorageSupport){
- var collapse = localStorage.getItem("collapse_menu");
- var fixedsidebar = localStorage.getItem("fixedsidebar");
- var fixednavbar = localStorage.getItem("fixednavbar");
- var fixednavbar2 = localStorage.getItem("fixednavbar2");
- var boxedlayout = localStorage.getItem("boxedlayout");
- var fixedfooter = localStorage.getItem("fixedfooter");
-
- if (collapse == 'on'){
- $('#collapsemenu').prop('checked','checked')
- }
- if (fixedsidebar == 'on'){
- $('#fixedsidebar').prop('checked','checked')
- }
- if (fixednavbar == 'on'){
- $('#fixednavbar').prop('checked','checked')
- }
- if (fixednavbar2 == 'on'){
- $('#fixednavbar2').prop('checked','checked')
- }
- if (boxedlayout == 'on'){
- $('#boxedlayout').prop('checked','checked')
- }
- if (fixedfooter == 'on') {
- $('#fixedfooter').prop('checked','checked')
- }
- }
- </script>
|