Kaskádní styly jsou pro web nutností
V minulém díle jsme řešili obrázky. Pouhá grafika však přijatelný vzhled našeho webu nevyřeší. Na řadu přicházej kaskádní styly (soubory s koncovkou css). Zkušenější správci webů by očekávali jeden soubor, ve kterém je možná snadná orientace. Bohužel díky poměrně rozsáhlé skupině externích vývojářů a poměrně bohaté modularitě je nutné u webů založených na CMS PostNuke počítat s poměrně roztříštěným řešením kaskádních stylů. Stejně jako u grafiky si tedy rozdělme danou problematiku do několika oblastí:
- CSS jádra = CSS vybraného motivu
CSS jádra prakticky neexistuje. "Hlavní" kaskádní styl je totiž součástí vybraného motivu. Zde je nutné hledat soubor style.css, případně style.php u modernějších motivů. - CSS jednotlivých modulů
Nemálo modulů si však řeší kaskádní styly odděleně. Takže i zde je nutné nalézt ty správné css soubory. - CSS dynamického menu
S novou verzí Školního webu přibyl i velmi mocný nástroj pro tvorbu menu pod názvem Dynamenu. Nemálo webmasterů, kteří tento blok testují, jsou v prvé fázi zklamáni z jeho vzhledu. Přitom právě jeho vzhled lze vhodně upravit pomocí příslušného css souboru.
Toto rozdělení však nestačí, zde již přichází na řadu problematika motivů. Jak se dozvíte později, uvnitř každého motivu je totiž možné měnit barevnou paletu. Změny barev však nemusí mít očekávaný dopad - to je způsobeno tím, že v css souborech je zapsána barva "natvrdo". Existují v zásadě dva přístupy:
- jednodušší, ale pracnější variantou je přepsání příslušných barev přímo v css souborech.
- náročnější, ale efektivnější možností je konverze css souborů do php skriptu, jehož obsahem je definice příslušných kaskádních stylů s tím rozdílem, že se v nich odkazujeme na proměnné z příslušné barevné palety. Díky tomu se jakákoliv změna barvy přenáší do celého systému css definic.
Než se pustíte do práce ...
... stáhněte si výchozí kaskádní styl a připravte si jej pro úpravu. To znamená rozbalte se ji jej na nějaké pracovní místo a projděte si jeho obsah. I zde doporučuji, abyste si prošli adresář modules a smazali z něj ty podadresáře modulů, které na svém webu nepoužíváte.
Adresář includes
V něm se postupně proklikáte k souborům dynamenu_style.css, případně dynamenustyle.php. Jejich použití je závislé na tom, pro kterou variantu se rozhodnete (viz závěr kapitoly Kaskádní styly jsou pro web nutností). Zvolíte-li si první variantu, pak postačí do příslušného motivu dosadit do hlavičky stránky kód
Podíváte-li se na obsah příslušného souboru, pak zde najdete tři "skupiny" definic:
- Horizontal Drop-Down Menu určuje chování horizontálního menu (na webu centra ADMIN je vpravo nahoře, přičemž začíná nabídkou Služby).
- Vertical Fly-Out Menu určuje chování vertikálního vysouvacího menu (na webu centra ADMIN není tento typ využíván, ale najdete jej jako hlavní nabídku na webu ZŠ Hustopeče).
- Tree and Plain Menu definuje chování zbývajících typů dynamického menu (například stromového, které najdete vlevo nahoře na stránkách centra ADMIN, začíná odkazem Úvodní stránka).
Adresář modules
Opakuji - z tohoto adresáře nejprve odstraňte ty podadresáře modulů, které nepoužíváte. Pak se teprve pusťte do úprav.
V našem výchozím stylu máte seznam všech dohledatelných css souborů. Chcete-li je využívat (namísto varianty php skriptu určující příslušné definice css stylu), pak stačí měnit jejich obsah.
CSS soubory nahrazujeme php skriptem
Na webu ZŠ Hustopeče jsme přistoupili k tomu, že veškeré "staticky definované" kaskádní styly nahradíme php skriptem. První podmínkou je použití xanthia motivu (v naší instalaci se jedná o sweb-basic). Jak postupovat?
- Základní úprava souboru style.php
V příslušném motivu si nejprve otevřete soubor style/style.php. V něm pak hned pod první řádek přidejte definice proměnných $font_family, $size_ptitle, $size_title, $size_text, $size_litletext, $size_admin. Například: $font_family = 'Verdana, Arial, Helvetica, sans-serif'; $size_ptitle = '15px'; $size_title = '13px'; $size_text = '11px'; $size_litletext = '10px'; $size_admin = '11px'; Poznámka: Při definování velikosti bohužel musím doporučit používání absolutních jednotek, nikoliv relativních (procenta apod.). Kód jádra Postnuke má už nějaký ten pátek (přesněji rok) a není problém, aby se příslušné definice velikosti písma vnořovaly, což vede buď k neúměrnému zmenšování nebo naopak zvětšování písma a to zvláště v prohlížeči IE. - Vytvoření potřebných php souborů, které nahradí stávající css
Do adresáře style postupně nakopírujte všechny css soubory, u kterých chcete změnit jejich obsah. Následně je přejmenujte na soubor s koncovkou php. Do jejich obsahu vložte na začátek kód: A na konec souboru vložte kód: ' ?> POZOR! nezapomeňte na tečku u rovnítka a na apostofy! - ti, kteří obvládají alespoň základy php, ví proč to zdůrazňuji. - Odkaz na nové php soubory v souboru style.php
Provedete-li potřebné změny, upravte soubor style.php tak, že na jeho konec těsně nad řádek s otazníkem postupně vložíte příkaz include s odkazem na příslušný soubor (například include ("dynamenustyle.php");) POZOR! nezapomeňte na závorky, uvozovky a středník na konci! - Vynulování "statických" kaskádních styly
Posledním krokem je zneplatnění definic v souborech css. Nejprve si je však zazálohujte! Pak jen postačí je editovat a vymazat jejich obsah (doporučuji je ponechat se stejným názvem na původním místě). - Znovunačtení xanthia motivu
Posledním krokem je znovunačtení motivu xanthia - to by měli jeho uživatelé zvládnout.
Pokud jste pracovali dobře, pak se vzhled webu nezměnil. Nyní již stačí provádět změny v definicích v rámci jednotlivých php skriptů a znovunačítání motivů. Při této příležitosti mám dvě rady:
- Vše je možné testovat "naostro" při editaci souboru pnTemp/Xanthia_Config/nazevmotivu.style.css. Jakmile jste se vzhledem spokojeni, přeneste příslušný kód do souborů s php skriptem a reaktivujte celý motiv.
- A teď to hlavní, proč to celé děláme - místo definicí barev použijte kód '.$colors['xxx'].'- nezapomeňte na apostrofy! Přesné určení proměnných najdete v souboru pnTemp/Xanthia_Config/nazevmotivu.palettes.php. Zároveň ve všech php skriptech můžete použít proměnné z kroku 1 ($font_family, $size_ptitle, $size_title, $size_text, $size_litletext, $size_admin), případně vlastní proměnné, které si nadefinujete v témže místě.
Žádné komentáře:
Okomentovat