Cassiopeia: predvolená šablóna Joomla a jej možnosti

Cassiopeia je predvolená šablóna používateľskej časti systému Joomla. Po novej inštalácii poskytuje čistý, responzívny a použiteľný základ, na ktorom možno vytvoriť blog, firemnú prezentáciu, informačný portál aj menší komunitný web.

Hoci jej základné vzhľadové nastavenie pôsobí pomerne jednoducho, Cassiopeia nie je iba dočasnou ukážkovou šablónou. Podporuje modulové pozície, vlastné CSS, alternatívne štýly, overrides aj odvodené šablóny. Pri správnom prispôsobení preto môže byť použitá aj na hotovom profesionálnom webe.

Čo je Cassiopeia

Šablóna v Joomla určuje najmä vizuálne spracovanie stránky, rozloženie jednotlivých oblastí a spôsob zobrazovania obsahu. Samotné články, kategórie, kontakty alebo iné údaje spravujú komponenty, zatiaľ čo šablóna určuje, kde a ako sa ich výstup zobrazí.

Cassiopeia je frontendová šablóna dodávaná so systémom Joomla 4 a novšími verziami. Oficiálna dokumentácia ju opisuje ako univerzálnu, prístupnú a responzívnu šablónu, ktorú možno upravovať prostredníctvom nastavení štýlu a súboru user.css.

V Joomla sa treba odlišovať medzi dvoma pojmami:

• šablóna obsahuje súbory, HTML štruktúru, CSS, JavaScript a definície modulových pozícií,
• štýl šablóny obsahuje konkrétne nastavenia, napríklad logo, farebnú schému alebo typ rozloženia.

Z jednej šablóny tak môžete vytvoriť viacero štýlov a priradiť ich rôznym položkám menu. Rovnaký web môže mať napríklad odlišne upravenú titulnú stránku, blog a klientsku sekciu.

Hlavné vlastnosti šablóny Cassiopeia

Responzívne zobrazenie

Cassiopeia automaticky prispôsobuje rozloženie dostupnej šírke obrazovky. Obsah, navigácia a bočné stĺpce sa preto môžu zobrazovať odlišne na veľkom monitore, tablete a mobilnom telefóne.

Responzívna šablóna však sama osebe nezaručuje dokonalé mobilné zobrazenie. Treba používať vhodné rozmery obrázkov, primeranú dĺžku nadpisov a moduly, ktoré sú tiež kompatibilné s mobilnými zariadeniami.

Dôraz na prístupnosť

Cassiopeia bola navrhnutá ako prístupný základ pre moderné webové stránky. Využíva zrozumiteľnú HTML štruktúru a podporuje aj jazyky zapisované sprava doľava. Vhodná je preto aj pre stránky, pri ktorých je dôležitá ovládateľnosť klávesnicou, správna štruktúra nadpisov a čitateľnosť obsahu.

Prístupnosť však závisí aj od správcu webu. Nevhodné farebné kombinácie, chýbajúce alternatívne texty obrázkov alebo nesprávna hierarchia nadpisov môžu prístupnosť zhoršiť bez ohľadu na kvalitu šablóny.

Modulové pozície

Cassiopeia obsahuje viacero oblastí, do ktorých možno publikovať moduly. Medzi najčastejšie používané patria:

Dostupnosť viacerých pozícií umožňuje vytvárať rozmanité rozloženia bez úpravy základného PHP súboru šablóny. Presné umiestnenie pozícií možno zobraziť pomocou náhľadu modulových pozícií v nastaveniach Joomla.

Základné nastavenie Cassiopeie

Nastavenia šablóny nájdete v administrácii približne na ceste:

Systém → Šablóny → Štýly šablón webu → Cassiopeia – Default

Názvy položiek sa môžu mierne líšiť podľa verzie Joomla a použitého jazykového balíka.

Logo, názov a slogan

V časti venovanej značke môžete nastaviť:

• obrázok loga,
• textový názov webu namiesto loga,
• krátky slogan zobrazovaný pri názve alebo logu,
• úplné vypnutie oblasti so značkou.

Ak nie je vybrané vlastné logo ani zadaný názov, zobrazí sa predvolená identita Cassiopeia. Pre reálny web je preto jedným z prvých krokov nahradenie predvoleného označenia vlastným logom alebo názvom.

Farebná schéma

