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/ |