AR Design
CSS
CSS : Több kinézet egy portálon

Több kinézet egy portálon


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="http://thetrance.gportal.hu/portal/thetrance/upload/578089_1249643445_01496.txt" />
<link title="lila" rel="alternate stylesheet" type="text/css" href="http://thetrance.gportal.hu/portal/thetrance/upload/578089_1249643517_09875.txt" media="screen" />
<link title="piros" rel="alternate stylesheet" type="text/css" href="http://thetrance.gportal.hu/portal/thetrance/upload/578089_1249643517_07211.txt" media="screen" />

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

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

 
Menü Plusz

 Üdvözlés
 Regisztráció
 Bejelentkezés
 Honlaptérkép
 Oldal: infó, vk
  AR mackók
 Szabályzat
 Hirdess ingyen!
 Linkcserék
 Buttoncserék
 ALL szövetség

 
AR ajánló

 Design-szettek
 CSS kódok
 Üzenőfal portálodra
 Több kinézet CSS-vel
 Képváltós menü
 Kérdezz-Felelek script
 Különleges frissítés
 Egy modulban több
 Képeffekt CSS-vel
 CSS magyarázat
 Különleges modulstílus
 Különleges modulstílus div

 
Chat


 
Online
2 látogató van itt
 
   
                                   

 

                                                              


"Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.    *****    PROJECT DC egy futurisztikus-disztópikus SZEREPJÁTÉK! Bármikor szívesen látjuk a csatlakozókat!    *****    Ne maradj le semmirõl, értesülj elsõ kézbõl a Selena Gomezzel kapcsolatos hírekrõl! Hat éve várja a látogatókat az oldal    *****    Református exmisszus-gyakornok, jégkorong, izomautók, rap zene. Igen, ez mind én vagyok! Hogyan? Nézz be és megtudod! :)    *****    Szeretsz írni? Lenne egy jó témád, amit megosztanál másokkal? Akkor kattints, és nyerj egy vendégposztot nálam! :)    *****    Kedveled Ian Somerhaldert? Odáig vagy a szépséges színésznõért, Nina Dobrevért? Kattints! Nem csak TVD rajongóknak!    *****    Szeretsz filmet nézni? Akkor itt a helyed! Nézz filmet facebook messengeren. Klikk ide!!!!    *****    MAYFLOWER / egy májusban született lány blogja / MAYFLOWER / egy májusban született lány blogja / MAYFLOWER    *****    DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE! DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE!    *****    ***Egy blog. Egy lány. Egy élet.*** Ðzsí blogol. *G-PORTÁL KÖZÖSSÉGMENTÉS ugyanitt. Ha hiányzik a régi közösség.*BLOG***    *****    Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok    *****    Nézz filmet facebook messengeren!!!! Klikk! Klikk!    *****    ONMYMIND \\ EGY ÁTLAGOS SRÁC BLOGOL MINDENRÕL AMI ESZÉBEJUT \\ ZENE, CIKKEK, KRITIKA? KATTINTS ÉS OLVASS MOST KEDVEDRE    *****    **********Rengeteg AKCIÓ! Vegyszermentes kozmetikmok és bio mosó és tisztítószerek, munkalehetõséggel! ***********    *****    OKTATÁS INGYENESEN az ASZTRO-suliban, Asztrológiai tanácsadás BECSÜLET KASSZÁS alapon! Fordulj hozzám bizalommal!    *****    Bûbájos boszorkák - Charmed - Hírek a folytatásról - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed -    *****    LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT * LORDE * ISMERD MEG TE IS * LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT    *****    Re-Startoltunk! Egy SZEREPJÁTÉK, amelybe bármikor becsatlakozhatsz! Légy te is Hõs! Hõsregék RPG    *****    Nem értesz a CSS kódokhoz/nem tudod egyedül fenntartani oldalad/szeretnél egy társszerkesztõt? Írj nekem! - sakura-ec.gp    *****    ISMERD MEG A GYÖNYÖRÛ OSCAR-DÍJAS SZÍNÉSZNÕT, ALICIA VIKANDERT, AKI A 2018-AS TOMB RAIDER LARA COFTJÁT FOGJA ALAKÍTANI!