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.

+ töltsd le ezt a fájlt is: link, töltsd fel szintén tárba, majd használd újra a fenti kódot, s ezt is a styleswitch.js helyére illeszd be. (tehát kettő script kódod lesz!)

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:

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

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

<script src="//nevek.gportal.hu/portal/nevek/upload/305240_1249645002_02260.js" type="text/javascript">
</script><script type='text/javascript' src=//nevek.gportal.hu/portal/nevek/upload/305240_1258816745_09183.js'></script>