Návod jak stylovat Drupal s využitím CSS3

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:

• Firebug
• CSS3 Generator
• CSS3 Gradient Generator