PostNuke - Upravujeme motiv : nová klasika z ExtraLite

A jdeme na to!
Vše potřebné jsme řekli a můžeme se pustit do tvorby vlastního motivu - v tomoto článku se bude jednat o klasický motiv a jako základ využijeme ten nejjednodušší pod názvem ExtraLite.

Nový motiv snadno a rychle

Chcete-li si vytvořit nový klasický motiv, pak stačí, když si v adresáři themes vytvoříte kopii složky ExtraLite a pojmenujete si ji dle svého uvážení (doporučení, aby název byl tvořen pouze alfanumerickými znaky, považuji za urážku vašich schopností ;-) ) - například MujMotiv.
Pak již stačí v rámci administrace přejít do Nastavení a v seznamu Výchozí motiv vzhledu pro tyto stránky zvolte nový motiv (my ho nazvali MujMotiv). Po uložení již pracujete s novým motivem.
Předpokládejme, že jste tak snadný postup nečekali. Nicméně přece jen vás čeká ještě jedna úprava - nastavení ikon pro sekce a témata (adresáře images/sections a images/topics). Vše však záleží na nastavení příslušných modulů.

Úprava obrázků a kaskádního stylu v praxi 

Chcete-li si vyzkoušet úpravu obrázků, moc možností nemáte (ne nadarmo se příslušný motiv nazývá ExtraLite). Máte-li aktivní modul Statistiky, pak si můžete danou změnu prozkoušet. Přejděte do adresáře themes/MujMotiv/images a upravte obsah souboru leftbar.gif. Po uložení si zobrazte statistiku a výsledek své úpravy ihned uvidíte.
Co se týče úpravy kaskádních stylů, postup je obdobný. Otevřete soubor themes/MujMotiv/images/style.css a upravte například definici u body tak, aby text byl tmavě červený (color: #990000;). Pak stačí aktualizovat stránku.

Upravujeme základní šablonu

Od PostNuke verze .76 motiv ExtraLite využívá i jednoduchou šablonu. Najdete ji v adresáři themes/tempates/modules/Header_Footer/header_footer_page.htm. Otevřete si ji a můžeme vyzkoušet jednoduchou úpravu 4.řádku, který obsahuje tag title. Vepište místo Smarty funkce libovolný text. Pak postačí pouze aktualizovat stránku a příslušnou změnu naleznete v záhlaví okna.
Po tomto pokusu si projděte celou šablonu a zkuste se soustředit na umístění různých Smarty funkcí a proměnných. Rozhodně vám to pomůže při úpravách motivů typu xanthia.

Definici barev najdeme v theme.php

A přichází na řadu poslední, ale pro klasický motiv nejdůležitější, soubor - theme.php. Hned na začátku si dovolím důležitou poznámku - jedná se o soubor php, nikoliv html! Takže požadavek na alespoň základní dovednosti práce s php jsou na místě.
Definice barev najdete hned v úvodní části, jedná se o proměnné $bgcolor1 ... $bgcolor5 (pět základních barev, vetšinou používané pro rámečky nebo výplně či pozadí), $textcolor1 ... $textcolor2 (barvy, určené pro text) a $sepcolor (využívaný velmi zřídka jako oddělovač).
Vyzkoušejme si změnu barvy $bgcolor1 ..., nastavme ji třeba na #FFFF99 a uložme. Po aktualizaci stránky se změna ihned projeví.
Sice na první pohled by se zdálo, že se upravila barva pozadí celé stránky (vlastnost background-color u objektu body), ale není tomu pravda. V souboru theme.php najděte řádek 73 a v něm najdete objekt buňka v tabulce (tag td) a u něj zápis vlastnosti background-color s využitím globální proměnné $GLOBALS[bgcolor1]. Je zřejmé, jak tuto globální proměnnou využít i pro jiné barvy.

Šablony jako funkce v souboru theme.php

Máme před sebou poslední, nejnáročnější, ale také nejzajímavější práci při úpravě vlastního stylu. V rámci souboru theme.php jsou definovány následující funkce:

• OpenTable() a CloseTable() je využíván v různých modulech pro vytvoření rámečku. Všimněte si, že tento rámeček se odkazuje na css třídu box1. Stačí si tedy otevřít soubor style.css a upravit příslušné vlastnosti a ihned zjistíte, kde se příslušný rámeček používá.
• OpenTable2() a CloseTable2() má obdobné využití jako u předchozího případu, pouze s tím rozdílem, že je využívá css třídu box2.
• themeheader() generuje záhlaví celého webu. V tomto kódu stojí za několik věcí:
  
  • již dříve zmíněné využití globální proměnné pro barvy
  • definice formuláře pro vyhledávání (objekt form)
  • využití proměnné pro různé jazyky (proměnná _SEARCH, kdy její "překlad" najdete v souboru language/ces/core.php, případně language/eng/core.php pro anglickou verzi)
  • funkce blocks('left') a blocks('centre'), což jsou funkce, které následně doplní levé a centrální bloky
  
  
• themefooter() pro změnu generuje zápatí všech stránek. I zde najdete funkci blocks, tentokrát pro pravý sloupec. Navíc je zde i funkce footmsg(), která zobrazí kód, který je zapsán v rámci hlavního nastavení webu pod názvem Zpráva v zápatí.
• themeindex(...) umožňuje upravit vzhled seznamu článků a to nejen na úvodní stránce, ale i při zobrazení článků z konkrétního tématu. Zde již je kód poněkud složitější, protože v této šabloně je nutné používat nemalé množství proměnných (název článku, autor, odkaz na celý článek apod.). Chcete-li znát přesnější význam proměnných, najdete jejich definice v souborech modulu News, konkrétně v souboru modules/News/funcs.php. Zde najdete funkce genArticleInfo($row), genArticleLinks($info) a genArticlePreformat($info, $links).
• themearticle(...) má obdobnou úlohu jako předchozí funkce, pouze je určena pro zobrazení jednoho konkrétního článku.
• themesidebox($block) určuje vzhled bloku. Jedná se sice o poměrně jednoduchý kód, ale je hodný podrobnějšího popisu. Narazí-li totiž překladač stránek z php do html na požadavek "vykreslení bloku", pak použije právě tuto funkci. Přitom:
  
  • v prvním řádku se zjišťuje, zda se jedná o centrální blok ($block['position'] == 'c')
    
    • pokud byla splněna podmínka, zjišťuje se, zda není prázdný titulek bloku (!empty($block['title']))  vykreslí se záhlaví bloku pomocí css třídy centerblock.
    • v opačném případě se nevykreslí žádné záhlaví (kód totiž neobsahuje příkaz else)
    • nakonec se vykreslí obsah bloku (echo $block['content']) při využití css třídy centerblock.
    
    
  • pokud v prvním řádku nebyla splněna podmínka, pak se jedná buď o levý nebo o pravý blok. V takovém případě se vykreslí záhlaví bloku (echo $block['title']) a to včetně nástroje pro shrnutí nebo rozhrnutí bloku ($block['minbox']).
    Následně se vykreslí obsah bloku (echo $block['content']).
    V obou případech se přitom použije css třída sideblock.
  • Drobná poznámka: Chcete-li odlišit, zda se jedná o levý nebo pravý blok, pak použijte podmínku a kontrolujte, zda $block['position'] == 'l', případně $block['position'] == 'r'. Pokud chete odlišovat vzhled bloku podle titulku, pak podmíňujte generování kódu sledováním obsahu proměnné $block['title'].
  
  

---

A tímto jsme možnosti úpravy vzhledu klasického motivu vyčerpali. Dalo by se říci, že jde upravit vzhled záhlaví a zápatí, jednotlivých bloků a seznamu článků či článku samotného. Vzhled ostatních modulů a stránek bohužel neovlivníte, pokud byste nezasahovali přímo do kódu, což vůbec nedoporučuji.
Nicméně nic není ztraceno - xanthia motivy mají mnohem větší možnosti a je-li navíc modul sepsán pomocí šablon, pak jsou možnosti úprav prakticky neomezené.