Theme Inspinia
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <div class="theme-config">
  2. <div class="theme-config-box">
  3. <div class="spin-icon">
  4. <i class="fa fa-cogs fa-spin"></i>
  5. </div>
  6. <div class="skin-setttings">
  7. <div class="title">Configuration</div>
  8. <div class="setings-item">
  9. <span>
  10. Collapse menu
  11. </span>
  12. <div class="switch">
  13. <div class="onoffswitch">
  14. <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
  15. <label class="onoffswitch-label" for="collapsemenu">
  16. <span class="onoffswitch-inner"></span>
  17. <span class="onoffswitch-switch"></span>
  18. </label>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="setings-item">
  23. <span>
  24. Fixed sidebar
  25. </span>
  26. <div class="switch">
  27. <div class="onoffswitch">
  28. <input type="checkbox" name="fixedsidebar" class="onoffswitch-checkbox" id="fixedsidebar">
  29. <label class="onoffswitch-label" for="fixedsidebar">
  30. <span class="onoffswitch-inner"></span>
  31. <span class="onoffswitch-switch"></span>
  32. </label>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="setings-item">
  37. <span>
  38. Top navbar
  39. </span>
  40. <div class="switch">
  41. <div class="onoffswitch">
  42. <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
  43. <label class="onoffswitch-label" for="fixednavbar">
  44. <span class="onoffswitch-inner"></span>
  45. <span class="onoffswitch-switch"></span>
  46. </label>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="setings-item">
  51. <span>
  52. Top navbar v.2
  53. <br/>
  54. <small>*Primary layout</small>
  55. </span>
  56. <div class="switch">
  57. <div class="onoffswitch">
  58. <input type="checkbox" name="fixednavbar2" class="onoffswitch-checkbox" id="fixednavbar2">
  59. <label class="onoffswitch-label" for="fixednavbar2">
  60. <span class="onoffswitch-inner"></span>
  61. <span class="onoffswitch-switch"></span>
  62. </label>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="setings-item">
  67. <span>
  68. Boxed layout
  69. </span>
  70. <div class="switch">
  71. <div class="onoffswitch">
  72. <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
  73. <label class="onoffswitch-label" for="boxedlayout">
  74. <span class="onoffswitch-inner"></span>
  75. <span class="onoffswitch-switch"></span>
  76. </label>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="setings-item">
  81. <span>
  82. Fixed footer
  83. </span>
  84. <div class="switch">
  85. <div class="onoffswitch">
  86. <input type="checkbox" name="fixedfooter" class="onoffswitch-checkbox" id="fixedfooter">
  87. <label class="onoffswitch-label" for="fixedfooter">
  88. <span class="onoffswitch-inner"></span>
  89. <span class="onoffswitch-switch"></span>
  90. </label>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="title">Skins</div>
  95. <div class="setings-item default-skin">
  96. <span class="skin-name ">
  97. <a href="#" class="s-skin-0">
  98. Default
  99. </a>
  100. </span>
  101. </div>
  102. <div class="setings-item blue-skin">
  103. <span class="skin-name ">
  104. <a href="#" class="s-skin-1">
  105. Blue light
  106. </a>
  107. </span>
  108. </div>
  109. <div class="setings-item yellow-skin">
  110. <span class="skin-name ">
  111. <a href="#" class="s-skin-3">
  112. Yellow/Purple
  113. </a>
  114. </span>
  115. </div>
  116. <div class="setings-item ultra-skin">
  117. <span class="skin-name ">
  118. <a href="md-skin.html" class="md-skin">
  119. Material Design
  120. </a>
  121. </span>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <script>
  127. // Config box
  128. // Enable/disable fixed top navbar
  129. $('#fixednavbar').click(function (){
  130. if ($('#fixednavbar').is(':checked')){
  131. $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
  132. $("body").removeClass('boxed-layout');
  133. $("body").addClass('fixed-nav');
  134. $('#boxedlayout').prop('checked', false);
  135. if (localStorageSupport){
  136. localStorage.setItem("boxedlayout",'off');
  137. }
  138. if (localStorageSupport){
  139. localStorage.setItem("fixednavbar",'on');
  140. }
  141. } else{
  142. $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
  143. $("body").removeClass('fixed-nav');
  144. $("body").removeClass('fixed-nav-basic');
  145. $('#fixednavbar2').prop('checked', false);
  146. if (localStorageSupport){
  147. localStorage.setItem("fixednavbar",'off');
  148. }
  149. if (localStorageSupport){
  150. localStorage.setItem("fixednavbar2",'off');
  151. }
  152. }
  153. });
  154. // Enable/disable fixed top navbar
  155. $('#fixednavbar2').click(function (){
  156. if ($('#fixednavbar2').is(':checked')){
  157. $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
  158. $("body").removeClass('boxed-layout');
  159. $("body").addClass('fixed-nav').addClass('fixed-nav-basic');
  160. $('#boxedlayout').prop('checked', false);
  161. if (localStorageSupport){
  162. localStorage.setItem("boxedlayout",'off');
  163. }
  164. if (localStorageSupport){
  165. localStorage.setItem("fixednavbar2",'on');
  166. }
  167. } else {
  168. $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
  169. $("body").removeClass('fixed-nav').removeClass('fixed-nav-basic');
  170. $('#fixednavbar').prop('checked', false);
  171. if (localStorageSupport){
  172. localStorage.setItem("fixednavbar2",'off');
  173. }
  174. if (localStorageSupport){
  175. localStorage.setItem("fixednavbar",'off');
  176. }
  177. }
  178. });
  179. // Enable/disable fixed sidebar
  180. $('#fixedsidebar').click(function (){
  181. if ($('#fixedsidebar').is(':checked')){
  182. $("body").addClass('fixed-sidebar');
  183. $('.sidebar-collapse').slimScroll({
  184. height: '100%',
  185. railOpacity: 0.9
  186. });
  187. if (localStorageSupport){
  188. localStorage.setItem("fixedsidebar",'on');
  189. }
  190. } else{
  191. $('.sidebar-collapse').slimscroll({destroy: true});
  192. $('.sidebar-collapse').attr('style', '');
  193. $("body").removeClass('fixed-sidebar');
  194. if (localStorageSupport){
  195. localStorage.setItem("fixedsidebar",'off');
  196. }
  197. }
  198. });
  199. // Enable/disable collapse menu
  200. $('#collapsemenu').click(function (){
  201. if ($('#collapsemenu').is(':checked')){
  202. $("body").addClass('mini-navbar');
  203. SmoothlyMenu();
  204. if (localStorageSupport){
  205. localStorage.setItem("collapse_menu",'on');
  206. }
  207. } else{
  208. $("body").removeClass('mini-navbar');
  209. SmoothlyMenu();
  210. if (localStorageSupport){
  211. localStorage.setItem("collapse_menu",'off');
  212. }
  213. }
  214. });
  215. // Enable/disable boxed layout
  216. $('#boxedlayout').click(function (){
  217. if ($('#boxedlayout').is(':checked')){
  218. $("body").addClass('boxed-layout');
  219. $('#fixednavbar').prop('checked', false);
  220. $('#fixednavbar2').prop('checked', false);
  221. $(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
  222. $("body").removeClass('fixed-nav');
  223. $("body").removeClass('fixed-nav-basic');
  224. $(".footer").removeClass('fixed');
  225. $('#fixedfooter').prop('checked', false);
  226. if (localStorageSupport){
  227. localStorage.setItem("fixednavbar",'off');
  228. }
  229. if (localStorageSupport){
  230. localStorage.setItem("fixednavbar2",'off');
  231. }
  232. if (localStorageSupport){
  233. localStorage.setItem("fixedfooter",'off');
  234. }
  235. if (localStorageSupport){
  236. localStorage.setItem("boxedlayout",'on');
  237. }
  238. } else{
  239. $("body").removeClass('boxed-layout');
  240. if (localStorageSupport){
  241. localStorage.setItem("boxedlayout",'off');
  242. }
  243. }
  244. });
  245. // Enable/disable fixed footer
  246. $('#fixedfooter').click(function (){
  247. if ($('#fixedfooter').is(':checked')){
  248. $('#boxedlayout').prop('checked', false);
  249. $("body").removeClass('boxed-layout');
  250. $(".footer").addClass('fixed');
  251. if (localStorageSupport){
  252. localStorage.setItem("boxedlayout",'off');
  253. }
  254. if (localStorageSupport){
  255. localStorage.setItem("fixedfooter",'on');
  256. }
  257. } else{
  258. $(".footer").removeClass('fixed');
  259. if (localStorageSupport){
  260. localStorage.setItem("fixedfooter",'off');
  261. }
  262. }
  263. });
  264. // SKIN Select
  265. $('.spin-icon').click(function (){
  266. $(".theme-config-box").toggleClass("show");
  267. });
  268. // Default skin
  269. $('.s-skin-0').click(function (){
  270. $("body").removeClass("skin-1");
  271. $("body").removeClass("skin-2");
  272. $("body").removeClass("skin-3");
  273. });
  274. // Blue skin
  275. $('.s-skin-1').click(function (){
  276. $("body").removeClass("skin-2");
  277. $("body").removeClass("skin-3");
  278. $("body").addClass("skin-1");
  279. });
  280. // Inspinia ultra skin
  281. $('.s-skin-2').click(function (){
  282. $("body").removeClass("skin-1");
  283. $("body").removeClass("skin-3");
  284. $("body").addClass("skin-2");
  285. });
  286. // Yellow skin
  287. $('.s-skin-3').click(function (){
  288. $("body").removeClass("skin-1");
  289. $("body").removeClass("skin-2");
  290. $("body").addClass("skin-3");
  291. });
  292. if (localStorageSupport){
  293. var collapse = localStorage.getItem("collapse_menu");
  294. var fixedsidebar = localStorage.getItem("fixedsidebar");
  295. var fixednavbar = localStorage.getItem("fixednavbar");
  296. var fixednavbar2 = localStorage.getItem("fixednavbar2");
  297. var boxedlayout = localStorage.getItem("boxedlayout");
  298. var fixedfooter = localStorage.getItem("fixedfooter");
  299. if (collapse == 'on'){
  300. $('#collapsemenu').prop('checked','checked')
  301. }
  302. if (fixedsidebar == 'on'){
  303. $('#fixedsidebar').prop('checked','checked')
  304. }
  305. if (fixednavbar == 'on'){
  306. $('#fixednavbar').prop('checked','checked')
  307. }
  308. if (fixednavbar2 == 'on'){
  309. $('#fixednavbar2').prop('checked','checked')
  310. }
  311. if (boxedlayout == 'on'){
  312. $('#boxedlayout').prop('checked','checked')
  313. }
  314. if (fixedfooter == 'on') {
  315. $('#fixedfooter').prop('checked','checked')
  316. }
  317. }
  318. </script>