Theme setting

Developer
Tushar Bandal
Size
4,286 Kb
Views
12,144
  1. Theme setting Previews
  2. Theme setting HTML Codes
  3. Theme setting CSS Codes
  4. Theme setting JS Codes

How do I make an theme setting?

Open the side bar at the left side, In which you can find option to set colors and font.. What is a theme setting? How do you make a theme setting? This script and codes were developed by Tushar Bandal on 19 December 2022, Monday.

Theme setting Previews
IQ Test

Theme setting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Theme setting</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.eyecon.ro/colorpicker/js/colorpicker.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="http://www.eyecon.ro/colorpicker/css/colorpicker.css" rel="stylesheet">
<div class="viewEidtorOuter"> <div class="viewEidtor"> <div class="viewEidtorInner"> <a href="#" class="iconCnt pull-right" id="settingBtn"><i class="fa fa-arrow-circle-left"></i></a> <!--<a href="#" class="iconCnt pull-right" id="settingBtn"><i class="fa fa-times"></i></a>--> <ul> <li class=" settingHead" ><a href="#"><span class="pull-left" >Theme Settings</span></a></li> <li class="animated"><a href="#" id="headerColor" ><span class="pul-left" >Header Color</span><span class="pull-right colorPiker" ><span class="colorSpan" style="background-color: #FAFAFA"></span></span> </a></li> <li class="animated"><a href="#" id="headerFontColor" ><span class="pul-left" >Header Font Color</span><span class="pull-right colorPiker"><span class="colorSpan" style="background-color: #777777"></span></span> </a></li> <li class="animated"><a href="#" id="backgroundColor"><span class="pul-left" >Background Color</span><span class="pull-right colorPiker" ><span class="colorSpan" style="background-color: #fff"></span></span> </a></li> <li class="animated"> <a href="#" id="fontDropDown" ><span class="pull-left" >Select Font</span><span class="pull-right iconCnt" ><i class="fa fa-arrow-circle-down"></i></span></a> <div class="dropDownStyle hide" id="selectFont" > <ul> <li><a href="#" class="georgia">georgia</a></li> <li><a href="#" class="impact">impact</a></li> <li><a href="#" class="Comic-Sans-MS">Comic Sans MS</a></li> <li><a href="#" class="Times-New-Roman">Times New Roman</a></li> </ul> </div> </li> </ul> </div> </div>
</div>
<div id="setFont">
<div class="pageOuter"> <div class="header"> <div class="navbar" > <div class="navbar-innerStyle"> <div class="container headTopSpace"> <ul class="nav pull-left"> <li><a href="#">Electronics</a></li> <li><a href="#">Men</a></li> <li><a href="#">Women</a></li> <li><a href="#">Baby &amp; Kids</a></li> <li><a href="#">Books &amp; Media</a></li> <li><a href="#">Home &amp; Kitchen</a></li> <li><a href="#">More Stores</a></li> </ul> <form class="form-search pull-right"> <input type="text" class="input-medium search-query"><button type="submit" class="btn btn btn-primary"><i class="fa fa-search"></i></button> </form> </div> </div> </div> </div> <div class="container gridCnt"> <div class="row"> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> <div class="span4"> <a href="#" class="innerBlock"> <span class="imgBox"> <img src="http://img6a.flixcart.com/image/mobile/m/t/n/motorola-moto-x-400x400-imadu82xgcr8abck.jpeg" alt=""> </span> <span class="clearfix detailsInfo"> <span class="prodName pull-left" >Moto X</span> <span class="prodPrice pull-right" >23999.00 &#8377;</span> </span> </a> </div> </div> </div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Theme setting - Script Codes CSS Codes

