27 kommentek Írta admin on január 19, 2010 – 10:46 du.

Sokan hiányolták már, hogy MyBB sablonkészítéshez nem készült eddig részletes magyar nyelvű leírás, elkövetkezendő írásaimban igyekszem ezt a hiányt pótolni. Teljesen az alapoktól kezdem a bemutatást, így aki most ismerkedik a rendszerrel annak is érthető lesz, viszont feltételezek egy kis HTML, valamint CSS tudást.

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 (612).

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.