Tvorba témat vzhledu pro Drupal předpokládá základní znalosti práce s CSS3. Neustále se setkávám s lidmi, kteří tvrdí, jak mají CSS v malíčku, ale přitom nejsou schopni nastylovat dodanou HTML strukturu. Pokud patříte mezi ně, pak mám pro vás špatnou zprávu - CSS neumíte a je potřeba, abyste se v něm nějak zdokonalili. Protože stylování Drupalu a tvorba jeho témat vzhledu je právě o tom - Drupal vám generuje nějakou HTML strukturu a vy ji musíte upravit pomocí kaskádových stylů.
Samozřejmě, Drupalem generované HTML je možné ovlivnit, dokonce celou řadou způsobů. Ale to je až druhá fáze, kdy potřebujete upravit výstupní kód tak, aby odpovídal prvkům v zadání grafiky webu. Pokud nebudete schopni stylovat generovaný kód, pak se daleko nedostanete. Jinými slovy, zapomeňte na to, že si začnete skládat kousky HTML a k nim psát (nedejbože) inline styly. To je cesta do pekla.
Stylování Drupalu
Pokud jsem vás předchozími dvěma odstavci neodradil, vítejte v ukázce stylování témat vzhledu pro redakční systém Drupal. Jestliže CSS opravdu umíte a nemáte problémy s tím, co jsem popsal výše, pak pro vás bude úprava grafiky Drupalu jednoduchou a rutinní záležitostí. Zbývá jen najít odrazový můstek.
Když se podíváte na jakýkoli web s Drupalem, najdete ve vytvořeném HTML celou řadu shodných prvků. Drupal používá pro své uzly a bloky určitý systém tříd, které doplňuje nejčastěji do značek DIV. Jejich přehled najdete například v mé knize o Drupalu 7 nebo přímo na webu drupal.org v sekci s dokumentací.
Ze začátku si určitě nezapamatujete úplně z hlavy, že uzly mají třídy .node .node-teaser či .node-type-XXX, podle toho, v jakém režimu se nacházejí či jakého jsou typu. Stejně tak u bloků časem zjistíte, že každý z nich má DIV se třídami .block a .block-název-mateřského-modulu.
Na následujícím videu jsem se pokusil naznačit, jakým způsobem můžete potřebné třídy zjišťovat a jakým způsobem s nimi pak můžete pracovat při definici CSS. Vybral jsem jednoduchou ukázku nastylování bloku zobrazujícího poslední anketní otázku. Vše je demonstrováno na živém webu, tu na Maxorlovi.
K čemu je dobré CSS3
A proč je v článku zmíněno CSS3? V návodu jej používám k vytvoření zaoblených rohů a k nastavení přechodové výplně. Nové verze webových prohlížečů s tím již nemají problém, proč tedy tohoto zjednodušení nevyužít. Vám, coby tvůrcům webu, odpadne zdržování s výřezem přechodů a zaoblených rohů z Photoshopu, návštěvníkům webu zase ušetříte přenosovou kapacitu, protože nepracujete s žádnými obrázky, vše si vykreslí sám prohlížeč.
Návod na stylování Drupalu
Nyní tedy již slíbený návod. Jako vždy, ocením zpětnou vazbu, ať už ve vztahu k tématu nebo ke kvalitě videa.
Na závěr ještě dovolte seznam odkazů na stránky či nástroje, které zmiňuji ve videu:
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
Rádo se stalo :-)
Dobrý den,
moc děkuji za návod, pomohlo mi to trochu proniknout do úpravy vzhledu drupalu. Anketu jsem si pomocí CSS3 upravil k obrazu svému a to nejen v bloku, ale i v "node" - viz stránky: www.zupabudecska.cz . Bohužel jedinou vadu tu má tu, že po IE9 nefunguje kód vložený z CSS3 Gradient Generator, nebo někdě dělám chybu, nevím.
Video je natočené opravdu dobře a dle mého názoru ho musí pochopit naprosto každý.