Egy kis javascripttel �s CSS-vel mire k�pes az ember! :) Ha t�bb designt szeretn�l a port�lodra, vagy csak egyszer�en t�bb sz�nben szeretn�d megjelen�tetni a designod, akkor Neked val� ez a le�r�s. Az eg�sz l�nyege, hogy a l�togat�id v�laszthatj�k ki, hogyan is n�zzen ki az oldal.

Dem� <= ez egy egyszer� dem�, nem k�sz�tettem k�l�nb�z� designokat, csak a sz�n�t v�ltoztattam meg. De a l�nyeg�t �rteni fogod :).

A tutorial eredetileg a dynamicdrive oldalr�l van, magyar viszonylatban a Crazy But Real lapon tal�lhatod meg, viszont az ottani irom�ny nem vonatkozik G-Port�lra. Ez�rt is estem neki :). Tudom, irt� hossz�nak t�nik, de majd megl�tj�tok, hogy igaz�b�l nem is olyan neh�z!

K�rlek, forr�solj majd minket, ha siker�lt megcsin�lnod a seg�ts�g�nkkel! :)

01. JavaScript
   a) Kezdj�k a JavaScripttel, amit le kell t�ltened: link. (g�rgess kicsit le, �s a styleswitch.js kattolva t�ltsd le)
   b) Most sz�ks�ged van a G-PorT�r modulra. Ide t�ltsd fel a styleswitch.js f�jlt.  
   c) K�sz�ts egy egyszer� modult, amit jobb/bal oldalra igaz�tasz. L�pj bele, s a forr�sk�dhoz rakd be ezt a k�dot:

<script src="styleswitch.js" type="text/javascript"> </script>

FONTOS: menj vissza a t�rhoz, jobb klikk a styleswitch.js f�jlra, tulajdons�gok, �s m�sold az URL-t, v�g�l a fenti k�dban a styleswitch.js hely�re illeszd be.

Egyel�re ez ok�, elk�ldheted, majd visszat�r�nk ide.

02. CSS
T�r�ld a port�lodr�l az �sszes CSS k�dot, hogy ne zavarjanak be. Ezut�n k�sz�tsd el az els� designt, �s hozz� a CSS k�dot. Fontos, hogy most a CSS-ben kell megadnunk a fejl�cet, �s a h�tteret is, a st�lus �s a fel�letn�l ne t�lts fel semmit. K�sz�tettem egy alap CSS k�dot, amiben a fejl�cet, h�tteret �s a f� modulokat tudod megv�ltoztatni. Kezdj�k az elej�n:

   a) K�sz�tsd el az els� designt, a p�ld�mban ez a k�k design. A design elemeit (fejl�c, h�tt�r) fel kell t�ltened egy k�pt�rba, hogy meg tudd adni a CSS-ben az URL-t.
   b) .txt f�jlba �rd meg a CSS-t a designhoz. �gy k�sz�thetsz: az asztalon, vagy �pp amelyik mapp�ban vagy, jobb klikk > �j > sz�veges dokumentum. Nevezd el pl. alapdesign.txt -nek.
   c) Ha kezd� vagy a CSS-ben, akkor el�sz�r csak az egyszer�, p�lda k�dommal pr�b�lkozz, de a halad�k is n�zz�k meg, hiszen ebben l�thatj�tok, hogyan kell megadni a fejl�cet. A halad�k a t�bbit m�r ismerik, illetve b�v�thetik a CSS-t az eddigi ismereteikkel: link.
     Megj.: itt nem kell megadni a szok�sos nyit� �s z�r� tageket.
   d) K�sz�tsd el a k�vetkez� designt, majd a fenti m�don a CSS-t, �s �gy tov�bb. Amennyi designt szeretn�l, annyit. A l�nyeg mindig ugyanaz, hogy a fejl�c �s a h�tt�r szerepeljen valamilyen k�pt�rban, a CSS-ben hivatkozzunk r�. Minden designhoz k�l�n .txt f�jlba rakd a CSS-t!
   e) T�ltsd fel a CSS k�dokat (a .txt f�jlokat) a G-PorT�r modulba.

