20. 11. 2009

PostNuke - Upravujeme xanthia motiv : kaskádní styly

A máme zde poslední díl našeho seriálu. Předpokládejme, že zvládáte úpravu šablon, vytvoříte si vlastní grafiku a dokážete využít atributu style při definování "pevných" parametrů v rámci css. Nicméně nemálo modulů má vlastní css soubory a vy byste chtěli upravit jejich styly tak, aby "ladily" s vašim motivem.

Nulový styl

Při práci s css soubory existuje několik přístupů, my jsme si v rámci webu naší školy i tohoto centra zvolili cestu, kterou jsem si pracovně nazval "nulové css soubory).
Základní princip spočívá v tom, že nejprve obsah používaných css motivů u všech modulů přeneseme do samostatných php souborů v rámci našeho motivu. Tyto soubory jsou pak nedílnou součástí souboru themes/MujMotiv/styles/style.php. Jakmile máme přenesený potřebný kód, vymažeme u prvotních css souborů jejich obsah.

Ukázkový styl

Ukážeme si vše v praxi. Nejprve si stáhněte ukázkový xanthia styl s php. Jakmile si jej rozbalíte, zjistíte, že všechny css soubory mají nulový obsah. Pokud byste je tedy překopírovali na svůj web, rázem vynulujete používané css soubory, což dozajista bude mít vliv na celkový vzhled. POZOR! Týká se to všech stylů! - proto si raději nejprve všechny css soubory vyhledejte a zazálohujte, případně použijte náš výchozí styl.
Nicméně podívejte se na obsah adresáře themes/sweb-basic/styles/. Zde najdete nejen soubor style.php, ale i jiné soubory, jejichž obsahem je vcelku srozumitelný kód, víceméně shodný s původními obsahy příslušných css souborů. Důležitý však je i obsah souboru style.php, konkrétně jeho konec. Zde se pomocí funkce include načítají jednotlivé php soubory. Chcete-li si tedy vytvořit vlastní php soubor, případně odstranit ten nepoužívaný, pak musíte upravit i tuto část.

Upravujeme styl

K souborům php, které obsahují kaskádní styl, se musíme chovat jako k šablonám tak, jak jsme to popisovali u předchozích dílu. Tedy umístění šablon známe (themes/MujMotiv/styles/). Otázkou je, kde vznikají dočasné soubory - a tady je drobná změna, vzniká totiž pouze jeden soubor a to v adresáři pnTemp/Xanthia_Config pod názvem nazevmotivu.style.css.
Chcete-li tedy testovat úpravy stylu, doporučuji nejprve provádět změny v dočasném souboru. Jakmile jste se změnami spokojeni, přeneste je do příslušné šablony (php soubroru) a následně reaktivujte celý motiv - tím si zkontrolujete funkčnost.

Co říci na závěr?
Pokud jste si pročetli celý seriál a porozuměli jste základním principům práce, jsem velice rád.
Pokud si navíc vytváříte vlastní motivy, sady stylů, případě sady obrázků (skiny), uvítal bych, kdybyste se o ně podělili s ostatními. Já vám (doufám) pomohl porozumět celému systému motivů, vy pomozte ostatním - napište článek, vložte do download centra vlastní práci.