A MyBB Master Style az összes többi theme-re hatással van, így bármit is teszel hozzá, vagy törölsz ki belőle, az módosítja az összes telepített sablonodat. Ha ezen kívül bármelyiket szerkeszted, az csak az adott theme-re lesz hatással.

Kattintsunk a Default (Alapértelmezett) sablon melletti Opciók pontra. Az előugró menüben lévő lehetőségek a következők:

• Theme szerkesztése – itt tudjuk szerkeszteni a változtatni kívánt sablont
• Téma törlése
• Hozzárendelés a tagokhoz – kényszeríthetjük a rendszert, hogy minden regisztrált felhasználó ezt a sablont használja.
• Theme exportálása – módosított, vagy esetleg teljesen új sablonunkat exportálhatjuk vele xml fájlba

Maradjunk a “Theme szerkesztése” menüpontnál, ami a tényleges szerkesztőhöz visz minket. Egyből a stíluslapok tárulnak szemünk elé, amelyekkel fórumunk színét, betűtípusát, stb. módosíthatjuk.

Az alábbi fő stíluslapok vannak:

• global.css – ez a fő fájl, ami minden aloldalon érvényes lesz, ez határozza meg a fórum kinézetét.
• modcp.css – a Moderációs Vezérlőpult kinézetét határozza meg.
• star_rating.css – a fórumon található csillagos szavazórendszer kinézetéért felel.
• showthread.css – egy  topikon belül felel néhány dolog kinézetéért, például a legtöbbször az oldal alján található “Megtekintés Nyomtatható Verzióban” gombok megjelenítéséért.
• usercp.css – a Felhasználói Vezérlőpult stílusáért felel.

A stíluslapok alatt található néhány opció a sablonunkhoz, amivel lehetőségünk van többek között arra, hogy fórumunk logójának elérési útvonalát megváltoztassuk de ezen kívül azt is módosíthatjuk, hogy csak bizonyos csoportnak engedélyezzük ezen kinézet használatát.

A Globális stíluslap

A global.css szerkesztésével fogjuk eltölteni a legtöbb időt. Nézzünk is bele.
Gyakorlatilag az összes stíluslap szerkesztője ugyan úgy néz ki, egyedüli eltérés a “Válassz:” melletti legördülő listában van. A css fájlban található összes elem, osztály, id közül választhatjuk ki azt, amelyiket módosítani szeretnénk. Háttérszínt szeretnénk módosítani? Egyszerűen keressük ki a listából a body nevezetű elemet, amely az oldalunk törzsének kinézetéért felel és máris megváltoztathatjuk a “Background” mezőben található 6 jelű hexa kódot ízlésünk szerint. Csupán pár fő tulajdonság van, amit módosíthatunk a képen bal oldalt található részben, a többit megnevezéssel együtt a jobb oldali részbe beírni (például a margin:0;-t).

A következők találhatóak bal oldalt:

• background – háttér szín
• color – betűszín
• width – az adott elem szélessége
• font family – betűtípus
• font size – betűméret
• font style – a betű stílusa (pl.: dőlt)
• font weight – félkövérség mértéke, vagy ne legyen félkövér
• text decoration – szöveg dekorációja (pl.: aláhúzott)

Útmutatóm első részében írtam, hogy azoknak igyekszem segítséget adni, akik már valamennyire járatosak a sitebuild világában. Ha nem érted a leírást, akkor ne legyél rest, és keresd fel az alábbi oldalt: Online Sitebuilder Magazin.

A következő részben még jobban eldurvulnak a dolgok, úgyhogy érdemes lesz bővíteni, vagy feleleveníteni sitebuilderi ismereteidet!

Használjunk Firebug-ot

Kezdésként ajánlanám, hogy aki sablon készítésbe kezd, az töltse le és kicsit tanulgassa a Firebug használatát, amely a Firefox egy bővítménye. Internet Explorer alá sajnos nem lehet telepíteni.  Sitebuildereknek mondhatni kötelező darab, ezen cikk kereteiben nem térek ki a részletes használatára.

Miben nyújt segítséget?

A CSS fájl majdnem teljes (új szelektorokat úgy hozhatunk létre, ha a forrás css fájlba írjuk és elmentjük), valamint a HTML forrás részbeni módosítási lehetősége (pl. style elemek).

Ennyit dióhéjban a Firebug-ról, aki még nem használta az szánjon rá pár órát, érdemes foglalkozni vele.

A Sablon (Theme) megértése

Ahhoz, hogy látványos egyedi külsőt hozhass létre szükséged lesz képekre, változatos színű szövegekre és dobozokra.

A képeket a fejlécnél, logónál, gomboknál, táblázatok hátterénél, stb. használjuk.

A szükséges fájlok összegyűjtése

Ide tartoznak az előzőekben említett képek, ikonok, amelyeket vagy az internetről szerzünk be, vagy saját kezűleg hozunk létre. Segítségül még legyen a tarsolyunkban pár sablon, esetleg kódrészlet egyrészt ötletadásul, másrészt ha a böngészőkompatibilitási harcunk során valahol elakadnánk akkor ne kelljen este álmatlanul forgolódnunk az ágyban .

Dolgozzunk a képeken

Vegyük elő kedvenc képszerkesztő eszközünket, és az ötletek, valamint az összegyűjtött képek segítségével alkossuk meg design tervünket. (Photoshop, Gimp, Ms Paint, stb.). Photoshophoz ajánlom a MyBB Image GDK használatát, ami egy egyszerű PSD fájl, ami tartalmazza az alap sablon ikonjait MyBB Image GDK (574).

A fórumunkra tévedt látogató először a logót és vele együtt a fejlécet látja meg, így szánjunk arra órákat, hogy minél ütősebb logónk legyen. Itt érdemes lehet meghallgatni designer ismerősünk tanácsát is (már ha mi magunk nem vagyunk teljesen azok).

Következő pont maga a táblázatok átszerkesztése, háttérszínük módosítása az elkészített terv alapján, utána ehhez tudjuk a gombok színét és formáját igazítani. A gombokat az …/images mappában találjuk.

Fontos, hogy a táblázatok fejléce színátmenetes legyen, ha olyan fórumot szeretnénk, ami igazodik a különböző képernyő felbontásokhoz. Alkothatunk fix méretű sablont is, ha olyat szeretnénk.

A következő részben részletesen ismertetem a Theme Editor használatát, amellyel a megszerkesztett képeket a megfelelő helyre rakhatjuk. Segítség gyanánt a Firebugot fogom használni.

A cikk a http://community.mybboard.net/thread-5933-page-1.html oldalon található leíráson alapul.