03. Hozz�rendel�s a port�lunkhoz
El�sz�r hozz� kell rendeln�nk a CSS-t a lapunkhoz, hogy ut�nna v�laszthat�v� tudjuk tenni.

   a) Menj annak az egyszer� modulnak a forr�sk�dj�ba, ahov� raktad a JavaScriptet.
   b) El�sz�r azt a designt adjuk meg, amelyik az alap designunk lesz, teh�t ezt a designt fogja l�tni a l�togat�nk, mikor el�sz�r j�n a lapunkra, s m�g nem v�lasztott designt. Rakd ezt a k�dot a script al�:

<link rel="stylesheet" type="text/css" href="alapdesign.txt">

Az alapdesign.txt hely�re rakd annak a .txt f�jlnak az URL-j�t, amelyiket alap designnak szeretn�l. Tudod, amit a l�togat� el�sz�r l�t :).

   c) Most j�het a t�bbi design, amit ezzel a k�ddal kell megadni egyes�vel:

<link rel="alternate stylesheet" type="text/css" media="screen" title="masodikd" href="design.txt">

A design.txt hely�re rakd a k�vetkez� design .txt f�jlj�nak URL-j�t, s fontos m�g a title, ahov� a design neve menjen. Ez a m�sodik design, �gy ezt a nevet adtam neki: masodikd. Fontos a n�v, k�s�bb sz�ks�g�nk lesz r�. Ne haszn�lj �kezetet.

Ezut�n j�het a k�vetkez� designod, ugyan�gy az el�bb eml�tett k�ddal adod meg, a design.txt hely�re megy az a .txt f�jl, amiben a CSS-je van, a title ut�n pedig a neve. Annyit raksz fel, amennyit akarsz, de arra gondolj, hogy ezt mind le kell t�ltenie a l�togat�idnak, mikor a lapodra mennek, sz�val az�rt ne legyen fent 100 lehet�s�g! :)

04. Design v�laszt�s
Azzal, hogy az el�bb hozz�rendelt�k a lapodhoz a CSS-ket, m�g nem �rt�nk el sokat, ugyanis ha elk�ldted, csak az alapdesignt l�thatod. Ebbe a modulba m�g meg kell adnunk azt is, hogy a l�togat�k tudjanak v�lasztani a designok k�z�l. Teh�t l�pj bele, s valamelyik k�dot rakd m�g be. Ezut�n, ha leok�zod m�r k�sz is vagy. T�bb lehet�s�g is van:

   a) Linkkel
Egym�s mellett jelennek meg a linkek, amire kattintva a l�that�k v�laszthatnak.

<a href="javascript:chooseStyle('none', 60)">K�k</a>
<a href="javascript:chooseStyle('masodikd', 60)">Lila</a>
<a href="javascript:chooseStyle('harmadikd', 60)">Piros</a>

FONTOS: az els� sorban csak a K�k sz�t �rd �t, a Te designod c�m�re (az alapdesign c�me). A m�sodik sorban nem csak a >< k�z�tt szerepl� Lila sz�t kell �t�rnod a designod c�m�re, hanem a z�r�jelben szerepl� masodikd sz�t is. Ide azt a c�met kell �rnod, amit a hozz�rendel�skor adt�l meg a title ut�n. �n ugye a masodikd c�met adtam. Ezt a sort m�sold annyiszor, ah�ny designod van m�g. Term�szetesen mindig �rd �t a z�r�jelben szerepl� sz�t a hozz�rendel�skor megadott c�mmel, �s a design nev�t is add meg.
Vil�gos ugye, hogy a sor v�g�n megadhat� sz�, (pl. K�k, Lila, Piros), lesz a link�nk, amire kattintva a l�togat� v�ltoztathatja a designt?

   b) K�ppel
