Klasy nagłówków w Joomla!

Tytuły umieszczono w Joomla! w elementach div oraz w komórkach tabel - th lub td, przypisując im jeden z poniższych stylów

• .contentheading {} - tytułom artykułów i pozycji w komponentach,
• .componentheading {} - tytułom komponentów,
• .contentpagetitle {} - tytułom - odnośnikom do artykułów na stronach blogów,
• .blog_more {} - tytułom wykazów odnośników Zobacz także w blogach.
• .moduletable th {} - tytułom w modułach.
• .module h3 {} - tytułom w modułach.

Strategia znakowania nagłówków

Zastosowane w Joomla! rozwiązanie wymaga od twórców serwisów wyboru pewnej strategii znakowania tytułów. Taką strategię przedstawił Lawrence Meckan z Absalom Media w artykule Semantic ideas, proponując następujące zastosowania znaczników h..., :

• h1 - tytuł najwyższego poziomu dla oznakowania nazwy witryny,
• h2 - dla podtytułów, wykazów pokrewnych pozycji,
• h3 - dla tytułów pojedynczych artykułów, pozycji w komponentach, dla modułów
• h4, h5, h6 - dla śródtytułów wewnątrz pojedynczych pozycji.

O ile uporządkowanie znakowania nagłówków w skryptach zgodnie z ideą semantycznego znakowania jest w gestii projektantów Joomla!, to zróżnicowanie ich wyglądu należy do projektanta szablonu. Oczywiście, można również samemu niewielkim nakładem pracy dostosować przynajmniej niektóe z nagłówków do wymagań XHTML, edytując skrypty komponentów odpowiedzialne za prezentację treści (pliki skryptów posiadają w nazwie tekst html, np. content.html.php.

W przyszłych wersjach programu planowane jest zastąpienie znacznikami h2 i h3 elementów div z wymienionymi wcześniej klasami i przypisanie im tych klas dla zachowania kompatybilności głównie z rozszerzeniami Joomla! oraz z szablonami.

W arkuszu stylów

W arkuszu stylów należałoby zatem zastosować takie same reguły dla:

• h2 oraz .componentheading,
• h3 oraz .contentheading i a.contentpagetitle.

Styl contentpagetitle stosowany jest na stronach blogów w tytułach zamienionych na odnośniki do artykułów, gdy w konfiguracji witryny oraz w parametrach pozycji menu zaznaczona jest opcja Tytuły łączami.

Listing : Style dla nagłówków

 
 
h1, h2,h3,h4,h5,h6, .componentheading, .contentheading, .contentpagetitle {
   font-family   : Arial,Helvetica,sans-serif;
 }
h1 {                     / *formatuje nazwę - tytuł witryny */
   font-size     : 1.4em;
}
h2, .componentheading {
   color: #018A1A;
   font-size     : 1.3em;
}
h3, .moduletable th, .module h3  {
   color: #018A1A;
   margin        : 1em 0;
   font-size     : 1.1em;
}
h4, h5, h6{
   margin        : .9em 0;
   font-size     : 1em;
}
h4 {
   color: #018A1A; / * kolor jak w h1,h2,h3, mniejszy rozmiar */ 
 
}
h5 {
   color: #01A821; /* rozmiar j.w., inny odcień koloru */
}
h6 {
   color: #03DE27; /* rozmiar j.w., inny odcień koloru */
}
 

Wygląd nagłówków h4, h5, h6 można zróżnicować rozmiarem czcionki, kolorem, kolorem tła.

Ponadto, korzystając z selektora potomka, można zróżnicować np. style tytułów w modulach :

Listing : Style dla nagłówków w modułach w pasku bocznym

 
#misc_bar h3 {
  padding               : .7em 0 0 .4em;
  margin                : 0;
  text-transform        : uppercase;  
  height                : 1.4em;
}
}