To projektant szablonu i twórcy witryny decydują o rozmieszczeniu treści na jej stroniach. Projektanci dysponują w tym celu zestawem funkcji Joomla! i Mambo umieszczających elementy treści na stronach oraz językami (x)HTML i CSS. Twórcy witryn natomiast dysponują możliwościami, jakie stwarza wybrany lub specjalnie zaprojektowany szablon.
Joomla! AccessibleW projekcie Accessible Joomla! [a8ejoomla] zastosowano szereg klas dla elementu div, którymi zastąpiono tabele formatujące układ treści:
Tabela 1. Elementy ogólnego zastosowania
| .invisible {} |
Klasa elementu span. W formularzu Poleć znajomemu w przypadku błędów formatuje nazwę niepoprawnie wypełnionego pola |
| div.blog {}
| Styl elementu div. Formatuje obszar bloga |
| div.blogdescription {}
| Styl elementu div. Formatuje obszar opisu???? bloga |
| div.blogdescriptionimage {}
| Styl elementu div. Formatuje obszar obrazka
|
| div.blogdescriptiontext {}
| Styl elementu div. Formatuje tekst opisu bloga
|
| div.blogleading {}
|
Styl elementu div. Formatuje obszar obejmujący teksty zwiastunów rozpoczynających blog (wyświetlanych na całej szerokości kolumny). Element może obejmować elementy: <div class="itemblock item_X">, gdzie X=numer kolejnego zwiastuna, poczynając od 0, tytuł pozycji objęty znacznikiem h1, przyciski Drukuj, PDF, Email, formularz Ocenianie, blok <div class="credentials"> z nazwą autora i datą utworzenia artykułu,
blok <div class="contentintro"> z tekstem zwiastuna, element liniowy: <span class="modifydate date"> z datą modyfikacji artykułu.
|
| .blogintro {}
|
Styl elementu div
Formatuje w blogach tekst zwiastuna (skrótu, wstępu). |
| div.itemblock {}
|
Styl elementu div
Formatuje blok pozycji w kolumnie
|
| div.itemblock item_0 {}
| Styl elementu div
formatuje teksty skrótów - wstępów, /* item_0 to item_N */
|
| .contentitem h1 {}
| Styl elementu div
|
| .contentitem {}
| Styl elementu div. Formatuje na stronach bloga obszar jednej pozycji obejmujący elementy:
<h3> <div class="credentials">, a w nim: <span class="small author">, <span class="createdate date">, <div class="contentintro">, <span class="modifydate date">
|
| .contentintro {}
| Styl elementu div.
Formatuje bloki wstępów (skrótów) artykułów |
| .contentfull {}
| Styl elementu div.
Formatuje obszar prezentacji pełnego tekstu artykułu
|
| div.blogcolumn {}
| Styl elementu div.
Formatuje objęty elementem div class="blogintro" blok zwiastunów podzielony na szpalty. Występuje łacznie ze stylem column_X, gdzie X=numer kolumny, poczynając od 0 |
| div.blogcolumn column_0 {}
| Styl elementu div.
Formatuje objęty elementem div class="blogintro" blok zwiastunów podzielony na szpalty. /* column_0 do column_N */
|
| /*.column_0, .item_1, .item_2, .item_3, .item_4, .item_5 {width:50%;float:left}
| Styl elementu div.
Formatuje bloki zwiastunów na stronach blogów (odkomentuj, jeśli chcesz prezentować blog w 2 kolumnach)
|
| div.blogpagination {}
| Styl elementu div
Formatuje obszar paska nawigacyjnego pod blogiem
|
| div.blogpaginationcounter {}
| Styl elementu div
Formatuje element obejmujący wynik paginacji - Pozycje :: 1 - 12 z 39
|
|
|
|
Eementy .itemblock (.contentintro)Tabele
Tabela 1. Elementy ogólnego zastosowania
| .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. |
|
|
|
Wyniki wyszukiwania
Powiadom znajomego, - email, yourname, youremail, subject
Tabela 1. Elementy ogólnego zastosowania
| div.emailform {}
| Styl elementu <div>. Formatuje obszar formularza Poleć znajomemu.
|
| .formelm {}
| Styl elementu <div>.W formularzu Poleć znajomemu formatuje obszary z elementami <input> (pola tekstowe).
|
| .row {}
| Styl elementu <div>. W formularzu Poleć znajomemu formatuje obszary z etykietami pól tekstowych (<label>) oraz pola tekstowe (<input>). |
| div.row label {}
| Selektor kontekstowy styl elementu <label>. W formularzu Poleć znajomemu formatuje etykiety.
|
| div.row input.inputbox {}
| Selektor kontekstowy styl elementu <input>. W formularzu Poleć znajomemu formatuje pola tekstowe.
|
| div.buttonrow {}
| Styl elementu <div>. W założeniu ma formatować w formularzu Poleć znajomemu obszar z przyciskami Wyślij i Anuluj. Aktualnie przyciski objęte są elementem <div class="row">
|
| div.buttonrow input.button {}
| Selektor kontekstowy styl elementu <input.button>. W założeniu ma formatować w formularzu Poleć znajomemu przyciski Wyślij i Anuluj. Aktualnie przyciski objęte są elementem <div class="row">
|
| div.buttonrow input.button[name=submit] {}
| Selektor kontekstowy styl elementu <input.button[name=submit]>. W założeniu ma w formularzu Poleć znajomemu formatować przycisk Wyślij. Aktualnie przyciski objęte są elementem <div class="row">
|
| div.buttonrow input.button[name=cancel] {}
| Selektor kontekstowy styl elementu <input.button[name=cancel]>. W założeniu ma w formularzu Poleć znajomemu formatować przycisk Anuluj. Aktualnie przyciski objęte są elementem <div class="row">
|
Przyciski PDF | Print | EmailKomponent Kontakty - ikony, text i pola informacyjne
Komponent Kontakty - Email
Tabela 1. Elementy ogólnego zastosowania
| #contact_name {}
| Identyfikator elementu <input> w formularzu kontaktowym. Styl może formatować pole tekstowe przeznaczone na nazwę respondenta.
|
| #contact_email {}
| Identyfikator elementu <input> w formularzu kontaktowym. Styl może formatować pole tekstowe przeznaczone na adres email.
|
| #contact_subject {}
| Identyfikator elementu <input> w formularzu kontaktowym. Styl może formatować pole tekstowe przeznaczone na temat wiadomości.
|
| #contact_text {}
| Identyfikator elementu <textarea> w formularzu kontaktowym. Styl może formatować obszar tekstowy przeznaczony na wiadomość.
|
| #contact_email_copy {}
| Identyfikator elementu <input> w formularzu kontaktowym.
|
Moduł i komponent LogowanieKomponent Registration
Tabela 1. Elementy ogólnego zastosowania
| .reg_required {}
| Styl elementu <span>. Formatuje tekst informujący o obowiązkowym wypełnieniu zaznaczonych pól formularza.
|
| .reg_name {}
| Styl elementu <span>. Formatuje etykietę pola Nazwa - Nazwisko i imię
|
| .reg_username {}
| Styl elementu <span>. Formatuje etykietę pola Login
|
| .reg_email {}
| Styl elementu <span>. Formatuje etykietę pola Adres e-mail
|
| .reg_password {}
| Styl elementu <span>. Formatuje etykietę pola Hasło
|
| .reg_vpassword {}
| Styl elementu <span>. Formatuje etykietę pola Powtórz hasło
|
Komponent Registration Lost password
Tabela 1. Elementy ogólnego zastosowania
| .lost_pass_desc {}
| Styl elementu <span>. Formatuje opis wprowadzający w formularzu z prośbą o przesłanie nowego hasła.
|
| .lost_pass_username {}
| Styl elementu <span>. Formatuje etykietę Nazwa użytkownika w formularzu z prośbą o przesłanie nowego hasła. Może formatować pole tekstowe (konieczne zastosowanie selektora identyfikatora)
|
| .lost_pass_email {}
| Styl elementu <span>. Formatuje etykietę Adres e-mail w formularzu z prośbą o przesłanie nowego hasła. Może formatować pole tekstowe (konieczne zastosowanie selektora identyfikatora)
|
Sprawdzić /*????????????????????????? */ |
Programowanie 
