UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Arkusz stylów Drukuj Email
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 CSS

Reguł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 HTML

Kod 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
ElementyZastosowanie elementu
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:activeStyle 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;}

Formularze

Interaktywne pozycje treści korzystają z elementów HTML przeznaczonych do tworzenia formularzy. Niektóre z nich oznaczono specjalnymi stylami:

Tabela 2. Formularze
ElementyZastosowanie elementu
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.
.searchKlasa 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
ElementyZastosowanie elementu
.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.
#pathwayStyl dla niepowtarzalnego elementu <pathway> (z identyfikatorem). Formatuje obszar ścieżki powrotu.
.pathwayKlasa 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ły

Terminu 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
ElementyZastosowanie elementu
.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
ElementyZastosowanie elementu
.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.

Blogi

Tabela 6. Style na stronach blogów
ElementyZastosowanie elementu
.blog {}Klasa stylu dla elementu <table>. Formatuje tabelę obejmującą obszar bloga
.contentpagetitle {}, a.contentpagetitle:link {}, a.contentpagetitle:visited {}, a.contentpagetitle:hover {}Klasa stylu dla elementu <a>. Formatuje tytuły artykułów, gdy w ustawieniach pozycji menu włączona jest opcja Tytuły łączami
.blogsection {}, a.blogsection:link {}, a.blogsection:link {}, a.blogsection:hover {}Klasa stylu dla elementu <a>. Formatuje odnośniki do blogów w wykazie Zobacz też na stronach typu magazynowego
.blog_more {}Klasa stylu dla elementu <div>. Formatuje tytuł sekcji odnośników w blogu (Zobacz także...; tytuł jest ponadto objęty elementem <strong>).
.article_seperator {}Klasa stylu dla elementu <span>. Formatuje obszar rozdzielający pozycje bloga

Spisy treści artykułów wielostronicowych

Tabela 7. Formatowanie spisów treści
ElementyZastosowanie elementu
.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
ElementyZastosowanie elementu
.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
.syndicateKlasa stylu dla elementu <div>. Formatuje w module Kolporter RSS [RSSFeed] obszar z przyciskami - odnośnikami do kanałów RSS.
.syndicate_textKlasa 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
.wrapperKlasa stylu dla elementu <iframe>. Formatuje ramkę obejmujacą obszar wyświetlanej strony w komponencie i module Wraper

Więcej o CSS

Uwagi, źródła

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

 
« poprzedni artykuł   następny artykuł »