Začínáme s Warp Framework 6
V dnešním článku si nastíníme základní strukturu Warp Framework od YOOtheme a něco málo si povíme o možnostech editace YOOtheme Master pro vlastní potřeby. Pokud nevíte, co to Warp Framework je, doporučujeme Vám si přečíst náš článek YOOtheme Warp Framework. Jedná se o ideální template framework pro Joomla! nebo WordPress redakční systém, který je pod GNU/ GPL licencí a je tedy volně k dispozici ke stažení ze stránek společnosti YOOtheme GmbH.
Oficiální dokumentace pro YOOtheme Warp Framework je také k dispozici k prostudování v anglickém jazyce na webových stránkách výrobce, tedy na www.yootheme.com. V základní struktuře YOOtheme Master po rozbalení nalezneme následující výpis souborů a složek. U některých souborů a složek si popíšeme k čemu slouží:
| css | Složka, která obsahuje veškeré CSS nastavení šablony (nejedná se o základní styly z Warpu). |
| fonts | Složka, která obsahuje veškeré webové fonty, které je možno použít v šabloně (Neobsahují českou diakritiku). |
| html | Složka slouží jako standardní Joomla! override pro přepis. |
| images | Složka, která obsahuje veškeré grafické prvky šablony. |
| js | Složka obsahující JavaScript soubory pro šablony. |
| layouts | Složka, která obsahuje v základu module.php, template.config.php a template.php, ve které můžeme upravit základní (výchozí) rozložení šablony. |
| styles | Složka sloužící jako override pro vytvoření dalších stylů. Zde můžete přepisovat výchozí layout, css styly, js šablony apod. |
| warp | Samotná složka Warp Frameworku, ve které lze také nalézt override přepisy výchozích Joomla! modulů, CSS styly a mnohé další. |
| component.php | Slouží pro zobrazení výstupu komponenty s html (&tmpl=component), kde není žádoucí výstup šablony. |
| config.default | Výchozí konfigurační nastavení Warpu. |
| config.php | Výchozí konfigurační soubor Warpu určující odkud bude načítat další části systému jako je layout apod. |
| config.xml | Základní XML soubor, obsahující informace pro konfiguraci šablony v administraci. |
| error.php | Soubor sloužící pro generování vzhledu chybové stránky. |
| changelog.php | Soubor obsahující popis změn a oprav, jež byly provedeny v dané verzi Warp Framework. |
| checksum | Soubor, který obsahuje výchozí velikosti výchozích souborů YOOtheme Master. |
| index.php | Základní soubor šablony / Warp Frameworku. |
| offline-php | Soubor sloužící pro generování vzhledu odpojené (offline) stránky. |
| raw.php | Slouží pro zobrazení čistého výstupu komponenty bez html tagů. |
| templateDetails.xml | Výchozí soubor, ve kterém jsou evidované základní složky a soubory Warpu, včetně dostupných modulových pozic v šabloně. |
V této první kapitole nás budou především zajímat složky css, js, layouts, images, styles a soubory jako je config.xml a templateDetails.xml, ve kterých budeme provádět základní úpravy jako je rozložení modulových pozic nebo naopak přidání nové pozice.
Vytvoření nového stylu
Pokud chceme vytvořit nový styl v šabloně, je nutné provést několik následujících kroků, které jsou nedílnou součástí. Vytvoříme například styl s názvem "space", který je nutné mít v adresáři style a měl by tedy vypadat asi takto styles/space a máme nově vytvořený styl nebo respektive základní složku pro styl, do které posléze vkládáme naše upravené CSS soubory.
Vytvoření nového rozložení (layout) šablony
V námi vytvořené složce "space" vytvoříme složku layouts, do které potom budeme vytvářet jednotlivé override výchozí šablony a tedy by měla cesta vypadat asi takto styles/space/layouts.
Ten samý postup platí pokud budeme přepisovat js soubory nebo např. css soubory a jiné. Vždy je potřeba vytvořit základní kmenovou složku ve "styles" a tedy např. pro css bude cesta vypadat takto styles/space/css, do té potom vložíme např. layout.css nebo base.css, toolbar.css a jiné další css soubory.
- styles/space/layouts/ (Rozložení šablony, HTML, PHP)
- /styles/space/images/ (Obrázky šablony)
- /styles/space/css/ (CSS soubory šablony)
- /styles/space/js/ (JavaScript soubory šablony)
Důležité: Například pokud vytváříme nové css soubory ve stylu, vždy bychom se měli ujistit, že máme správně naparsované cesty k základnímu css a to například takto:
@import url(../../../warp/css/layout.css);
kdy se po vložení tohoto kódu odkazujeme na výchozí layout.css soubor samotného Warp Framework ve složce "warp".
Jakmile máme náš nový styl hotov a chceme ho aktivovat, stačí potom v administraci u profilu zvolit náš požadovaný styl a dát uložit.
V pokračování si představíme možnost, jak snadno vytvořit nové modulové pozice nebo vlastní styl pro modul.
Joomla
Služby
Portfólio
Blog
Produkty
Ke stažení
Licence
Kontakt