Soubory šablony
Z Developer Wiki
Obsah |
Soubory šablony
Vlastní šablonu nemusíte vytvářet úplně od začátku. Můžete si stáhnout jednu z našich šablon, která Vám vyhovuje rozložením a upravit ji. Cílem je upravovat hlavně CSS, případně JavaScript nebo HTML kód. Vzhledem k faktu, že šablony mají různé autory, odlišuje se i jejich HTML kód. Šablonu stáhnete v administraci ve Vzhledu webu. V nabídce šablon klikněte ikonu 
Stáhnout šablonu.
Šablonu z Webnode stáhnete zabalenou v souboru ZIP. Stáhnout si můžete i ukázkovou šablonu Média:simple-theme-blue.zip, která byla předlohou pro tento manuál. Rozbalená šablona obsahuje několik složek a souborů. Ukázková struktura souborů šablony je na obrázku 3. Ve složce css najdete všechny soubory kaskádových stylů, složka je povinná. Všechny obrázky k šabloně ukládejte do složky img, složka je povinná. JavaScriptové soubory ukládejte do složky js, složka není povinná, pouze její název.
Složka formatters obsahuje tzv. formátovače. Jde o XML soubory, které upravují funkčnost a formát jednotlivým blokům vkládaných Webnode, tzn. že upravují generovaný HTML kód. Složka není povinná, může mít jiný název, stejně tak i názvy formátovačů jsou volitelné.
Složka variants obsahuje HTML soubory variant rozložení stránek šablony. Šablona může mít několik variant rozložení sloupců, každá varianta může mít jiné barvy nebo obrázek v hlavičce. Varianty jsou samostatné vzhledy stránek, které mohou mít společné formátováče, kaskádové styly a JavaScriptové funkce, nebo pro každou variantu vlastní soubory, případně jen některé soubory a formátovače. Některou z variant lze nastavit jako domovskou a bude použita pro domovskou stránku prezentace. Ve složce jsou kromě HTML souborů také obrázky s náhledy rozložení sloupců stránky. Náhledy rozložení si můžete vytvořit i vlastní. Máme připraveno na 44 různých obrázků variant rozložení sloupců stránky, můžete si je stáhnout v souboru Média:variant-template.zip.
Nejdůležitějším souborem celé šablony je config.xml. V tomto souboru se konfiguruje celá šablona:
- formátovače a jejich umístění
- zapisují zde varianty šablony
- nastavuje se varianta pro domovskou stránku
- výchozí rozložení stránek šablony (index.html)
- náhled šablony (rubicus.jpg)
- kaskádové styly pro WYSIWYG editor (wysiwyg.xml)
Kaskádové styly
Složka css je povinná a slouží pro ukládání souborů kaskádových stylů. Složka může obsahovat libovolné podadresáře. Každá varianta šablony může mít vlastní soubor kaskádových stylů, např. style.css a style2.css. Odděleně se mohou zapisovat kaskádové styly pro tisk stránek např. print.css.
JavaScript
Soubory s JavaScriptovým kódem mohou být stejně jako kaskádové styly rozdílné pro každou variantu. Soubory se ukládají do složky js, která není povinná, ale její název ano. Složka může obsahovat libovolné podadresáře. Při psaní JS funkcí můžete využít JavaScriptové knihovny prototype.js verze 1.5.0 RC1, kterou Webnode využívá a je tak k dispozici.
Obrázky
Všechny obrázky, které jsou součástí šablony, ukládejte do povinné složky img. Složka může obsahovat libovolné podadresáře. Uživatelé se často ptají jak změnit obrázek v záhlaví stránek, tzv. ilustrační obrázek. Jsou dvě možnosti jak ilustrační obrázek změnit.
První jednoduší možností je změnit ilustrační obrázek v administraci Webnode. V nastavení webu vyberete nabídku Hlavička webu. V okně Hlavička je položka Ilustrační obrázek, kde si můžete ilustrační obrázek změnit. Jsou zde uvedeny doporučené rozměry obrázku. Pokud použijete větší obrázek, zobrazí se pouze jeho výřez. Proto obrázek předem ořízněte nebo zmenšete na doporučenou velikost.
Druhou možností je stáhnout si vybranou šablonu do počítače a ilustrační obrázek illustration.jpg (nejčastěji formát JPG) ve složce img změnit.
Import šablony
Nově vytvořenou nebo upravenou šablonu importujeme do Webnode zabalenou v souboru ZIP. Než přistoupíme k zabalení souborů šablony zkontrolujeme názvy soubor a složek, zda neobsahují znaky s diakritikou a mezery. Diakritiku odstraníme a mezery nahradíme pomlčkou. Šablonu nedáváme do žádné další složky, ale zazipujeme přímo její soubory a složky (soubor config.xml musí být v kořenu ZIP souboru). V nastavení Vzhledu webu klikněte na nabídku Šablony a vyberte Importovat šablonu. V nově otevřeném okně klikněte na tlačítko Procházet a zvolte ZIP soubor šablony, který chcete importovat do Webnode. Klikněte na tlačítko Nahrát. Webnode nahraje šablonu a při jejím rozbalování provede validaci souborů šablony. Jestliže validátor nalezne chybu v souborech, upozorní na ni hlášením. Pokud je šablona úspěšně importována do Webnode, najdete ji v nabídce šablon pod složkou Moje šablony.
