25. 10. 2009

PostNuke - Upravujeme vzhled : Obrázky pro web

V prvním díle seriálu se podíváme na obrázky, které jsou v rámci Školního webu používány.

Rozdělme si grafiku webu

Předpokládejme, že byste si chtěli upravit grafický vzhled svého webu. Předpokládejme, že k tomu máte patřičné dovednosti. Takže, kde a jaké obrázky upravit a vyměnit, aby "to" mělo ten správný efekt? Nejprve je nutné tento problém rozdělit do čtyř oblastí:
  1. Grafika jádra
    Jedná se o obrázky, které jsou většinou nedílnou součástí celého systému a nezřídka bývají začleněny přímo do zdrojového kódu. V takovém případě nelze měnit ani jejich umístění ani jejich název a nezřídka ani jejich velikost. Zbývá jen jejich obsah.
  2. Obrázky pro  témata a sekce
    Jedná se víceméně o ikony, které charakterizují určitou sadu článků či statických stránek. Umístění těchto obrázků lze určit v rámci nastavení příslušných modulů (Témata a Sekce).
    Poznámka: Na webu školu ZŠ Hustopeče jsme se navíc rozhodli, že se bude jednat o stejnou sadu obrázků.
  3. Grafika motivu
    Uživatelé PostNuke či Školního webu mají poměrně zažitou problematiku tzv. motivů (themes). Každý motiv má svou charakteristickou grafiku, kterou lze měnit pouze v souvislosti s úpravou kódu příslušného motivu.
  4. Grafika FCKeditoru
    Chcete-li změnit i nástroje WYSIWYG editoru, pak je nutné pracovat se zvláštním skinem, který najdete uvnitř modulu pnFCKeditor.
Obsahem tohoto článku bude popis grafiky jádra a grafiky FCKeditoru. Problematika obrázků pro témata a sekce je dostatečně popsána v manuálu a grafiku motivu budeme řešit až v článcích, které se budou zaobírat popisem a případnými úpravami motivu.

Než se pustíte do práce ...

... stáhněte si výchozí grafický motiv 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. Obzvláště 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ář images

Zde najdete několik důležitých obrázků a složek.
V prvé řadě se jedná o soubor logo.gif, který bývá používán například jako úvodní obrázek na úvodní stránce (to lze však v rámci motivu změnit). Dále se zobrazuje na stránce při tisku článku a případně je využíván jako logo u rss kanálu vašeho webu. Název tohoto loga je možné změnit - v takovém případě však v rámci administrace musíte přejít do Nastavení a tam zvolit Logo webu.
Adresář global obsahuje obrázky, které využívá systém při různých příležitostech. Je tedy nutné si projít web a vysledovat kdy se který obrázek použije.
Adresář menu je určen pro uložení ikon, které se zobrazují registrovaným uživatelům v rámci odkazu Můj účet. Nutno však podotknout, že některé moduly a motivy ještě využívají adresář modules/Your_Acount/images. Doporučuji tedy obsah obou adresářů synchronizovat. (Jedná se bohužel o pozůstatek z dřívějších vývojových verzí PostNuke, ale to není žádnou výjimkou , s tím se pereme dost často)
Adresáře reviews, topics a sections slouží k uložení ikon, které jsou pak využívány u modulů Recenze, Témata a Sekce.
Ostatní adresáře již nejsou nikterak důležité a navíc jejich obsah je vcelku zřejmý.

Adresář includes/blocks/dynamenu

Tento adresář je určen výhradně pro blok Dynamenu, který se stal nedílnou součástí nové verze Školního webu 1.2. Zde najdete především podadresář icons, který obsahuje ikony, jež jsou k dispozici pro jednotlivé položky při sestavování vlastního dynamického menu. Krom toho se zde nachází i adresář images, který obsahuje potřebné ikony pro sestavování tzv. stromové struktury (poznámka: pro důkladné pochopení smyslu obrázků doporučuji, abyste si je otevřeli v nějakém editoru - zdánlivý nulový obsah je způsoben tím, že obrázky jsou bílé v bílém pozadí ). Chcete-li příklad stromové struktury, pak se jedná právě o hlavní nabídku na našem webu vlevo nahoře.

Použití adresáře javascript ...

... mi není zřejmý.

Adresář modules

Znovu zdůrazňuji - z tohoto adresáře nejprve odstraňte ty podadresáře modulů, které nepoužíváte. Pak se teprve pusťte do úprav.
Většina modulů obsahuje adresář images nebo pnimages.
Tyto budou předmětem našeho zájmu. V prvé řadě najděte soubor admin.gif - ten totiž určuje ikonu modulu v rámci administračního rozhraní. A drobná poznámka - v tomto případě můžete měnit i velikost souboru, pozor nikoliv však jeho název.
Použití ostatních obrázků pak musíte vystopovat sami. Za nejnáročnější moduly pro úpravu považuji CmodsDownload, CmodsWebLinks, photoshare, pnForum a již dříve zmíněný pnFCKeditor.

Upravujeme skin pro FCKeditor

Chcete-li mít vlastní vzhled WYSIWYG editoru, pak se vybavte trpělivostí.
První krok je relativně jednoduchý - z vašeho originálního webu si zkopírujte z adresáře modules/pnFCKedtor/pnincludes/ podadresáře filemanager/images, editor/images, editor/dialog, editor/skins a editor/plugins.
Adresář filemanager/images obsahuje obrázky, používané u správce souborů (například ukládání obrázků).
Adresáře editor/images a editor/dialog si projděte samostatně a rozhodněte se, jaké obrázky hodláte změnit. Přitom adresář dialog obsahuje obrázky, které jsou využívány v dialogových oknech.
Adresář editor/skins je ze všech nejdůležitější a také vás s ním čeká nejvíce práce. Doporučuji v něm nejprve zkopírovat podadresář default a nazvat si jej dle vlastního uvážení (pouze s použitím alfanumerických znaků, samozřejmě). V takto zkopírovaném adresáři si otevřete soubor fck_strip.gif. S tímto souborem bude největší šichta - obsahuje totiž drtivou většinu nástrojů a vy je musíte nahradit tak, aby jejich rozložení bylo identické s původním obsahem - tj. nesmíte se minout ani o pixel, jinak by se vám ikony nástrojů celé posunuly.
Když jsem to dělal poprvé jímala mě panika, ale nakonec to není taková hrůza ...
Až budete mít hotovo, zbývá nový skin aktivovat - to uděláte v souboru fckeditor.js nastavení proměnné FCKConfig.SkinPath. (Poznámka: Nezapomeňte, že se jedná o JavaScript a proto doporučuji vymazat cache klienta, aby se příslušné js soubory znovu načetly.)
Adresář editor/plugins pak obsahuje zvlášť dodané nástroje (pluginy). V nich najdete ještě některé ikony pro příslušné nástroje.

Na závěr jedna rada - na co vytvářet nové sady ikon a obrázků, když jich je na Internetu mraky. Pozor však na to, abyste neporušovali autorská práva! Já třeba čerpám z webových stránek www.kde-look.org., která obsahují grafiku pro GUI KDE, určené pro Linuxové desktopy.
Máte-li však jiný tip, sem s ním ...