DevProTalk - Style Switcher with Color Picker

DevProTalk (http://www.devprotalk.com/index.php)

- Web aplikacije, web servisi i software (http://www.devprotalk.com/forumdisplay.php?f=30)

- - Style Switcher with Color Picker (http://www.devprotalk.com/showthread.php?t=8527)

Style Switcher with Color Picker

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:

Kôd:

<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.

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?

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:

Kôd:

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

Citat:

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

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')

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

Kôd:

<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

Kôd:

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