Arkusze stylów CSS to specjalne fragmenty kodu witryny, które określają reguły prezentacji materiałów na stronie w sposób niezależny (teoretycznie) od przeglądarek. W arkuszach stylów definiuje się wszystko, poczynając od kolorystyki
czcionki i tła, rozmiaru fontów, przez rozmieszczenie elementów treści i ich rozmiary, po sposoby reagowania odnośników przy najeździe myszą czy szczegóły wyglądu tabel.
Reguły CSSReguły w arkuszach stylów określają sposób formatowania elementów treści opisanych znacznikami HTML. Projektanci Joomla! zastosowali do oznakowania treści materiałów kanoniczny zestaw elementów HTML oraz niewielki zestaw stylów - wartości dla dwóch atrybutów znaczników HTML: - atrybutu identyfikatora -
id, - atrybutu klasy -
class.
Pełny wykaz zastosowanych w Joomla! stylów zamieszczamy poniżej, włącznie z informacją, jakim elementom struktury stron Joomla! zostały one przypisane. Formatowanie elementów HTMLKod Joomla! nie określa sposobu formatowanie elementów HTML. W materiałach Joomla! i Mambo może być zastosowany każdy element HTML. Nawet, jeśli nie znalazł się w skryptach Joomla! Bo przecież ostatecznie to autorzy, redatorzy, administratorzy decydują, co w witrynie zostanie umieszczone i jak zostanie oznakowane. Arkusz stylów dla Joomla! i Mambo powinien definiować domyślne formatowanie dla niewielkiego zestawu znaczników HTML, przedstawionych w tabeli poniżej.
Tabela 1. Elementy ogólnego zastosowania
| body {} | Styl dla elementu <body>. Formatuje całą stronę, kontroluje rodzinę czcionek, tło strony, itp. |
| div {} | Styl dla elementu <div>. Formatuje wszystkie bloki, w tym bloki tekstu, jeśli nie zostały ujęte w inne znaczniki. |
| p {} | Styl dla elementu <p>. Formatuje akapity. |
| table {} | Styl dla elementu <table>. Formatuje wygląd tabel |
| tr {} | Styl dla elementu <tr>. Formatuje wygląd wierszy w tabelach. |
| th {}, td {} | Style dla elementów <th> i <td>. Formatują komórki w tabelach: <th> tytułowe, <td> - pozostałe. |
| caption {} | Styl dla elementu <caption>. Formatuje podpis tabeli. |
| ul {}, ol {}, li {} | Style dla elementów <ul>, <ol> i <li>, <ul>. Formatują listy (wykazy): <ul> punktowane, <ol> uporządkowane, np. numerowane. |
| dl {}, dt {}, dd {} | Style dla elementów <dl>, &dt;ol> i <dd >. Formatują elementy definicji. |
| a:link {}, a:visited {}, a:hover {}, a:active | Style dla elementów <a>. Formatują odnośniki: <a:link> - nieodwiedzone, <a:visited> - odwiedzone, <a:hover> - wskazywane, <a:active> - aktywne. |
| strong{}, em{}, | Style dla elementów <strong> i <em>. Formatują wyróżnienia w tekście. Uwaga: znaczniki fizyczne <b>, <i> nie występują w specyfikacji XHTML 2.0, a znacznika <u> nie ma już w specyfikacji XHTML 1.0 Strict.
|
| hr {} | Styl dla element <hr>. Formatuje linię poziomą. W starszych szablonach można spotkać styl hr.separator {} zaproponowany swego czasu przez Peekmambo. Propozycja ta nie znalazła jednak szerszego zastosowania.
|
| .clr {} | Klasa stylu dla elementów pływających <div>. Wymusza oczyszczenie obszaru wokół elementu, zwykle w postaci .clr {clear: both;}
|
FormularzeInteraktywne pozycje treści korzystają z elementów HTML przeznaczonych do tworzenia formularzy. Niektóre z nich oznaczono specjalnymi stylami:
Tabela 2. Formularze
| form {} | Styl dla elementu <form>. Formatuje obszar formularza |
| .inputbox {} | Klasa stylu dla elementu <input>. Formatuje wygląd pól w formularzach, np. pól Nazwa użytkownika, Hasło, Nazwa użytkownika, Szukaj |
| .text_area {} | Klasa stylu dla elementu <input>. Formatuje wygląd wielowierszowych pól tekstowych. |
| label {} | Styl dla elementu <label>. Formatuje etykiety pól tekstowych. |
| fieldset {} | Styl dla elementu <fieldset>. Formatuje obszar zgrupowanych elementów. |
| legend {} | Styl dla elementu <legend>. Formatuje tytuł zgrupowanych elementów. |
| .search | Klasa stylu dla elementu <div>. Formatuje wygląd obszaru wyszukiwarki (z polem tekstowym, przyciskiem Szukaj) |
| .button {} | Klasa stylu dla elementu <input>. Formatuje wygląd przycisków (Wyślij, Głosuj itp.) |
| .adminform {} | Klasa stylu dla elementu <table>. Formatuje tabele obejmujące interfejs edytora na stronie frontowej |
Nawigacja i moduły menu
Tabela 3. Style stosowane w nawigacji i w modułach menu
| .mainlevel{}, a.mainlevel:link {}, a.mainlevel:visited {}, a.mainlevel:hover {}, #active_menu {} | Klasa stylu dla elementu <a>. Formatuje główne, nadrzędne pozycje menu |
| .sublevel{}, a.sublevel:link {}, a.sublevel:visited {}, a.sublevel:hover {} | Klasa stylu dla elementu <a>. Formatuje podrzędne - potomne pozycji menu |
| ul#mainlevel-nav {} | Styl dla elementu niepowtarzalnego <ul> (z identyfikatorem). Formatuje poziome menu nawigacyjne. Identyfikator menu nadrzędnego rozszerzony o przyrostek -nav.
|
| ul#mainlevel-nav li{} | Styl dla elementów - <li>. Formatuje pozycje niepowtarzalnej listy w poziomym menu nawigacyjnym. |
| #mainlevel-nav a:link {}, #mainlevel-nav a:visited{}, #mainlevel-nav a:hover {}: | Klasa stylu dla elementu <a>. Formatuje główne, nadrzędne pozycje menu w dodatkowym poziomym menu nawigacyjnym. |
| #pathway | Styl dla niepowtarzalnego elementu <pathway> (z identyfikatorem). Formatuje obszar ścieżki powrotu. |
| .pathway | Klasa stylu dla elementu <a>. Formatuje właściwości odnośników w ścieżce powrotu. |
| a.readon:link {}, a.readon:hover {}, a.readon:visited {} | Klasa stylu dla elementu <a>. Formatuje wygląd odnośnika Czytaj całość |
| .pagenav_prev {}, .pagenav_next
| Klasy stylów dla elementu <th>. Formatują przyciski Poprzedni artykuł - Następny artykuł.
|
| .pagenav_prev {} | Klasa stylu dla elementu <th>. Formatuje komórkę tabeli z odnośnikiem Poprzedni artykuł |
| .pagenav_next {} | Klasa stylu dla elementu <th>. Formatuje komórkę tabeli z odnośnikiem Następny artykuł |
| .pagenav {}, a.pagenav:link {}, a.pagenav:visited {}, a.pagenav:hover {} | Klasa stylu dla elementów <span> oraz <a>. Formatuje przyciski paska nawigacyjnego: Start «« Poprz. |1|2|3| ...| n | Nast. »» Koniec w blogach.
|
| .back_button {} | Klasa stylu dla elementu <input>. Formatuje przycisk (odnośnik) Wstecz |
Treść główna - materiałyTerminu materiały używamy tutaj w odniesieniu do każdej elementarnej jednostki treści: artykułu, materiału statycznego, pojedynczej pozycji prezentowanej przez komponent (np. karta informacyjna produktu). Do oznakowania materiałów w Joomla! i Mambo zastosowano następujące elementy i style:
Tabela 4. Style stosowane w głównej treści strony
| .contentpaneopen {} | Klasa stylu dla elementu <table>. Formatuje tabele obejmujące artykuły, materiały statyczne, tabele w blogach obejmujące wstępy artykułów oraz tabelę w oknie wydruku. |
| .contentpane {} | Klasa stylu dla elementu <table>. Formatuje tabele obejmujące pozycje inne niż artykuły, a więc np. pozycje w komponentach, listy kategorii, formularze kontaktowe, itp. |
| .contentheading {} | Klasa stylu dla elementu <td> lub <th> formatuje komórkę tabeli z tytułem artykułu, pozycji w komponencie. |
| .small {} | Klasa stylu dla elementu <span>. Formatuje nazwę autora pozycji. |
| .createdate {} | Klasa stylu dla elementu <td>. Formatuje komórkę z datą utworzenia artykułu i materiału statycznego. |
| .modifydate {} | Klasa stylu dla elementu <td>. Formatuje komórkę z datą ostatniej modyfikacji artykułu i materiału statycznego. |
| .content_rating {} | Klasa stylu dla elementu <span>. Formatuje tekst zawierający wyniki oceny publikowanych artykułów - obok gwiazdek wyrażających ocenę. |
| .content_vote {} | Klasa stylu dla elementu <span>. Formatuje tekst przy przyciskach wyboru oceny artykułów (przyciskach radiowych) |
| .mosimage{} | Klasa stylu dla elementu <div>. Formatuje obszar obrazka wprowadzonego botem {mosimage} i podpisu pod obrazkiem (tylko, gdy obrazek jest opatrzony podpisem). |
| .mosimage_caption{} | Klasa stylu dla elementu <div>. Formatuje podpis obrazka. |
| .searchintro {} | Klasa stylu dla elementu <table>. Formatuje tabelę z komunikatami o ilości wystąpień wyszukiwanego tekstu (z komunikatem: Znaleziono pozycji:...). |
| .smalldark {} | Klasa stylu dla elementu <td>. Stosowana na stronach sond do formatowania komórek tabeli z ilością oddanych głosów, datą ostatniego głosowania. |
| .moscode{} | Klasa stylu dla elementu <code>. Formatuje cytowane fragmenty kodu programów |
| code {} | Stylu dla elementu <code>. Formatuje kod komputerowy. |
|
|
|
| .buttonheading {} | Klasa stylu dla elementu <td>. Formatuje komórkę z przyciskami: Drukuj, PDF, Poleć znajomemu |
Wykazy treści w sekcji, w kategorii, w komponencie
Tabela 5. Style w wykazach treści
| .componentheading {} | Klasa stylu dla elementu <div>. Formatuje tytuły (nazwy) komponentów, nadawane im przez administratorów w parametrach pozycji menu. |
| .contentdescription {} | Klasa stylu dla elementu <td>. Formatuje komórkę tabeli zawierającą opis sekcji lub kategorii. |
| .sectiontableheader {} | Klasa stylu dla elementu <td>. Formatuje komórki tabel w wykazach, np. w wykazie artykułów słowa: >Tytuł, Data, Autor, Odsłony.. |
| .sectiontableentry1 {} | Klasa stylu dla elementu <tr>. Formatuje nieparzyste wiersze w tabelach zawierających wykazy (kolor pierwszego, trzeciego itd. wiersza) |
| .sectiontableentry2 {} | Klasa stylu dla elementu <tr>. Formatuje parzyste wiersze w tabelach zawierających wykazy (kolor drugiego, czwartego itd. wiersza) |
| .sectiontablefooter {} | Klasa stylu dla elementu <tr>. W tabelkach wykazów zawierających większą ilość formatuje wiersz stopki pozycji z paskiem nawigacyjnym. |
| a.category:link {}, a.category:hover {}, a.category:visited {} | Klasa stylu dla elementu <a>. Formatuje odnośnik do kategorii na stronach z wykazem zawartości sekcji) |
| .highlight{} | Klasa stylu dla elementu <span>. Formatuje wyszukiwane słowa lub frazy w wynikach wyszukiwania. |
BlogiSpisy treści artykułów wielostronicowych
Tabela 7. Formatowanie spisów treści
| .contenttoc {} | Klasa stylu dla elementu <table>. Formatuje tabelę spisu treści artykułu wielostronicowego |
| .contenttoc th {} | Klasa stylu dla elementu <th>. Formatuje wiersz z tytułem w tabeli ze spisem treści artykułu wielostronicowego |
| .contenttoc td {} | Klasa stylu dla elementu <td>. Formatuje komórkę ze spisem treści artykułu wielostronicowego |
| .toclink, a.toclink:link {}, a.toclink:visited {}, a.toclink:hover {} | Klasa stylu dla elementu <a>. Ustawia styl łączom w tabeli ze spisem treści artykułu wielostronicowego |
| .pagenavcounter {} | Klasa stylu dla elementu <div>. Formatuje informację o ilości stron artykułu (X stron z X |
| .pagenavbar {} | Klasa stylu dla elementu <div>. Formatuje przyciski Poprzednia strona - Następna strona. |
Moduły - treści towarzyszące
Tabela 8. Style stosowane w modułach
| .moduletable {} | Klasa stylu dla elementów <div> oraz <table>. Formatuje zarówno tabele, a więc elementy table, tr, td, jak i elementy div, w których umieszczono moduły. |
| .moduletable th {} | Klasa stylu dla elementu <th>. Formatuje komórkę z tytułem modułu i tytuł modułu. |
| .moduletable h3 {} | Klasa stylu dla elementu <h3>. Formatuje tytuł modułu umieszczonego w bloku <div class="moduletable">
|
| .moduletable td {} | Klasa stylu dla elementu <td>. Formatuje komórkę tabeli zawierającą treści modułu, w tym właściwości tekstu. |
| .moduletable ul li {} | Klasa stylu dla elementu <li>. Formatuje elementy listy w modułach
|
| .latestnews {}, .latestnews ul {} | Klasa stylu dla elementu <ul>. Formatuje wygląd listy i elementów listy - odnośników w module Nowości [LatestNews]. |
| .mostread {}, .mostread ul {} | Klasa stylu dla elementu <ul>. Formatuje wygląd listy i elementów listy - odnośników w module Popularne [MostRead]. |
| .module {} | Klasa stylu dla elementu <div>. Formatuje moduły, gdy dla pozycji modułu włączono styl -2 lub -3, np. <?php mosLoadModules ( 'nazwa_pozycji_modulu',-3); ?> |
| .module h3 {} | Klasa stylu dla elementu <div>. Formatuje tytuł modułu |
| .syndicate | Klasa stylu dla elementu <div>. Formatuje w module Kolporter RSS [RSSFeed] obszar z przyciskami - odnośnikami do kanałów RSS. |
| .syndicate_text | Klasa stylu dla elementu <div>. Formatuje w module Kolporter RSS tekst opisu nad przyciskami. |
| .pollstableborder {} | Klasa stylu dla elementu <div>. Formatuje krawędzie tabeli, wierszy i komórek zawierających pytania sondy; zdefiniowany we własnym arkuszu stylów komponentu Sondy! |
| .pool {} | Klasa stylu dla elementu <table>. Formatuje tabelę z tekstem ankiety. Użyta w module mod_pool.php |
| .wrapper | Klasa stylu dla elementu <iframe>. Formatuje ramkę obejmujacą obszar wyświetlanej strony w komponencie i module Wraper |
Więcej o CSSUwagi, źródłaJeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki Dziękujemy! Stefan Wajda - Zespół Dokumentacji PCJ Na podstawie: http://help.joomla.org/content/view/18/125/ |
Programowanie 
