Any Colour You Like vs Da li je moguće...

[mungos]

Evo vam jedne razbibrige za dosadni ponedeljak ujutru, jel moguće ovako nešto izvesti:

1. Korisnik dođe na sajt, regularno mu se učita, hoće da promjeni color šemu sajta, iskoči mu jedan ovakav color picker http://www.colorjack.com/plugin/

2. Izabere jednu boju i kaže OK

3. Sad ide zanimljivi dio. Npr. primarna boja sajta definisana isključivo kroz CSS je recimo #000000 dok je ovaj recimo sad ubo #FFBB0

4. Da li sad može na neki način da skript automatski prošvrlja kroz CSS fajl sajta i odradi automatski search & replace #000000; sa #FFBB0;? Zatim sejvuje fajl i ponovo ga servira korisniku sada sa njegovom novom bojom?

Sad da li se ovo može izvesti server-side ili čak sve na klijentskoj strani, nisam sa aspekta tehnologije upoznat, kontam da svaki CSS fajl se faktički svuče u cache na client-side i kroz javascript bi se možda sve moglo odraditi na strani klijenta

Jel ovo izvodljivo ovako kako sam zamislio i da li može neko sa dpt da izvede ovo?

[Milos Vukotic]

Mozes umjesto npr. "style.css" imati "style.php" koji ce biti dinamicki generisan.
Kad korisnik odabere boju to se npr. snimi u cookie ili session, iz cega style.php cita koja je osnovna boja i po njoj gradi ostatak css-a.
Znaci, u html ti stoji:

<link rel="stylesheet" type="text/css" href="style.php" />

a u style.php je bitno da kao prvu liniju metnes:

<?php header("Content-type: text/css"); ?>

[kodi]

postoji par nacina da se to resi

elem, moras da razmisljas malo drugacije
ako je pozadina crna, a neko izabere narandzastu, postoje velieke sanse da se neki tekst, ili tako nesto uopste nece videti, ili ce se jako slabo videti.

znaci jedna varijanta ti je da definises manji broj ponudjenih boja - pa da JS-om svitchujes alternativne css fajlove al to je daleko od elegantnog

druga varijanta je da napravis jednu JS funkciju, koja u zavisnosti od range-a izabrane boje farba tekst u crno, sivo ili belu. Boju bi mogao da cuvas u cookie-u

uglavnom fora je da imas sto optimizovaniji css fajl, sa sto manje klasa i ID-eva, tako da ne moras da menjas 1000 razlicitih stvari, vec generalizuj sve u 3-4 grupe, pozadina, tekst, senka, i kontrast boja i cao...

dobrodosao nazad na forum, i nadam se da ces uspeti u tome sto si naumio (mislim na potpis)

[kodi]

Originalno napisao Milos Vukotic

Mozes umjesto npr. "style.css" imati "style.php" koji ce biti
.
.
.

ovo takodje radi, skroz na mestu resenje.
Al sam hteo to da izbegnem, zahteva refresh

EDIT: Htedoh reci, ja sam za JS resenje, kad vec imas JS picker.
EDIT2: JS resenje stedi bandwidth i server CPU

[Milos Vukotic]

Originalno napisao kodi

Al sam hteo to da izbegnem, zahteva refresh

Sad lupam, mrzi me da isprobavam, mozda i grijesim
Moze li biti ovako:

<link rel="stylesheet" type="text/css" href="style.php" id="css_link"/>

i u javascriptu:

function promjenaBoje(boja)
{
document.getElementById("css_link").href="style.php?color="+boja;
}

na kraju, boju odabranu color picker-om saljes gornjoj funkciji kao argument, npr.

promjenaBoje("FFBB00");

Teoretski, samo refreshujes css... Da li bi radilo?

[ivanhoe]

problem sa ovim je sto dizajn mora da bude jako minimalisticki, jedna boja pozadine, plus crna ili bela slova (koja menjas zavisno od izabrane pozadine).