.header input[type="text"] { height: auto; } .header .headTopSpace { padding: 5px 0; } .header form { margin-bottom: 0; padding-top: 6px } .header .navbar .btn { margin: 0; } .imgBox { text-align: center; padding: 20px 0; display: block; } .imgBox img { max-height: 260px; } .innerBlock { border: 2px solid #fff; background: #fff; display: block; } .innerBlock:hover { border-color: #f1f49e; } .detailsInfo { padding: 0 15px; background: #f4f4d4; line-height: 40px; display: block; } .gridCnt .span4 { margin-bottom: 20px; } .prodName { font-size: 17.5px } .prodPrice { font-size: 24.5px } a:focus { outline: none; text-decoration: none; } a:hover { text-decoration: none; } .viewEidtorOuter { position: relative; z-index: 1031; } .viewEidtor { position: fixed; left: 0; top: 0; bottom: 0; background: #f4f4f4; width: 50px; z-index: 10; transition: all 0.5s; overflow: hidden; } .viewEidtor:hover { background: #F1F49E } .viewEidtor.openSetting:hover { background: #f4f4f4; } .viewEidtor ul { margin: 0; list-style: none; font-size: 17px; } .viewEidtor li { line-height: 50px; border-bottom: 1px solid #ccc } .viewEidtor li > a { padding: 0 15px 0 10px; display: block; } .viewEidtor li > a:after { content: " "; clear: both; display: block; } .colorPiker { height: 24px; position: relative; width: 24px; display: block; top: 13px; background: #999; } .colorPiker span { height: 22px; left: 1px; position: absolute; top: 1px; width: 22px; display: block; } .colorpicker { z-index: 1032 } .navbar-innerStyle { background: #FAFAFA; border-bottom: 1px solid #ccc; padding: 0 50px } .colorpicker input { width: auto; } .form-search .btn { font-size: 20px; border-radius: 0 15px 15px 0; padding: 4px 12px 4px 9px; } .form-search input[type="text"] { border-radius: 15px 0 0 15px; } .georgia { font-family: georgia, arial; } .impact { font-family: impact, arial; } .Comic-Sans-MS { font-family: 'Comic Sans MS'; } .Times-New-Roman { font-family: 'times new roman'; } .iconCnt { color: #999999; font-size: 28px; } .dropDownStyle { background: #fff; } .dropDownStyle li { border-bottom: none; border-top: 1px solid #ccc; padding-left: 15px; } .settingHead { background: #ccc; font-size: 20px; height: 50px; } .settingHead a { color: #444; } .settingHead a .fa { color: #444; } #settingBtn { margin: 0; padding: 11px 15px 5px 5px; position: absolute; right: 0; top: 0; z-index: 1033 } .openSetting { width: 300px; } .viewEidtor ul { left: -1000%; position: relative; width: 300px; } .openSetting ul { left: 0; } .animated { position: relative; left: -100%; } .openSetting .animated { transition: all 0.5s; left: 0; } .openSetting .animated:nth-child(1) { transition-delay: 0.2s } .openSetting .animated:nth-child(2) { transition-delay: 0.4s } .openSetting .animated:nth-child(3) { transition-delay: 0.6s } .openSetting .animated:nth-child(4) { transition-delay: 0.8s } .openSetting .animated:nth-child(5) { transition-delay: 1.0s } .viewEidtorInner { position: relative; } .pageOuter { margin-left: 0; transition: all 0.5s; min-width: 1100px } .editorActive .pageOuter { margin-left: 300px; }
.colorpicker {	background: url(http://www.eyecon.ro/colorpicker/images/colorpicker_background.png);
}
.colorpicker input { line-height: 11px;
}

Theme setting - Script Codes JS Codes

 $(document).ready(function(){ $('#fontDropDown').click(function(){ $('#fontDropDown .fa').toggleClass('fa-arrow-circle-down'); $('#fontDropDown .fa').toggleClass('fa-arrow-circle-left'); $(this).next('.dropDownStyle').slideToggle(); }); $('#selectFont a').click(function(){ var selectFont = $(this).attr('class'); $('#setFont').removeClass(); $('#setFont').addClass(selectFont); }); $('.viewEidtor').click(function(){ $(this).addClass('openSetting'); $('body').addClass('editorActive'); $('#settingBtn .fa').removeClass('fa-arrow-circle-left').addClass('fa-times'); }); $('#settingBtn').click(function(e){ if($('.viewEidtor').hasClass('openSetting')){ $('body').removeClass('editorActive'); $('.viewEidtor').removeClass('openSetting'); $('#settingBtn .fa').removeClass('fa-times').addClass('fa-arrow-circle-left'); return false; } }); $('#headerColor').ColorPicker({ color: '#FAFAFA', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#headerColor .colorSpan, .navbar-innerStyle').css('backgroundColor', '#' + hex); } }); $('#headerFontColor').ColorPicker({ color: '#777777', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('.navbar a').css('color', '#' + hex); $('#headerFontColor .colorSpan').css('backgroundColor', '#' + hex); } }); $('#backgroundColor').ColorPicker({ color: '#fff', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#backgroundColor .colorSpan, body').css('backgroundColor', '#' + hex); } }); });
Theme setting - Script Codes
Theme setting - Script Codes
Home Page Home
Developer Tushar Bandal
Username tusharbandal
Uploaded December 19, 2022
Rating 3
Size 4,286 Kb
Views 12,144
Do you need developer help for Theme setting?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Bandal (tusharbandal) Script Codes
Name
Custom Select Box
Drag and drop
CSS3 Animation
Angular Accordion
Tic Tac Toe game
Accordian
A Pen by tushar bandal
Simple Angular Tabs
CSS3 Form
Nav to scroll sections
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!