Na oficiálním webu Grav CMS je k dispozici několik šablon webu, které lze ihned použít pro různé projekty, aniž by je bylo třeba dále jakkoliv upravovat. V praxi ale obvykle nastanou případy, kdy jsou případné drobné úpravy žádoucí, např. změna rodiny písma, jeho velikosti a barevnosti, popř. je potřeba přidat zcela nové stylování, např. formátování tabulek, úprava netříděných seznamů, zarovnání obrázků a prvků formuláře. Pokud nepoužíváme vlastní šablonu, ale rozhodneme se pro některou z nabízených, máme v zásadě tři možnosti, jak postupovat.
První možností je vytvoření kopie šablony webu, tedy její přejmenování, čímž získáme identicky klon dané šablony webu, která ale bude žít vlastním životem pouze na našem webu. Můžeme ji libovolně upravovat, aniž bychom riskovali, že při vydání nové verze originální šablony webu dojde k jejímu přepsání při aktualizaci. Na druhou stranu má tato varianta zásadní nevýhodu právě v nemožnosti případné aktualizace, o kterou se připravíme, neboť s původní šablonou webu nemá již nic společného. Pokud je k dispozici nová verze šablony a chceme využít nově přidané prvky, pak musíme obě šablony zkombinovat, buď stažením nové verze šablony webu a nahrazením příslušných kódů těmi, které jsme upravili, nebo naopak nakopírováním nových kódů do naší stávající šablony webu. Obojí je poměrně pracné a riskujeme, že něco opomeneme, přepíšeme si omylem upravené kódy apod. Tato varianta je tedy možná, ale nikoliv ideální.
Druhou možností je vytvoření dědičné šablony webu, což je úžasná věc, kterou Grav obdobně využívá i u dalších systémových nastavení, např. pro přepis výchozích hodnot v system.yaml, ale i u nastavení doplňků, kdy originál zůstane nedotčený. Prakticky to znamená, že máme originální šablonu webu, na kterou je navázána dědičná šablona webu. Tato dědičná šablona webu je nastavena jako aktivní, přičemž ale odkazuje na originální šablonu webu. Grav primárně použije originální šablonu webu, z níž si vezme veškeré kódy, poté pak sekundárně projde dědičnou šablonu webu a všemi v ní dostupnými upravenými kódy nahradí, resp. přepíše (override) všechny kódy v originální šabloně, myšleno pochopitelně na úrovni souborů. Jinými slovy mají kódy, resp. soubory obecně, v dědičné šabloně webu vyšší prioritu než ty v originální šabloně webu. V čem je výhoda uvedeného? Jednoduše řečeno v tom, že máme striktně oddělené kódy v originální šabloně webu, které můžeme s klidným svědomím aktualizovat, a v dědičné šabloně webu, v níž máme upravené kódy. Samozřejmě ani v tomto případě se nevyhneme případné aktualizaci, zejména šablon stránek, pokud to budeme potřebovat, ale je to schůdnější a přehlednější.
O dědičných šablonách webu se píše např. v těchto článcích:
Kopii šablony webu i dědičnou šablonu webu lze vytvořit ručně, nicméně to vyžaduje znalost potřebných nastavení, aby s nimi dovedl Grav pracovat. Jednodušší a profesionální řešení je použít doplněk DevTools, který vše provede automaticky podle kritérií zadaných na úrovni příkazového řádku. To je však nad rámec tohoto článku, opět tedy případný příslib do budoucna, že se k tomu případně vrátím.
Třetí možností je ponechání originální šablony webu a doplnění vlastních kódů do souborů, které nekolidují se soubory použitými v šabloně webu. Potenciálním rizikem zůstává, že se trefíme do názvů souborů, které autor použije v budoucnu, ale jsou možnosti, jak se tomu vyvarovat. Pojďme se tedy podívat, jak tuto možnost uplatnit v praxi.
Upozorňuji, že tato varianta by se měla používat pouze okrajově a pro drobné úpravy, jinak doporučuji některou se shora uvedených variant, popř. použití vlastní šablony webu.
Aktualizace 24. 9. 2023: Profesionálnější řešení je prezentováno v článku Doplněk Custom CSS, ale na rozdíl od zde uvedeného řešení, které si vystačí s výchozí instalací, musíme nainstalovat uvedený doplněk.
Předpokládám, že primárně budeme chtít přidat vlastní styly. V příslušné složce šablony webu, např. /assets/css, vytvoříme soubor custom.css, tj. výsledně se bude nacházet na cestě /user/themes/nazev-sablony-webu/assets/css/custom.css. V tomto souboru provedeme potřebné zápisy stylů, ať již nově přidaných, popř. těch, které chceme přepsat. Nyní musíme Gravu sdělit, že daný soubor existuje, resp. že s ním má pracovat. Grav CSS soubory, stejně tak jako jakékoliv jiné soubory, zpracovává na základě jejich umístění do šablon stránek, obvykle pak hlavní šablony stránek, kterou je base.html.twig uložená ve složce /user/themes/nazev-sablony-webu/templates/partials, ovšem záleží na použité šabloně webu. Pokud bychom ale upravili tento soubor, existuje reálná šance, že bude v budoucnu přepsán při aktualizaci a my o provedené změny nevratně přijdeme. Položme si tedy nerudovskou otázku: Kam s ním? Ačkoliv by styly a skripty měly být přednostně umísťovány do elementu <head>, není vyloučeno jejich použití kdekoliv v rámci <html>, tedy i přímo v elementu <body>. Z toho dovodíme, že odkaz na soubor custom.css umístíme na začátek obsahu stránky. Tím navíc docílíme toho, styly v souboru custom.css přepíší výchozí styly šablony webu, neboť jsou uplatněny později, v krajním případě použijeme prioritu !important.
HTML kód vypadá následovně:
<link href="/user/themes/nazev-sablony-webu/assets/css/custom.css" type="text/css" rel="stylesheet">V případě modulární stránky dojde k escapování znaků a link se vypíše jako text. Řešením je umístit je jej přímo do jednotlivých modulů, resp. stačí pouze do prvního vykreslovaného.
Jedinou nevýhodou je, že se musí styly vkládat do obsahu všech stránek, které chceme modifikovat. Dá se ale předpokládat, že takto budeme spravovat pouze web o malém počtu stránek a současně, že tak učiníme pouze jednou a následně se budou změny provádět pouze na úrovni souboru CSS.
Grav po uložení stránky hlásí potenciální riziko XSS, nicméně pokud používáme interní odkaz a obsah máme pod plnou správou, můžeme hlášku ignorovat.
Vraťme se nyní k možnostem, jak zabránit konfliktu názvů při pozdější aktualizaci. V našem případě jsme použili soubor custom.css, který nebyl v šabloně použitý, ale může se stát, že jej tam autor později doplní, čímž se náš soubor přepíše. Malá pravděpodobnost, ale přeci existuje. Lepší je tedy použít nějaký unikátní název, např. mojestyly.css, gravczcustom.css apod., u něhož je evidentní, že jej nikdy autor nepoužije. Nebo lze soubor CSS umístit do vlastní složky, ideálně opět s jedinečným názvem, např. /user/themes/nazev-sablony-webu/my-custom-css/custom.css.
Doplním, že do obsahu stránky lze vložit CSS prostřednictvím tagu <style>, ale tím se připravujeme o centrální správu. Nicméně, pokud chceme upravit pouze konkrétní stránku, je to také cesta.
Uzavírám, že uvedené řešení prezentuje jistou možnost, jak jednoduše obejít výchozí formátování a nahradit jej vlastním. U komplexních řešení, které nabízejí první dvě uvedené možnosti, bychom však měli používat správu na úrovni šablon stránek, konkrétně pak šablony stránky base.html.twig, a uplatnit všechny výhody, které poskytuje Asset Manager. To je velmi sofistikovaný nástroj, jehož podrobný popis je však opět nad rámec tohoto článku, tak třeba někdy v budoucnu.
Aktualizace 24. 9. 2023: Uvedené doplňuje článek Doplněk Custom CSS, který umožňuje provést totéž, a to mnohem jednodušeji a výhodněji, ale za cenu použití doplňku.
Nalezli jste v článku chybu, ať již gramatickou nebo faktickou? Článek prošel pouze autorskou korekturou a drobné nedostatky, jako překlepy nebo chybný slovosled, se v něm mohou vyskytovat. Pokud je objevíte, pomozte příspěvek upravit oznámením přes kontaktní formulář nebo na e-mail. Budou vám vděčni nejen autoři, ale zejména ostatní čtenáři.
Pomozte Grav.cz prolinkovat. Projekt Grav.cz se za dva roky provozu rozrostl a ve starších příspěvcích na Blogu mohou být uvedeny pasáže, které by stálo za to prolinkovat na konkrétní související řešení, která jsou uvedena v následujících příspěvcích. Pokud takové objevíte, pošlete informaci přes komunikační kanály uvedené v předchozím nebo následujícím odstavci.
Diskuze k článku není k dispozici. Pokud ale máte k tématu článku podněty, připomínky nebo dotazy, je možné je sdělit ve skupině na Facebooku, kde se k nim vyjádří nejen autor, ale případně i další diskutující.