Cim imas par boja to ce vec biti tesko uklopiti, a takodje postoji i problem sa gifovima koji imaju transparenciju (coskovi, dugmici) jer ce promena pozadine znaciti krzave ivice..

a takodje mySpace me je naucio da ne treba pustati ljude da biraju boje, jer vecina korisnika naprosto nema ukusa

[akubra]

To sto hoces moguce je uraditi u javascriptu, bez refresha i server side generisanja css-a, s tim da je potpuno tacno ovo sto je ivanhoe rekao, ali ako to stvarno hoces, onda ok.

Moze se pristuputi svakom css-u (nebitno da li je u pitanju iniline ili externi css fajl) i svaki rule se moze modifikovati, brisati ili dodavati novi. Ovo je primer koji sve #000000 boje fonta menja u #008000, a pozadine koje su #ffffff u #d0d0d0. Jedino je dodata funkcija color2hex, posto firefox boje predstavlja kao rgb(ddd, ddd, ddd), pa se to konvertuje u #xxxxxx format.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JS change CSS</title>
<style>
body {
	font-family: arial, helvetica, sans-serif;
}
h1 {
	color: #000000;
	background-color: #ffffff;
}
p {
	color: #000000;
	background-color: #ffffff;
	width: 80%;
}
</style>
<script type="text/javascript">

function changecolor() {

	var css = document.styleSheets[0];
	var rules = (css.rules) ? css.rules : css.cssRules;
	for (var i = 0; i < rules.length; i++) {

		if (color2hex(rules[i].style.color) == '#000000') {
			rules[i].style.color = '#008000';
		}

		if (color2hex(rules[i].style.backgroundColor) == '#ffffff') {
			rules[i].style.backgroundColor = '#d0d0d0';
		}
	}
}
function color2hex(str) {

	var bytes = str.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
	if (bytes) {
		var r = parseInt(bytes[1]).toString(16);
		var g = parseInt(bytes[2]).toString(16);
		var b = parseInt(bytes[3]).toString(16);

		r = (r.length == 1) ? ('0' + r) : r;
		g = (g.length == 1) ? ('0' + g) : g;
		b = (b.length == 1) ? ('0' + b) : b;

		return '#' + r + g + b;
	}

	return str.toLowerCase();
}
</script>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel mauris. Etiam blandit pretium pede. Curabitur ligula. Aenean auctor. Integer scelerisque velit in augue. In non lacus. Quisque sagittis aliquet libero.</p>

<input type="button" onclick="changecolor()" value="Change Colors">

</body>
</html>

[Dragan Babić]

Originalno napisao ivanhoe

a takodje mySpace me je naucio da ne treba pustati ljude da biraju boje, jer vecina korisnika naprosto nema ukusa

Pusti korisnike da rade i menjaju šta hoće i kako hoće, jer, ljudi ne vole lepo, to im je strano, vole obično i prosečno - ili čak ružno, to poznaju. Nama su njihove majspejs stranice noćna mora, njima su do jaja jer kontaju da su napravili nešto individualno i "cool". Tako da, slobodno ti njih pusti da rade šta god hoće sa dizajnom, jer na kraju oni gledaju u to, ti kupi $.

[mungos]

Hvala vam veliko na odgovorima! Sad cu detaljno da iscitam sva rjesenja, pa se javljam sa opsirnijim odgovorom.

Sto se tice boja, ne brinite: tipografija je #000, pozadina je #fff, borderi su u #ccc, samim tim cetvrta boja u kojoj su linkovi, logo i navigacija ostavlja veliku slobodu da se mjenja po zelji, samim tim, samo bi se ona i mjenjala.

@kodi: Povratak bludnog sina

[mungos]

Potpisujem ono što je rekao Dragan, s druge strane dovoljno dugo se bavim Webom da znam da li želim ili ne, da omogućim korisnicima da sami prave svoj MySpace od mog korporativnog sajta

Akubra je ponudio elegatno rješenje, ako je ovo moguće povezati sa color pickerom i to sve ovako u JS, bez refresha i server side generisanja CSS bilo bi odlično! Akubra možemo i na pp da se čujemo oko detalja.