Web aplikacije, web servisi i software Frameworks, web servisi, programi, plugin-ovi, ekstenzije korisni za razvoj web sajtova. Sponzor: |
|
Alati teme | Način prikaza |
07. 03. 2010. | #1 |
Mladen Milentijevic
Professional
Datum učlanjenja: 20.06.2007
Lokacija: Sweden
Poruke: 224
Hvala: 43
21 "Hvala" u 21 poruka
|
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> |
07. 03. 2010. | #2 |
VD IT Direktora
Invented the damn thing
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
|
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?
|
"Hvala" jablan za poruku: |
07. 03. 2010. | #3 | |
Mladen Milentijevic
Professional
Datum učlanjenja: 20.06.2007
Lokacija: Sweden
Poruke: 224
Hvala: 43
21 "Hvala" u 21 poruka
|
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 } Citat:
|
|
07. 03. 2010. | #4 |
Nikola Denić
Sir Write-a-Lot
|
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
__________________
Do not ask yourself what the world needs. Ask yourself what makes you come alive, and then go do that. Because what the world needs is people who have come alive |
"Hvala" nixa za poruku: |
07. 03. 2010. | #5 |
Ivan Dilber
Sir Write-a-Lot
|
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')
__________________
Leadership is the art of getting people to want to do what you know must be done. |
"Hvala" ivanhoe za poruku: |
07. 03. 2010. | #6 |
Mladen Milentijevic
Professional
Datum učlanjenja: 20.06.2007
Lokacija: Sweden
Poruke: 224
Hvala: 43
21 "Hvala" u 21 poruka
|
@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> 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") } } |
|
|
Slične teme | ||||
Tema | Početna poruka teme | Forum | Odgovori | Poslednja poruka |
"view - page style - no style" u IE? | [nq] | Opušteno | 15 | 08. 02. 2007. 01:31 |
On screen colour picker za Win | bojan_bozovic | Web aplikacije, web servisi i software | 7 | 12. 02. 2006. 17:41 |
<div style='float:left;"> | Srecko Micic | Obaveštenja, predlozi i pitanja | 7 | 11. 12. 2005. 16:00 |
Xtra lite AJAX color picker | WinterMute | (X)HTML, JavaScript, DHTML, XML, CSS | 8 | 04. 07. 2005. 10:15 |
list-style-image i IE | hana | (X)HTML, JavaScript, DHTML, XML, CSS | 4 | 22. 06. 2005. 16:00 |