| Íme egy rövid iromány, miként kell MAL design-t készíteni. A szövegben előfordulhatnak helyesírási hibák, vagy elírások, de a kódokban nem. Ezt majd kijavítja a klub tulajdonosa, ha talál valami elírást aztán ennyi. Amikor a szöveget lementettem, valahogy eltűntette a Notepad++ az ékezetes karaktereket, így aztán 1-2 órámba telt, mire visszaírogattam az ékezetes betűket. Aki megunta a korlátokat, illetve szeretné a hátteren, és pár színen kívül mást is lecserélni, annak valamennyire segíteni fog az alábbi cikk. A legfontosabb, hogy ismerjük a CSS szabályokat, de ha már valamennyire jártas valaki benne, akkor könnyebben fog menni az átskinnelés. Mindössze két darab programra van szükség: - Notepad++ amivel meg kell írni a kinézetet. - Egy böngésző, melyben van fejlesztői eszköz: >> IE8/IE9/IE10, Opera 11/12, Google Chrome, Mozilla Firefox 12 (Ebbe már beleépítettek egyet ami viszonylag normális, így nem kell keresgélni Fejlesztői kiegészítőt) Fejlesztői eszköz: Majdnem mindegyik böngészőnél a fejlesztői eszközt úgy lehet előhozni, hogy jobbklikkel rákattintasz az aktuális lapra, azután a menüpontból ki kell választani a fejlesztői eszközt. Egyes böngészőknél máshogy nevezik ezt a menüpontot. Én az alábbiakról tudok nyilatkozni: * Google chrome : Elem megtekintése * Opera : Fejlesztői eszközök > Opera Dragonfly * Internet Explorer 8, 9 & 10 : A jobbfelső sarok felé, az egyik menüpontban van (Azt hiszem az eszközöknél), hogy fejlesztői eszköz. * Firefox 12 : Elem vizsgálata Az útmutatót Google Chrome alatt mutatom be, de egyébként az összes beépített fejlesztői eszköz hasonlóan működik. Notepad++ ( Letöltés: http://notepad-plus-plus.org ): Miután feltelepítetted a programot, az asztalon, vagy a start menüben keresd meg a Notepad++ programot, majd indítsd el. Azért ezt a programot ajánlom, mert sokféle programozási nyelvet felismer, ezáltal könnyebben lehet dolgozni, illetve színkiemelés van benne, így könnyebb alkotni. Ha elindult a program, ki kell választani a megfelelő programozási nyelvet, vagyis a CSS-t: Nyelv (Language) -> C -> CSS. Ha ezzel megvagy, akkor már biztos lehetsz abban, hogy a CSS szabályai szerint fog viselkedni a program, s ez alapján színezi a szavakat, értékeket, stb. Vizsgálat: Miután készen áll a böngésző fejlesztői eszköze, és az Anime listán van a lap, kattints Google Chrome alatt a nagyító ikonos gombra (más böngészők alatt a "Vizságlat" vagy "Megtekintés" gomb) A Nagyító ikont mutató kép (klikk) Ha rákattintottál, és látod, hogy bekékült, kattint a listád oldalán egy elemre: Rákattintás utáni kép (klikk) Egyébként nem nagyon kell kattintani, hiszen egy buborékban kiírja a szükséges dolgot, avagy az elem nevét (pl: td), illetve az osztályát (class), vagy az azonosítót (id). Miután ki lett választva az a rész, amit formázni szeretnél, ebből a legfontosabb dolgot kell megírnod a css-ben. Jelen esetben a "td.table_header" szót. Kirészletezem, mit jelent: A "td" maga az elem neve (table definition). Ez a HTML táblázat eleme amibe a tartalmat kell rakni, de ebbe most nem bonyolódok bele. a ".table_header" pedig ennek az elemnek az osztálya, ami segítségével átformálod a lista azon "td" elemeit, melyek rendelkeznek ezzel az osztállyal. A CSS kód megírása: A nehéz rész (már akinek), mely az oldal átformáláshoz kell. Miután kiválasztottad azt az elemet, amit át akarsz formálni, írnod kell egy CSS kódot Notepad++-ban. Íme egy példa, és mellé a magyarázat, mit művel az adott kód: td.table_header { background: darkred; /* Az elem háttere szövegesen */ color: #fff000; /* Az elemben található betűk színe HEX-ben */ padding: 5px; /* A tábla belső margójának mérete (fent, jobb oldalt, alul, bal oldalt) */ font-weight: bold; /* A betűk félkövérek lesznek tőle */ font-style: italic; /* A betűk dőltek lesznek */ border: 1px dashed rgb(204,139,139); /* Szegély mérete, stílusa, színe rgb értékekben */ } Ezzel a kóddal az összes table_header osztállyal rendelkező tábla definíció (táblázat cella) html kódrészt megformálod. Magyarul az animelistád azon részei kapják ezt a tulajdonságot, ahol az "Anime title, Score, Progress.." szavak szerepelnek. Színek megadásánál három féle formát lehet használni: A szín angol neve: darkred = sötét piros HEX : #ccc = világosszürke rgb: rgba(255,255,255) = Fehér Létezik az utóbbinak egy alfa csatornás lehetősége, de az IE 9-nél régebbi böngészők szarnak rá: rgba(255,255,255,.9) = fehér háttér 90%-os átlátszósággal. Akit nem érdekel, ha régi IE vagy firefox alatt nem fog működni, az nyugodtan használhatja. Ha valami hasonlót akar az ember, akkor csinál Photoshopban egy 1px széles, és 1px magas fehér színnel kitöltött PNG képet, ami 90%-os átlátszósággal rendelkezik, aztán egy background opcióval beilleszti a kiválasztott elembe. Csak ugye IE6-ban minden hibás ami új, szóval ott nem lesz átlátszóság egykönnyen. Háttérkép hozzáadása Ha szeretnél hátteret változtatni, vagy valami háttérképet berakni, a body címkének kell adni egy background értéket, azon belül a háttérkép elérési útját. Íme a példa: body { background: url(http://ahatterkepurlcime.hu/hatterkep.jpg) no-repeat fixed; } Az url() részbe kell beraknod a használni kívánt kép elérési címét, a no-repeat megakadályozza, hogy a háttérkép ismétlődjön, a fixed pedig rögzíti a hátteret, Így ha görgeted a lapot, a háttér nem fog elmozdulni. Patternek (ismétlődő mintaképek) esetében repeat-ot kell megadni, mivel ezek a patternek direkt erre lettek kifejlesztve. Ha elhagyod a fixed, vagy scroll értéket írész, akkor a háttér mozogni fog a lap görgetésekor. A fixed opciót akkor érdemes használni, ha tényleg nagy képet raksz ki háttérnek. Ezen kívül még ki lehet egészíteni a háttér igazítását egy másik kóddal: body { background: url(http://ahatterkepurlcime.hu/hatterkep.jpg) no-repeat fixed; background-size: 100%; } A background-size kódot akkor kell használni, ha óriási hátteret raksz ki, és szeretnéd, hogy igazodjon az aktuális ablakmérethez a kép. Ez a kód régebbi böngészőknél nem fog működni, illetve Internet Explorer 9-nél régebbi verzióknál előtaggal se elérhető. Ha valaki szeretné, hogy régi Chrome, Firefox, Opera alatt is működjön, rakja pluszba ezeket hozzá: -o-background-size: 100%; -moz-background-size: 100%; -webkit-background-size: 100%; Fejléckép hozzáadása, a teljes tartalom rész méretezése, pozícionálása Na igen, ez egy bonyolultabb dolog, pláne ha a menü mögé is akar valaki egy sávot rakni. Mivel nem mindenben barátságos a lista formázása, és láthatólag a MAL tulajdonosai nem változtatnak a HTML felépítésen, így kicsit meg kell erőltetni magad. Először is meg kell adnod a külső konténer szélességét, majd a megadott méret alapján kell a fejléckép szélességét meghatározni. Csináltam egy példafejlécet:  A kép 750px széles, 150px magas. Ezen kívül mint azt odafírkáltam, a menünek szánt rész 30 px magas, a fejélcképnek szánt rész pedig 120px. Ezt a képet a konténer háttereként kell megadni. Íme a példakód: #list_surround { width: 750px; margin: 0 auto; padding: 95px 0 0 0; background: url(http://ahatterkepurlcime.hu/hatterkep.jpg) no-repeat center top; } A width érték az animelista doboznak a szélességét adja meg. A margin egy elhagyható rész, ha valaki így akarja hagyni az oldal elhelyezkedését, ahogy a MAL beállította (Azt hiszem középen van). Esetleg ha a listát balra akarod dobni, így kell megadni: margin: 0 auto 0 0; Ami a legfontosabb a pozícionáláshoz az a padding értékei. A menü igazításhoz csak az első értéket kell változtatgatni, mivel azzal lehet növelni a fődoboz fenti belső marógjának értékét. A background rész pedig egyértelműen megint szükséges, mivel ezzel lehet megjeleníteni a képet. A no-repeat gondoskodik arról, hogy ne ismétlődjön a fejléckép, a center vízszintesen középre rakja a képet a #list_surround dobozban, így ha valaki 900px-t ad meg a width értékben, a kép automatikusan középre helyeződik. A top pedig arra ügyel, hogy függőlegesen fent legyen a lista tetején a kép. Itt nem lett megadva a fixed érték, mivel ha meg lenne, akkor görgetés során nem mozdulna el a fejléckép, és ugye erre szükség nincs. A background-size meg el lett hagyva, mivel ezt leginkább csak háttereknél kell alkalmazni, azon belül az óriási képeknél ajánlott, ha valaki azt szeretné, hogy a teljes kép elférjen az ablakban. Egyedi kategória képek: Előfordul, hogy a Watching, Completed, Dropped, Plan To Watch, On Hold helyén más szöveget akar az ember, vagy épp szép stílusosat. Először nézzük az ehhez tartozó osztályokat: .header_cw > Watching .header_completed > Completed .header_onhold > On hold .header_dropped > Dropped .header_ptw > Plan to Watch Mielőtt kategória képet szerkesztenéd, akkora legyen a szélessége, amekkorát megadtál a lista fődoboznak (a #list_surround width értéke). Persze lehet ennél nagyobb, vagy kisebb, de az egyértelműen nem lesz igényes, nem fog odailleni... Ha már készen vannak a képek, el kell tűntetni a régi egyszerű szövegeket. Íme egy példa kód: div.header_title span { display: none; visibility: hidden; font-size: 0px; text-indent: -9999em; } Többféle eltűntetési lehetőséget adtam meg, ha esetleg véletlenül az egyik nem válna be, akkor egészen biztos, hogy a másik igen. Lehet, túlzásokba estem. Egyébként is legalább leírtam az összes lehetséges módszert. Létezik még egy módszer is, amit így együttesen kell használni, és ez is garantáltan működni fog az összes böngésző alatt: div.header_title span { width: 0px; height: 0px; position: absolute; clip: rect(0,0,0,0); left: -9999px; top: -9999px; overflow: hidden; display: none; visibility: hidden; visibility: hide; /* nagyon őskori IE, és egyb más régiségeknél */ } Lehet választani a kettő közül, de a tömörség érdekében elég ezt használni: div.header_title span { display: none; } Ezzel a megadott osztállyal rendelkező div (layout/réteg) html kód szöveges tartalma eltűnik. Miután a nem kellő sözveg el lett tűntetve, most meg kell írni a képeknek a css kódot. Mivel a képek a fődoboz szélességével egyezőek, ebben az esetben csak a magasságot kell megadni a height értékkel. Ha mindegyik kép magassága egyforma, akkor elég egyszer megadni a magasságot egy gyűjtő kódrészben: .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { height: 70px; } Fontos, ha több osztálynak egyező tulajdonságot akarsz megadni, ezeket vesszővel válaszd el! Ha nincs elválasztva, a böngésző úgy fogja fel, hogy azt az elsődleges osztályban kell megkeresni. A feljebb írt szöveg eltűntetési kód egy példa rá. Mivel a span elé nem lett vessző rakva, így a böngésző a "div.header_title" elemben fogja keresni az eltűntetendő span-t. Abban az esetben ha a képek magassága különböző, akkor külön-külön mindegyiknél meg kell adni a kép magasságát: .header_cw { height: 70px; } .header_completed { height: 140px; } A képek megjelenítését itt is a background nevű kóddal kell megjeleníteni külön-külön mindegyik osztályban: .header_cw { height: 70px; background: url(http://akepelerese.hu/anezemkep.jpg) no-repeat center bottom; } .header_completed { height: 140px; background: url(http://akepelerese.hu/amegneztemkep.jpg) no-repeat center bottom; } .header_onhold { height: 140px; background: url(http://akepelerese.hu/aszuneteltkep.jpg) no-repeat center bottom; } .header_dropped { height: 140px; background: url(http://akepelerese.hu/adobottkep.jpg) no-repeat center bottom; } .header_ptw { height: 140px; background: url(http://akepelerese.hu/atervezettkep.jpg) no-repeat center bottom; } Még egyszer utoljára elmagyarázom, hogy a no-repeat azért kell, hogy még véletlenül se ismétlődjön a kép. Persze ez elhagyható, ha a képed mérete egyezik a CSS-ben megadottakkal, de én megszoktam adni, hátha véletlenül valamelyik böngésző dupla méretet ad egy elemnek ( A régi IE szokta ezt csinlni egyes html címkéknél ). A center bottom érték is az igazítás miatt van, de ezeket én már tényleg nem szoktam megadni. A kategória elemeinek forámlása. (Táblázat cellák) Két féle lehetőség van a táblázatcellák formálására. Az egyik, hogy mindegyik cella egy értéket kap, a másik pedig, minden úgymond "második" elem mást. Ha nem szeretnél megkülönböztetést az első, és a második közt, gyűjtő részbe kell beleírni a kódokat: .td1, .td2 { background: darkred; color: #fff000; padding: 5px; } Szerintem már magyaráznom se kell, mit adnak ki a beleírt kódok. Ha pedig megkülönböztetést szeretnél, akkor külön-külön meg kell adni mindegyik cellaosztálynak az értékeket: .td1 { background: darkred; color: #fff000; } .td2 { background: darkgreen; color: #fff; } Mivel itt nem csak sima szöveg van, hanem link is, ezért azt is meg kell formázni, mégpedig így: .td1 a, .td2 a { text-decoration: none; color: lime; } .td1 a:hover, .td2 a:hover { text-decoration: underline; color: yellow; } A text-decoration: none eltűnteti a linkek alatti aláhúzást. Ha mégis szeretnél, a "none" helyett add meg az "underline" értéket. A második kódrészben az "a" után van egy ":hover" szöveg, ami az úgynevezett css pseudo osztály (másnéven alosztály), aminek az értéke csak akkor érvényesül ha rámutatsz a kurzorral a linkre. Ezt a ":hover" alosztályt nemcsak linkeknél lehet használni, hanem cellákon is, de viszont Internet Explorer 6, és az ennél régebbi verzióknál csak a linkeken működik. Persze rá lehet bírni, hogy IE6 alatt is működjön táblázatcella esetén, de ehhez már komoly css-en keresztüli behavior meghívásokat kell alkalmazni, vagy javascript hackeket, de ebbe nem megyek bele. A menü megformálása: A cikk eleje felé szó volt a fejlécnél a menüsáv igazítása. Itt most a benne található tartalomról lesz szó. A menü csak linkeket tartalmaz, illetve a tábálzatcelláknak 2 osztálya van. .status_selected > Ha az aktuális kategóriát nézed .status_not_selected > Minden más, ami nem aktuális. Ha rákattintasz a "Dropped" menüre, és miután odaugrik az általad nézhetetlen (vagy épp nem, csak nem tetszett) kategóriás animékre, akkor ez a menüpont megkapja a ".status_selected", az összes többi pedig a ".status_not_selected" osztályt. Ha mindegyik esetben egyféle forámzást szeretnél, ezt a kódot alkalmazd: .status_selected a, .status_not_selected a { color: #fff000; display: block; background: #999; } Így nem lesznek elkülönítve a jelenlegi oldal, és más oldalra vezető menüpontok linkjei. A display: block tulajdonság arra szolgál, hogy a teljes cella területét töltse ki a link. Ezt akkor kell használni, ha mindenképp akarsz háttérszínt, vagy háttérképet a link mögé. Rámutatáskor való változás esetén külön kell :hover értékkel ellátott "a" cmkéjű kódrészt létrehozni. Ha külön szeretnéd kezelni a jelenlegi oldal linkjét a többitől, akkor ugyanúgy külön-külön kell írnod hozzá kódot. A design közzététele: Miután kész az alkotás, közzé kellene tenni MAL-on: -> Profil menü ---> Profile melletti edit link -----> My List Style fül ----------> Advanced style css editor Majd itt két link található. Mindkettő arra szolgál, hogy a css kódot tárold. Válaszd ki valamelyiket, majd bejön egy űrlap. Ott illeszd be a szövegmezőbe a Notepad++-ban megírt teljes kódot, majd mentsd el MAL-on (illetve Notepadban is, ha akarod). Ha ez megvan, márcsak be kell állítani a listának a design-t. Ugyanúgy a My List style fülnél keresd meg a "Change My List Style" linket. Arra kattints rá, és utána a lenyíló listában válaszd ki azt a Style azonosítót amiben van az anime, vagy a mangalistádnak szánt design. Pl Style #id2012 -------------------------------------------------------------------------------------------------------------------------------------------- A záró beszéd: Megpróbáltam érthetően leírni, hogy kell designt csinálni. Ha esetleg valakinek nem esik le, mit hogy kell megszerkeszteni, az itt tegye fel a kérdéseit. Megpróbálok minél hamarabb válaszolni a kérdésekre. Tudtommal van rajtam kívül még pár ember, aki érti eme nyelvet. Remélhetőleg ők is tudnak segíteni. További oktatóanyagok a CSS-ről itt: http://w3schools.com Kezdőknek nagyon hasznos oldal, illetve nem csak CSS-ről vannak cikkek. Hátránya csak annyi, hogy aki egy kicsit se tud angolul, az fel nem fogja. További linkek, ahol fellelhető a css: http://tutorial.hu http://css-3.hu/ És plusz egy oldal, ahol részletes ismertetők vannak a CSS kódokról (Angol nyelven): http://w3.org ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: |
LopikaDec 15, 2012 9:04 AM
 |
More topics from this board
» Mi az első szó ami eszedbe jut, ha azt mondom....[JÁTÉK] ( 1 2 3 4 5 ... Last Page )AlexWalker - Nov 11, 2012 |
895 |
by tinshard
»»
Aug 22, 2023 4:21 PM |
|
» Kinek mi a kedvenc animeje.Mottor - Sep 26, 2020 |
4 |
by Tollans
»»
Apr 23, 2023 5:34 PM |
|
» Animenyomozó - játékGrandmagic13 - Aug 10, 2018 |
43 |
by Grandmagic13
»»
Nov 1, 2018 1:06 AM |
|
» Melyik anime karakter van a képen? [JÁTÉK] ( 1 2 3 4 5 ... Last Page )AlexWalker - Dec 11, 2012 |
573 |
by nagydarab
»»
May 22, 2018 6:54 AM |
|
» Nézted vagy nem?[JÁTÉK] ( 1 2 3 4 5 ... Last Page )Grandmagic13 - Nov 15, 2009 |
858 |
by pintergreg
»»
Apr 28, 2018 1:12 PM |