UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Szablony arrow CSS w Joomla arrow Przegląd - znakowanie w Accessible Joomla!
Przegląd - znakowanie w Accessible Joomla! Drukuj Email
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! Accessible

W 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
Elementy Zastosowanie elementu
.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)

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
div.credentials {} Styl elementu div. W artykułach formatuje obszar obejmujący: , a w nim: <span class="small author"> z nazwą autora/redaktora, <span class="createdate date"> z datą utworzenia artykułu. W formularzu logowania na stronie komponentu formatuje obszar obejmujący wiersze z etykietami i polami tekstowymi: nazwą użytkownika (loginem), hasłem, polem wyboru Zapamiętaj i przyciskiem Zaloguj.
span.author {} Styl elementu span. Formatuje nazwę autora pozycji wprowadzoną znacznikiem <span class="small author">
span.date {} Styl elementu span. Formatuje datę utworzenia pozycji wprowadzoną znacznikiem <span class="createdate date">
div.sectioncategory {} Styl elementu div.
span.section {} Styl elementu span.
span.category {} Styl elementu span.
ul.categorylist {} formatuje listę kategorii w widoku Lista zawartości sekcji i tabela - artykuły z kategorii
ul.categorylist li {}
ul.categorylist span.description {}
ul.categorylist span.description br {}
ul.categorylist span.nrofitems {} w wykazie kategorii formatuje ilość pozycji w kategorii
ul.categorylist li.registered {}
ul.categorylist li.registered span {}

