Jak zrobić własną skórkę do Drupala? [PHP, CSS]

Instalujemy kopię prostej skórki

Domyślna skórka Drupala 6 to Garland. Jest ona jednak dość skomplikowana – znajdziemy więc prostszą. W standardowej instalacji wersji 6.x otrzymujemy prostą i przejrzystą skórkę bluemarine. Skopiujmy jej podkatalog do katalogu /sites/all/themes, w którym powinniśmy trzymać wszystkie własne skórki.

Znajdziemy w katalogu (którego nazwę zmieniliśmy na taką, jaką planowaliśmy dla naszej skórki) następujące pliki:

block.tpl.php – szablon definiujący wygląd bloków,
bluemarine.info – plik zawierający informacje o skórce potrzebne CMS-owi,
box.tpl.php – plik definiujący wygląd boksów,
comment.tpl.php – plik definiujący wygląd komentarzy,
logo.png – logo witryny w formacie PNG,
node.tpl.php – plik definiujący wygląd segmentów (wybaczcie to określenie, ale zostało przyjęte przez polską społeczność Drupala),
page.tpl.php – plik definiujący wygląd strony; jeden z głównych plików skórki,
screenshot.png – zrzut ekranu demonstrujący wygląd skórki, raczej dla innych użytkowników (jeśli zdecydujemy się skórkę upublicznić),
style.css – kaskadowy arkusz stylów, definiujący reguły dla całej skórki; jeden z głównych plików,
style-rtl.css – plik CSS dla języków takich jak arabski czy hebrajski (pisownia od prawej do lewej).

Nazywamy nową skórkę

Zmieniamy nazwę pliku bluemarine.info na nazwaskorki.info, a następnie edytujemy go, zmieniając parametry name i description.

; $Id: nazwaskorki.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = Nazwaskorki
description = Skórka dla mojej witryny
version = VERSION
core = 6.x
engine = phptemplate

Zmieniamy arkusz stylów

W pracy nad skórką nieocenione okażą się dwa rozszerzenia dla Firefoksa – Firebug oraz Web Developer Toolbar. Dzięki nim możemy przetestować takie atrybuty w poszczególnych klasach, jakie będą nam odpowiadały. W menu Information wybieramy Display ID and Class Details, aby widzieć, które z klas odpowiadają za które elementy strony.

Modyfikujemy zawartość szablonów

Szablony Drupala to zwykle kod w PHP, który steruje wyświetlaniem zmiennych engine'u PHPtemplate. Poniżej przedstawiamy listę najważniejszych zmiennych:

$head – nagłówek strony HTML,
$head_title – nazwa strony,
$logo – ściezka do pliku graficznego z logo,
$mission – misja strony,
$site_slogan – slogan wyświetlany przez stronę,
$content – treść HTML wygenerowana przez Drupala,
$primary_links – tablica zawierająca linki,
$secondary_links – tablica zawierająca drugorzędne linki,
$breadcrumb – HTML wyświetlający ścieżkę nawigacyjną,
$footer_message – wiadomość wyświetlana w stopce,
$tabs – HTML wykorzystywany do wyświetlania kart u góry strony,
$sidebar_left – HTML lewego paska bocznego,
$sidebar_right – HTML prawego paska bocznego,
$searchbox – pasek wyszukiwania
$closure – domknięcie skryptów

Ich pełna lista dostępna jest na stronie drupal.org/node/11812.