Nazwa autora - klasa .small

Nazwa autora (pseudonim) umieszczana jest w elemencie span formatowanym stylem klasy .small. Styl ten formatuje również przycisk Zamknij w formularzu Powiadom znajomego. W regule formatowania można ustalić zmniejszony w stosunku do domyślnego rozmiar czcionki (zgodnie z nazwą stylu powinna być mniejsza) i ewentualnie pozostałe własności - kolor, wagę, np.:

Przykład reguły dla stylu klasy small:

.small {
  color            : #999;  /* ustala kolor tekstu */
  font-size        : .95em;    /* ustala rozmiar czcionki */
}

Data utworzenia artykułu - klasa .createdate

Umieszczana jest w komórce tabeli formatowanej klasą .createdate. Reguła może definiować właściwości czcionki i właściwości komórki.

Przykład reguły dla stylu klasy createdate:

.createdate {
  color            : #999;
  font-size        : .95em;
  text-transform   : capitalize; /* zmienia wielkość liter */
  height           : 1.25em;     /* ustala wysokość komórki */
  padding-bottom   : 1em;        /* ustala odstęp poniżej od następnego elementu */
  background       : url(../images/date.gif) no-repeat left;/umieszcza w tle obrazek
}

Data modyfikacji artykułu - klasa .modifydate

Umieszczana jest w komórce tabeli formatowanej klasą .modifydate. Podobnie jak w przypadku stylu .createdate reguła może definiować właściwości czcionki i właściwości komórki tabeli.

Przykład reguły dla stylu klasy modifydate:

.modifydate {
  height           : 1.25em;
  padding-top      : 1em;    /* ustala odstęp powyżej od poprzedniego elementu */
  color            : #999;
  font-size        : .95em;
}

Jeśli nie zamierzamy różnicować wyglądu tych dwu elementów treści, warto rozważyć możliwość zgrupowania selektorów:

Przykład reguły dla zgrupowanych selektorów:

.createdate, .modifydate {
  font-size        : .95em;
  color            : #999;
  font-size        : .95em;
  text-transform   : capitalize; 
  height           : 1.25em; 
  padding          : 1em 0;   /* ustala odstęp od elementów powyżej i poniżej */
  background       : url(../images/date.gif) no-repeat left;
}

Elementy oceny artykułu

Aż dwa style posłużyły projektantom Joomla! do oznaczenia elementów oceny artykułu: .content_rating {} oraz .content_vote {}. Nie byłoby w tym nic dziwnego, gdyby… nie fakt, że w arkuszach stylów trudno znaleźć przykłady reguł dla tych stylów.

Cały obiekt jest formularzem, a zatem jest osadzony w elemencie form. Część przedstawiająca wyniki oceny, w tym etykieta Oceny: objęta jest elementem span wyróżnionym klasą content_rating. Część służąca ocenianiu, ukazująca się tylko w widoku pełnego tekstu artykułu również jest objęta elementem span wyróżnionym klasą content_vote. Wewnątrz znajdują się słowa nazywające najniższą i najwyższą ocenę (Kiepski, Bardzo dobry), pięć przycisków opcji oraz przycisk Oceń wyróżniony klasą button.

Reguły w arkuszu stylów w niewielkim stopniu wpłyną na wygląd tego elementu strony. Pozwolą określić własności tekstu:

Przykład reguły dla stylu klas content_rating i content_vote:

.content_rating, .content_vote {
  color            : #999;
  font-size        : .95em;
}

Możliwe jest również ustalenie rozmieszczenia obrazków:

.content_rating img{
margin-top: -.5em;
margin-left: .25em;
}

Nadanie elementom oceny artykułu niepowtarzalnego charakteru wymagałoby podmiany obrazków rating_star.png i rating_star_blank.png umieszczonych w katalogu /images/M_images/ oraz sprecyzowania reguł wyświetlania tekstu. Poważniejsze zmiany możliwe są jedynie przez modyfikację kodu skryptu mosvote.php.

Ilustracje i podpisy

Niektóre właściwości wyglądu ilustracji definiowane są w edytorze artykułów na karcie Grafiki. W arkuszu stylów warto zdefiniować np. kolor tekstu czy obwódkę podpisu, obwódkę obrazka.

Przykład reguły dla stylu klasy mosimage:

.mosimage {
  border           : 1px solid #ccc;  /* ustala grubość, rodzaj i kolor ramki wokół */
  margin           : 5px              /* ustala margines wokół obrazka */
}

Przykład reguły dla stylu klasy mosimage_caption:

.mosimage_caption {
  margin-top       : 2px;             /* ustala margines nad podpisem obrazka */
  background       : #efefef;
  padding          : 1px 2px;
  color            : #666;
  text-transform   : uppercase;       /* zmienia litery w podpisie na wielkie */
  font-size        : .9em;
  border-top       : 1px solid #ccc;
}