Klasická Cassiopeia ponúka štandardnú a alternatívnu farebnú schému. Štandardná verzia používa najmä modré odtiene, alternatívna tmavší červený až bordový vzhľad.

Ide iba o východiskové riešenia. Vlastné firemné farby možno doplniť prostredníctvom CSS alebo odvodeného štýlu.

Písmo

Šablóna umožňuje vybrať schému písma. Podľa verzie Joomla môžu byť dostupné systémové fonty, lokálne uložené písma alebo písma načítané z externého zdroja.

Pri externých fontoch treba myslieť na rýchlosť načítania a ochranu osobných údajov. Z pohľadu výkonu aj súkromia bývajú vhodným riešením systémové alebo lokálne uložené písma.

Statické alebo roztiahnuté rozloženie

Cassiopeia podporuje dva základné typy šírky:

• statické rozloženie obmedzuje maximálnu šírku obsahu,
• fluidné rozloženie využíva väčšiu časť dostupnej šírky obrazovky.

Statické rozloženie je vhodné pre článkové a informačné weby, pretože príliš dlhé riadky sa čítajú horšie. Fluidné rozloženie sa môže hodiť pri katalógoch, tabuľkách, galériách alebo vizuálne orientovaných stránkach.

Prilepená hlavička

Funkcia Sticky Header ponechá hlavičku a navigáciu viditeľnú aj pri posúvaní stránky. Je praktická na dlhých stránkach, no príliš vysoká hlavička môže na menšom notebooku zaberať veľkú časť obrazovky.

Odkaz na návrat nahor

Možnosť Back-to-top Link zobrazí na dlhších stránkach tlačidlo, ktorým sa návštevník rýchlo vráti na začiatok. Využiť sa oplatí najmä pri rozsiahlych článkoch, zoznamoch alebo jednostránkových prezentáciách.

Úprava vzhľadu pomocou súboru user.css

Základné možnosti administrácie neumožňujú nastaviť každý detail. Jednoduché vizuálne zmeny možno doplniť v súbore user.css.

Súbor vytvoríte cez:

Systém → Šablóny webu → Cassiopeia – podrobnosti a súbory

V priečinku css vytvorte súbor s názvom user.css. Joomla ho načíta po hlavných štýloch šablóny, takže v ňom môžete prepisovať existujúce CSS pravidlá.

Napríklad farbu hlavičky možno zmeniť takto:

.container-header {
    background-color: #173a5e;
    background-image: none;
}

Farbu nadpisov možno upraviť nasledovne:

h1,
h2,
h3 {
    color: #173a5e;
}

Oficiálny návod odporúča neprerábať pôvodné CSS súbory Cassiopeie, ale dopĺňať vlastné pravidlá do user.css.

Pri každej zmene treba skontrolovať:

• zobrazenie na mobile,
• kontrast textu a pozadia,
• navigáciu pomocou klávesnice,
• formuláre a systémové hlásenia,
• stránky vytvorené rôznymi komponentmi.

Kedy použiť odvodenú šablónu

Súbor user.css je vhodný na zmenu farieb, rozmerov, okrajov, typografie a jednoduchých detailov. Ak však potrebujete meniť štruktúru stránky, pridávať modulové pozície alebo výraznejšie upravovať HTML výstup, lepším riešením je odvodená šablóna, označovaná aj ako child template.

Odvodená šablóna preberá väčšinu súborov a funkcií z rodičovskej Cassiopeie. Obsahuje iba tie súbory, ktoré chcete doplniť alebo nahradiť. Vlastné úpravy sa tak oddelia od pôvodných súborov systému a jednoduchšie sa udržiavajú pri aktualizáciách.

Cassiopeia je vhodným rodičom odvodených šablón, pretože sa dodáva s Joomla, rešpektuje webové štandardy a poskytuje kvalitný základ z pohľadu použiteľnosti a prístupnosti.

Odvodenú šablónu možno vytvoriť priamo v administrácii:

1. Otvorte Systém → Šablóny webu.
2. Vyberte Cassiopeia – podrobnosti a súbory.
3. Kliknite na Vytvoriť odvodenú šablónu.
4. Zadajte jej názov.
5. Vytvorte alebo priraďte príslušný štýl.
6. Nastavte nový štýl ako predvolený alebo ho priraďte vybraným položkám menu.

V Joomla 6 pribudla aj Cassiopeia Extended, ktorá demonštruje pokročilejšie možnosti úpravy farieb a typografie prostredníctvom odvodeného riešenia.