Megadhatsz k�peket, amikre kattintva l�that�v� v�lik a design. Aj�nlott kicsi, ikonk�peket megadni, amik utalnak a design kin�zet�re, sz�nvil�g�ra.

Ugyanaz a l�nyege, mint a linkesn�l: az els� sorban a none-t ne b�ntsd, csak a k�p URL-j�t add meg. A k�vetkez� sorban m�r a masodik sz�t �t kell �rnod a hozz�rendel�skor megadott title ut�ni sz�ra, s persze a k�p URL-j�t is meg kell adnod. S ism�t ezt a sort kell m�solnod annyiszor, amennyi design van m�g h�tra, s mindegyikn�l �t�rni a title-t, �s a k�p URL-t.

<a href="javascript:chooseStyle('none', 60)"><img border="0" alt="" src="ALAP DESIGN IKON URL" /></a>
<a href="javascript:chooseStyle('masodik', 60)"> <img border="0" alt="" src="DESIGN02 IKON URL" /></a>
<a href="javascript:chooseStyle('harmadik', 60)"><img border="0" alt="" src="DESIGN03 IKON URL" /></a>

   c) Leny�l� men�vel
A <option value="none" sorban a none szint�n marad, a K�k sz�t pedig �rd �t az alapdesignod nev�re. Ezut�n a k�vetkez� sorban a masodikd hely�re j�n a k�vetkez� design c�me, vagyis a hozz�rendel�skor a title ut�n megadott sz�, �s a Lila hely�re a designod neve, amit szeretn�l, ha megjelenne a leny�l� men�ben. Ezt a sort kell m�solnod egym�s al� annyiszor, ah�ny designod van m�g, s szint�n meg kell adnod mindig a value ut�n, amit fentebb a title ut�n �rt�l, �s persze a design nev�t is.

<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">K�k</option>
<option value="masodikd">Lila</option>
<option value="harmadikd">Piros</option>
</select>
</form>

   d) R�di� gombokkal
Nem r�szletezem, ugyanaz a magyar�zata, mint a leny�l� men�nek, csak itt inputtal kezd�dnek a sorok. A none-t ism�t nem b�ntod, K�k hely�re megy az alapdesign neve. K�vetkez� sorn�l �t�rod a masodikd-t, �s a Lila sz�t, �s �gy tov�bb.

<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">K�k<br />
<input type="radio" name="choice" value="masodikd" onClick="chooseStyle(this.value, 60)">Lila<br />
<input type="radio" name="choice" value="harmadikd" onClick="chooseStyle(this.value, 60)">Piros
</form>

K�SZ! =) Rem�lem, siker�lt! ;)

05. Dem� k�d
A dem� oldalon haszn�lt k�d �gy n�z ki, itt l�thatod, milyen az eg�sz �sszerakva:

<script src="//thetrance.gportal.hu/portal/thetrance/upload/578089_1249643319_09200.js" type="text/javascript">
</script>

<link rel="stylesheet" type="text/css" href="//thetrance.gportal.hu/portal/thetrance/upload/578089_1249643445_01496.txt" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="lila" href="//thetrance.gportal.hu/portal/thetrance/upload/578089_1249643517_09875.txt" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="piros" href="//thetrance.gportal.hu/portal/thetrance/upload/578089_1249643517_07211.txt" />

<a href="javascript:chooseStyle('none', 60)"><img border="0" alt="" src="//thetrance.gportal.hu/portal/thetrance/image/gallery/1249642471_69.jpg" /></a>
<a href="javascript:chooseStyle('lila', 60)"> <img border="0" alt="" src="//thetrance.gportal.hu/portal/thetrance/image/gallery/1249642466_53.jpg" /></a>
<a href="javascript:chooseStyle('piros', 60)"><img border="0" alt="" src="//thetrance.gportal.hu/portal/thetrance/image/gallery/1249642454_01.jpg" /></a>