Rendszeresen megkeresnek azzal a kéréssel, hogy hogyan kell egyedi Drupal sminket készíteni, mert nem akrarnyak egy már elkészített contrib fejlesztést használni.
Én is általában azt szoktam javasolni, hogy inkább készítsük el saját magunk a meglévő psd alapján a sminkünket, mert igaz az esetek legtöbbségében meg lehetne oldani valamely már meglévő fejlesztés css-ének módosításával, de az mégsem az igazi. Egyrészt azért, mert a contrib sminkek több dologra vannak felkészítve mint amire nekünk szükségünk van, másrészt a végeredményben úgyis egy 3000 soros css-t kapunk amiben egy rakás osztály, vagy id több helyen van definiálva. Másrészt ahogy a contrib modulokba se szokás beleirkálni, szerintem a sminkeket se kell piszkálni.
Ha saját sminket készítünk, saját tpl és css fájlokkal akkor ezek a problémák kiküszöbölhetőek, és nem egy ördöngös feladat.
Leszögezném, hogy ez a bejegyzés csak az alapokról szól, nagyon sok egyéb dologra felkészíthetjük a sminkünket, pl: $logo, $site_slogan, $mission, $search_box stb. Az elérhető változókat itt lehet megnézni.
Az első lépés az, hogy a psd alapján végig kell gondolnunk, hogy milyen régiókra lesz szükségünk. Persze könnyen lehet, hogy az alapértelmezett régiók bőven elegendőek, de általában nekem újakat kell létrehoznom. Itt egy fontos megjegyzés az, hogy az alapértelmezett régiók elvesznek ha akár csak egy sajátot is létrehozunk, ha az info fájlba definiálunk régiót, akkor az összeset meg kell adnunk!
Miután ez megvan elkezdhetjük a sminkünk elkészítését, vagyis a fizikai fájlok létrehozását.
A saját sminkeket különítsük el a core sminkektől, ezért hozzuk létre a sites/all/themes könyvtárat és ide helyezzük a contrib, illetve a custom sminkeket.
Hozzuk létre a sminkemneve könyvtárat és abba készítsük a sminkemneve.info fájlt. Fontos megjegyzés, hogy az info fájlokat a rendszer cache-eli, így ha abba módosítunk valamit, akkor be kell menni az admin/build/themes könyvtárba és nyomni egy mentést, ekkor újra menti az info fájl tartalmát.
De hogy is néz ki egy info fájl? Erről egy teljesen részletes leírás található itt. Az alapértelmezett értékek pedig itt szerepelnek (itt láthatjuk pl a default régiókat).
Íme egy info fájl:
-
name = My theme's name
-
description = My theme's description.
-
version = VERSION
-
core = 6.x
-
engine = phptemplate
-
stylesheets[all][] = style.css
-
stylesheets[all][] = layout.css
-
scripts[] = scripts.js
-
regions[header] = Header
-
regions[left_slidebar] = Left sidebar
-
regions[left_banner] = Left banner
-
regions[content_top] = Content top
-
regions[in_top_of_content] = In top of content
-
regions[content] = Content
-
regions[right_slidebar] = Right sidebar
-
regions[right_banner] = Right Banner
-
regions[footer_top] = Footer top
-
regions[footer_bottom] = Footer bottom
Talán csak annyit fűznék még hozzá, hogy a regions tömb kulcsa lesz a page.tpl.php-ban elérhető változó ami az adott régió tartalmát adja vissza html string formában.
Ezután jöhet a page.tpl.php.
Ebben állítjuk össze magát a layout-ot, tehát létrehozzuk a szükséges div-eket a psd implementálásához.
Én így szoktam kezdeni:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
-
<head>
-
<?php print $head ?>
-
<title><?php print $head_title ?></title>
-
<?php print $styles ?>
-
<?php print $scripts ?>
-
</head>
-
<body class="<?php print $body_classes ?>">
Szerintem elég egyértelmű hogy mit is csinál, csak annyit fűznék hozzá, hogy a $body_classes változó egy csomó információt tartalmaz, pl hogy nyitólapon vagyunk-e vagy, be vagyunk-e jelentkezve vagy hogy mely régiókra lesz szükség. Ez szerintem hasznos lehet ha azt akarjuk hogy a sminkünk máshogy nézzen ki pl ha csak a jobb oldali slidebar létezik, vagy ha mind a kettő, esetleg egyik sem stb.
Ezután kezdjük el kialakítani a szükséges div-eket, ez nyilván a psd-től függ.
Jöhetnek a régiók! Ha nem akarjuk teleszemetelni üres div-ekkel a template-et akkor feltételek közé rakjuk hogy egy adott régiót körülvevő div megjelenjen, pl így:
-
<?php if ($left_slidebar) : ?>
-
<div id="left_slidebar"><?php print $left_slidebar ?></div>
-
<?php endif; ?>
Miután a div-ekkel megvagyunk, készítsük el a tabokat (view, edit stb), a rendszerüzeneteket (pl hibás felhasználónév) írassuk ki magát a content-et - esetleg az oldal címét is beletehetjük a page.tpl.php-ba:
-
<?php print $title ?>
-
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
-
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
-
<?php if ($messages): print $messages; endif; ?>
-
<?php print $content ?>
Végül egy fontos feladatunk van a page.tpl.php-vel, az pedig a $closure kiíratása:
-
<?php echo $closure; ?>
Ez azért fontos, mert sok modul ebbe pakol dolgokat, pl a WYSIWYG modul esetében azt érzékeljük, hogy egyszerűen nem jelenik meg az editor ha ez kimaradt a sminkfájlból.
Amint írtam van még egy csomó dolog amiket beletehetünk a sminkünkbe (és ha a közössésgnek készítjük a sminket akkor bele is kell rakni), ezen változók listáját itt lehet megnézni.
A page.tpl.php-n kívül még létre kell hozunk a block.tpl.php-t, a comment.tpl.php-t és a node.tpl.php-t. Ha az alap sminkfájlokat használjuk, akkor tökéletesen működik a sminkünk.
Persze ezeket is egyedileg testre kell szabi, ezeket is felosztjuk a megfelelő div-ekkel hogy olyan kinézetet kapjunk mint a psd-ben.
Van még egy fájl ami általában kell, ez pedig a template.php. Fontos, hogy az ebben definiált fügvények nevét cache-eli a rendszer, tehát ha egy új fügvényt deklarálunk akkor be kell menni az admin/build/themes oldalra és menteni kell.