Overrides: keď nestačí CSS

CSS mení vzhľad existujúcich prvkov, ale nemení ich HTML štruktúru. Na úpravu výstupu článkov, modulov alebo komponentov slúžia template overrides.

Pomocou override možno napríklad:

• zmeniť poradie informácií v článku,
• odstrániť nepotrebné HTML prvky,
• upraviť výstup modulu menu,
• vytvoriť odlišný vzhľad kontaktného formulára,
• pridať vlastné CSS triedy,
• pripraviť alternatívne rozloženie modulu.

Override sa uloží do priečinka html používanej šablóny. Pôvodný súbor komponentu alebo modulu zostáva nezmenený, čo je dôležité pri aktualizáciách. Pri rozsiahlejších úpravách je vhodné overrides ukladať do vlastnej odvodenej šablóny.

Výhody šablóny Cassiopeia

Cassiopeia má niekoľko praktických výhod:

• je súčasťou Joomla a nevyžaduje samostatnú licenciu,
• používa štandardné funkcie systému,
• podporuje responzívny dizajn,
• poskytuje dobrý základ pre prístupný web,
• obsahuje dostatok modulových pozícií pre bežné projekty,
• podporuje vlastné CSS, overrides a odvodené šablóny,
• nie je závislá od komerčného frameworku,
• môže byť vhodným základom pre rýchlu a technicky jednoduchú stránku.

Výsledná rýchlosť webu však nezávisí iba od šablóny. Ovplyvňuje ju veľkosť obrázkov, hosting, cache, počet rozšírení, externé skripty aj spôsob zostavenia stránky.

Obmedzenia Cassiopeie

Cassiopeia nie je vizuálny page builder ani komplexný šablónový framework. V administrácii preto neposkytuje grafický nástroj na ľubovoľné skladanie riadkov a stĺpcov.

Pri náročnejšom dizajne treba počítať s použitím:

• vlastného CSS,
• template overrides,
• odvodenej šablóny,
• vlastných modulov,
• prípadne samostatného page buildera.

Obmedzenejšie sú aj vstavané možnosti pre pokročilé megamenu, rozsiahle animačné efekty alebo komplexné dizajnové varianty. Na druhej strane, menší počet funkcií znamená jednoduchší základ a menšiu závislosť od dodávateľa tretej strany.

Pre aké weby je Cassiopeia vhodná

Cassiopeia môže dobre poslúžiť pri tvorbe:

• blogov a magazínov,
• firemných prezentačných stránok,
• webov obcí, škôl a organizácií,
• dokumentačných stránok,
• osobných portfólií,
• menších katalógov,
• informačných a komunitných portálov.

Najlepšie výsledky dosiahnete vtedy, keď návrh prispôsobíte možnostiam šablóny. Snaha premeniť Cassiopeiu na komplikovaný komerčný framework pomocou množstva opráv a doplnkov môže byť náročnejšia než použitie vhodnej špecializovanej šablóny.

Je potrebné Cassiopeiu nahradiť?

Nie. Skutočnosť, že ide o predvolenú šablónu, neznamená, že je určená iba na testovanie.

Cassiopeia je vhodná pre projekty, pri ktorých sú dôležité:

• jednoduchá údržba,
• čistý a prehľadný dizajn,
• štandardné funkcie Joomla,
• menší počet závislostí,
• možnosť vlastných CSS úprav,
• dlhodobejšia udržateľnosť webu.

Komerčná šablóna alebo framework môže byť výhodnejší, keď potrebujete hotové dizajnové bloky, vizuálne nastavovanie rozloženia, pokročilé menu alebo množstvo predpripravených variantov.

Záver

Cassiopeia predstavuje viac než iba základný vzhľad po inštalácii Joomla. Je to plnohodnotná, responzívna a prispôsobiteľná šablóna, ktorá využíva natívne možnosti systému.

Začiatočník môže upraviť logo, slogan, písmo, farebnú schému a rozloženie priamo v administrácii. Pokročilejší používateľ môže pokračovať cez user.css, overrides alebo vlastnú odvodenú šablónu.

Pre jednoduchšie a stredne náročné weby môže byť Cassiopeia rozumnou alternatívou ku komerčným šablónam. Poskytuje čistý základ bez zbytočného množstva funkcií a zároveň ponecháva dostatok priestoru na vlastné úpravy.