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
 
   
                                   

 

                                                              


SELENA GOMEZ MAGYARORSZÁG - TUDJ MEG TÖBBET SELENA GOMEZ MAGÁNÉLETÉRÕL, SZERELMÉRÕL, CSALÁDJÁRÓL, KARRIERÉRÕL!    *****    HA TE IS IMÁDOD A ZÖLD ÍJÁSZ VILÁGSIKERÛ SOROZAT ELBÛVÖLÕ SZERELMESPÁRJÁT AKKOR ITT A HELYED! MAGYAR OLICITY SITE    *****    The Vampire Diaries & The Originals szerepjáték - ha kedveled a sorozatokat és írni is szeretsz, ne habozz!    *****    Rendhagyó kedvezményt ajánlok Nektek, Te monhatod meg, hogy mi legyen az ára. Pl.: Születési, párkapcsoklati, horoszkóp.    *****    KÖNYVismertetõk, kötelezõ olvasmányok    *****    BOOKFANCLUB -> A könyvek birodalma elvezet a képzelet csendes világába!<<-BOOKFANCLUB    *****    Ingyenes, korlátlan képfeltöltés!!! www.kepfeltolto.eu    *****    Autista - Állatbarát - Homoszexuális - Intelligens - Kívülálló - Mûvészlélek - Segítõkész - Toleráns    *****    Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Design!    *****    HAT ÉVE ONLINE! - LÁTOGASS EL MAGYARORSZÁG EGYETLEN MÛKÖDÕ SELENA GOMEZZEL FOGLALKOZÓ OLDALÁRA! - HAT ÉVE ONLINE!    *****    A SZULTÁNA: HÍREK - KÉPEK - SOROZATISMERTETÕK - TÖRTÉNELMI INFÓK - ÉRDEKESSÉGEK MINDEN MENNYISÉGBEN A SOROZATRÓL    *****    Bûbájos boszorkák - Charmed - Extrák - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed - Charmed -Játékok    *****    Itt a nyár! Kivirágzott a mályva és a pipitér! Hogy mit szólt ehhez a két virágmanó? Gyere, és olvasd el a Mesetárban!    *****    STITCHERS - Magyarország egyetlen oldala a természetfeletti krimi-drámasorozatról! A Stitchers sorozatot megéri nézni!    *****    Nézz Élõ live filmet gportalon. Klikk klikk klikk.    *****    Gréti. 23. Egyetemista. Chevelle. Rap. Jégkorong. Ottawa Senators. Jean-GabrielPageau. Írás. Olvasás. Blog. (:    *****    Élõ live mozifilmek. Ha szereted a filmeket, sorozatokat, meséket akkor itt a helyed!    *****    Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok    *****    ARIANA GRANDE TODAY - MAGYARORSZÁG EGYETLEN ARIANA GRANDÉVAL FOGLALKOZÓ HONLAPJA - TUDJ MEG RÓLA MINDENT    *****    KOSEMBLOG.GP//A MAGYAR "A SZULTÁNA" RAJONGÓI OLDAL//BY: KÖSEM// KOSEMBLOG.GP//MINDEN, AMI KÖSEM...