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

V mailech i komentářích pod články se často ptáte, jak se pustit do stylování Drupalu. Nemůžete se zorientovat ve vygenerovaném HTML ani v připravených šablonách. Je to přitom snadné. V návodu se podíváme, jak připravit vzhled bloku s poslední anketou, přičemž využijeme úpravy pomocí CSS3.
reklama

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:

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

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ý.

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru