Style Switcher with Color Picker

[Mladjo]

Situacija je sledeca. Imam wordpress temu koju hocu da prodajem. jedna od opcija u theme options panelu je da korisnici mogu da izaberu glavnu boju sajta pomocu ove skripte http://jscolor.com. kada kliknu na save ta opcija je sacuvana u databazi i onda je pozivam u style.php. To sve fino funkcinose medjutim ja zelim da na live preview dam mogucnost posetiocima da probaju to na frond end-u ali naravno da ne upisuju to u databazu. Uglavnom napisao sam sledeci jednostavni kod za to:

<style type="text/css">
<!--
<?php
if(isset($_POST['submit'])) 
{ 
    $bgColor = $_POST['bgColor']; ?>
    a:hover, #logo h1 a, .nav li.current_page_item a, .nav .current-cat a, .nav ul.sf-js-enabled li ul li a:hover, .nav ul.sf-js-enabled li ul li.sfHover a, .nav ul.sf-js-enabled li ul li.sfHover ul li a:hover, .post h2.posttitle a:hover, .post h3.posttitle a:hover, .widget h3 a {
    color:#<?php echo $bgColor;?>;
}
#logo, .ribbon, #numbers a, .ribbon a, .meta span.auth, .gallery .ribbon a, .gallery .smallribbon a {
    background: #<?php echo $bgColor;?>;
}
<?php }?> 
 -->
</style>
<form id="csinput" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  <input class="color" name="bgColor"  onchange="updateBackground(this.color.toString())" value="<?php echo $bgColor;?>" />

   <input type="submit" id="csbutton" name="submit" value="Change Style"><br>
</form>

<script src="<?php bloginfo('template_url'); ?>/library/admin/jscolor/jscolor.js" type="text/javascript"></script>

To sve radi i moze se videti ovde: http://business.letterpress.ws/ Mene zanima kako ja ovo mogu da poboljsam. Razmisljam o cookies i o jos nekim stvarima. Unapred hvala na pomoci u idejama.

[jablan]

Pa nema potrebe da radiš celu priču na serverskoj strani, zar ne? Zašto live preview ne radiš samo iz JS-a i tek ako se korisniku nešto dopada, odradiš submit i snimanje?

[Mladjo]

Inicijalno sam i mislio da odradim preview sa javascript a opcija da to sto korisnici snime postoji u administracionom meniju. Medjutim nisam znao kako da do kraja resim sve sa javascript. Pokusao sam sa ovom funkcijom:

function updateBackground(color) {
	document.getElementsByTagName('body')[0].style.backgroundColor = '#'+color
}

Ali ako bih krenuo tim putem morao bih da menjam background na svim ovim stvarima #logo, .ribbon, #numbers a, .ribbon a, .meta span.auth, .gallery .ribbon a, .gallery .smallribbon a Nisam znao a ne znam ni sad da li je moguce sa js promeniti ovo sto se nalazi u headeru ili eventualno u nekom externom .css fajlu

<style type="text/css">
<!--

body {
background:#hex color da se menja sa js;
}
-->
</style>

[nixa]

Koristi neki jQ color picker http://www.eyecon.ro/colorpicker/ ili http://acko.net/dev/farbtastic i onda ti je samo par linija da uradis to sto hoces

[ivanhoe]

imas 2 opcije:
- da menjas sam stylesheet (vidi http://www.quirksmode.org/dom/changess.html)
- da koristis neku biblioteku tipa jquery, i da onda izmene primenis na elementima direktno koristeci CSS pravila, npr. $('.meta span.auth').css('color', '#123')

[Mladjo]

@jablan odustao sam od php
@nixa necu ni jquery da radim
@ivanhoe procitao sam ovo sa linka i dosao do resenja

<style type="text/css">
<!--
.color {
border:1px solid #EBEBEB;
color:#999999;
padding:6px;
width:auto;
}
a:hover, #logo h1 a, .nav li.current_page_item a, .nav .current-cat a, .nav ul.sf-js-enabled li ul li a:hover, .nav ul.sf-js-enabled li ul li.sfHover a, .nav ul.sf-js-enabled li ul li.sfHover ul li a:hover, .post h2.posttitle a:hover, .post h3.posttitle a:hover, .widget h3 a {
	color:#bf0005;
}
#logo, .ribbon, #numbers a, .ribbon a, .meta span.auth, .gallery .ribbon a, .gallery .smallribbon a {
	background-color: #bf0005;
}
 -->
</style>

<input class="color" name="bgColor"  onchange="changeIt(this.color.toString())" value="ffffff" />

<script src="<?php bloginfo('template_url'); ?>/library/admin/jscolor/jscolor.js" type="text/javascript"></script>
<script type="text/javascript"><!--
/*<![CDATA[*/
function changeIt(color) {
	if (!document.styleSheets) return;
	var theRules = new Array();
	if (document.styleSheets[1].cssRules)
		theRules = document.styleSheets[1].cssRules
	else if (document.styleSheets[1].rules)
		theRules = document.styleSheets[1].rules
	else return;
	theRules[theRules.length-1].style.backgroundColor = '#'+color;
	theRules[theRules.length-2].style.color = '#'+color;
}
   
/*]]>*/
-->
</script>

Medjutim to ne radi u ie Onda sam probao da sredim na nacin kako je objasnjeno ovde http://www.javascriptkit.com/dhtmltu...rnalcss2.shtml

function changeIt(color) {
 
var mysheet=document.styleSheets[0]
var totalrules=mysheet.cssRules? mysheet.cssRules.length : mysheet.rules.length
if (mysheet.deleteRule){ //if Firefox
mysheet.deleteRule(totalrules-1)
mysheet.insertRule("#logo, .ribbon, #numbers a, .ribbon a, .meta span.auth, .gallery .ribbon a, .gallery .smallribbon a {background-color: lime;}", totalrules-1)
}
else if (mysheet.removeRule){ //else if IE
mysheet.removeRule(totalrules-1)
mysheet.addRule("#logo, .ribbon, #numbers a, .ribbon a, .meta span.auth, .gallery .ribbon a, .gallery .smallribbon a", "background-color: lime")
}

 }

Ali ne mogu da skapiram kako da ovu vrednost color variable prebacujem na ovo background-color: lime; i da li je to moguce. Ako ne onda imam jos jednu ideju a to je da probam nesto sa document.write mozda. Hvala