Tabele

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
.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

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
div.searchblock {} Styl elementu <div>. Formatuje obszar obejmujący etykietę, pole tekstowe wyszukiwarki oraz przycisk Szukaj
#search_searchword {} Identyfikator pola tekstowego wprowadzonego elementem <input>. Może formatować pole tekstowe wyszukiwarki.
div.searchparams {} Styl elementu <div>, obejmującego listę opcji wyszukiwania (Dowolne słowa, Wszystkie słowa&hellp;
div.searchordering {} Styl elementu <div>, obejmującego listę opcji sortowania wyników wyszukiwania
div.searchintro {} Styl elementu <div> z etykietą Szukany tekst oraz przytoczeniem wyszukiwanego tekstu ujętym w kodzie &ltstrong class="searchword">...</b>
div.searchconclusion {} Styl elementu <div> obejmującego informację o wynikach wyszukiwania oraz graficzny odnośnik do wyszukiwarki Google [w przykladowym arkuszu stylow błędnie div.conclusion { border:3px solid navy; }
div.resultcounter {} Styl elementu <div> obejmującego paginację stron z wynikami wyszukiwania (span class="option">Pozycje :: 1 - 30 z 31
div.searchbox {}
div.searchbox form {}
div.searchbox form input {}
div.searchbox form select {}
div.phrase {}
div.ordering {}
div.searchresults {} Styl elementu <div> obejmującego rezultaty wyszukiwania [w oryginale styl niewykorzystany, blok zostal oznaczony klasą itemblock)
ol, ol.searchresults {}
div.searchresults span.section {} Styl elementu <span>. Formatuje nazwę sekcji i kategorii, do której przypisany jest materiał wyszczególniony w wynikach wyszukiwania
div.searchresults div.created {} Styl elementu <span>. Formatuje datę utworzenia materiału wyszczególnionego w wynikach wyszukiwania
h2 span.searchresultcount {}, h2 span.searchresultcount-przyrostek {} Styl elementu <span> obejmującego liczbę porządkową w wynikach wyszukiwania. Tytuł pozycji umieszczony jest poza elementem <span> i objęty znacznikiem <a> [rozważyć zastosowanie selektora kontekstowego h2 a {}. Uwaga: w oryginale h2, w polskiej wersji zmieniono na h3

Powiadom znajomego, - email, yourname, youremail, subject

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
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 | Email

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
div.buttonheading {float:right;margin:5px 0;}
.buttonheading img {border:none;}
span.printbutton {}
span.PDFIcon {}
span.EmailIcon {}

Komponent Kontakty - ikony, text i pola informacyjne

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
.contact_select { } Styl elementu <span> obejmującego rozwijaną listę wyboru kontaktów. [proponowany przez autorów: .contact_select {display:block;font-weight:bold;}
.contact_selector { } Styl elementu <div> obejmującego komunikat Wybierz kontakt i rozwijaną listę wyboru kontaktów. [dodany w polskiej wersji]
.con_image img {float: right;position:relative;top:40px;left:0px} Selektor kontekstowy stylu elementu <img> z fotografią (ilustracją) kontaktu.
address { } Styl elementu <address> obejmującego informacje adresowe. [element dodany w polskiej wersji]
div.marker_address {} Styl elementu <div> obejmującego
div.marker_email {} Styl elementu <div> obejmującego
div.marker_telephone {} Styl elementu <div> obejmującego
div.marker_fax {} Styl elementu <div> obejmującego
div.marker_misc {} Styl elementu <div> obejmującego Autorzy projektu proponują wspólną regułę: div.marker_address, div.marker_email, div.marker_telephone, div.marker_fax, div.marker_misc {float: left;padding-right:20px;}
div.con_vcard {} Styl elementu <div> obejmującego Komunikat i odnośnik Zapisz ten kontakt jako wizytówkę [vCard] [dodany w wersji polskiej].
div.con_position {padding:10px 0;} Styl elementu <div>. Formatuje stanowisko osoby.
.con_address {} Styl elementu <div>. Formatuje obszar z etykietą i polem adresu.
div.con_suburb {} Styl elementu <div>. Formatuje obszar z etykietą i polem nazwy miejscowości.
div.con_state {} Styl elementu <div>. Formatuje obszar z etykietą i polem nazwy województwa.
div.con_country {} Styl elementu <div>. Formatuje obszar z etykietą i polem nazwy kraju.
div.con_postcode {} Styl elementu <div>. Formatuje obszar z etykietą i polem na kod pocztowy.
div.con_email {} Styl elementu <div>. Formatuje obszar z etykietą i polem na adres email.
div.con_telephone {} Styl elementu <div>. Formatuje obszar z etykietą i polem na numer telefonu.
div.con_fax {} Styl elementu <div>. Formatuje obszar z etykietą i polem na numer faksu.
div.con_misc {} Styl elementu <div>. Formatuje obszar z etykietą i polem na dodatkowe informacje.
div.contact_none {padding:40px 0;} Styl elementu <div>. Formatuje komunikat informujący o braku danych kontaktowych w komponencie Kontakty.

Komponent Kontakty - Email

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
#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 Logowanie

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
#mod_login_username {} Identyfikator elementu <input> z polem tekstowym na nazwę użytkownika (login).
.mod_login_username {} Styl elementu <span>. Formatuje etykietę Login.
#mod_login_password {} Identyfikator elementu <input> z polem tekstowym na hasło użytkownika
.mod_login_password {} Styl elementu <span>. Formatuje etykietę Hasło.
#mod_login_remember {} Identyfikator elementu <input> z polem wyboru Zapamiętaj.
.mod_login_remember {} Styl elementu <span>. Formatuje etykietę Zapamiętaj [dodane w polskiej wersji].
#com_login_username {} Identyfikator elementu <input> z polem tekstowym na nazwę użytkownika (login).
.com_login_username {} Styl elementu <span>. Formatuje etykietę Login.
#com_login_password {} Identyfikator elementu <input> z polem tekstowym na hasło użytkownika
.com_login_password {} Styl elementu <span>. Formatuje etykietę Hasło.
#com_login_remember {} Identyfikator elementu <input> z polem wyboru Zapamiętaj.
.com_login_remember {} Styl elementu <span>. Formatuje etykietę Zapamiętaj [dodane w wersji polskiej].
.lostpasssword {} Styl elementu <div>. Formatuje obszar z odnośnikiem Nie pamiętam hasła.
.register {} Styl elementu <div>. Formatuje obszar z tekstem Konto? i odnośnikiem Zarejestruj.

Komponent Registration

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
.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
ElementyZastosowanie elementu
.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ć /*????????????????????????? */

Tabela 1. Elementy ogólnego zastosowania
ElementyZastosowanie elementu
.error {} w formularzu Poleć znajomemu w przypadku błędów formatuje tekst komuniktu o niepoprawnie wypełnionych polach
.polls_color_ {}
.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
 
« poprzedni artykuł   następny artykuł »