Klasa moduletable

Nazwa klasy .moduletable sugeruje, że formatuje ona tabelę, w której umieszczono moduły. Tak, ale nie tylko. Klasa ta może formatować:

• właściwości tabeli z modułami: elementów <table>, <tr> i <td>,
• właściwości elementu obejmującego <div>.

Aby określić wygląd modułów, zdefiniuj więc w arkuszu stylów reguły dla:

• selektora prostego klasy .moduletable {}, formatujące tabelę lub element obejmujący <div>,
• selektora kontekstowego .moduletable th {}, formatujące wiersz nagłówka tabeli zawierającej moduł (tytuł modułu) i tytuł modułu.
• selektora kontekstowego .moduletable td {}, formatujące komórkę zawierającą prezentowane przez moduł treści, w tym właściwości tekstu.

Klasa module - zaokrąglone szczęście

Klasa module formatuje moduły w formacie X-Joomla (-2) i X-Joomla rozszerzony (-3). Pierwszy format generuje kod umieszczający szablon w pojedynczym elemencie <div>:

 
<div class="module[suffix]">
    <h3>Tytuł modułu</h3>
    Treść modułu
</div>

A drugi generuje dla każdego modułu następujący kod:

 
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Tytuł modułu</h3>
        Treść modułu
      </div>
    </div>
  </div>
</div>

Jeśli w parametrach modułu opcja Pokaż tytuł zostanie ustawiona na Nie, element h3 nie jest generowany.

Klasa ta umożliwia umieszczenie modułu w ramce z zaokrąglonymi narożnikami. Jeśli chcemy skorzystać z tej możliwości, w arkuszu stylów należy zdefiniować deklaracje stylów.

Techniki zaokrąglania narożników

Zaokrąglone narożniki można uzyskać na wiele sposobów. Odnośniki do stron opisujących popularne techniki znajdziesz m.in. pod adresami:

• Rounded Corners,
• Smiley Cat

Stała szerokość lub wysokość ramki

Uzyskanie efektu zaokrąglonych narożników za pomocą CSS i obrazków jest prostsze w przypadku ramek o stałej szerokości lub wysokości. Popularną jest np. technika suwanych drzwi CSS (Sliding Doors of CSS) opracowana przez Douglasa Bowmana. Wykorzystuje się w niej jako tło dwa obrazki z zaokrąglonymi rogami lub innymi kształtami, wyrównywane do krawędzi ramki. D. Bowman.opracował tę technikę dla uzyskania zaokrąglonych narożników w zakładkach, w których tekst wymaga czasem rozszerzenia tła w poziomie - stąd nazwa techniki.

Technikę tę lub którąś z jej modyfikacji można zastosować w przypadku formatu X-Joomla (-2).

Poniżej publikujemy przykladowy kod z poradnika Joomla Template Tutorial.

 
.moduletable-box {
  margin:0 0 10px 0;
  padding:0 0 10px 0;
  background:url(../images/bottom.png) bottom left no-repeat;
}
.moduletable-box h3 {
  padding:8px 10px 6px 15px;
  margin-bottom:8px;
  text-align:left;
  font:bold 1.1em Arial,Helvetica,sans-serif;
  color:#fff;
  background:url(../images/top.png) top left no-repeat;
}

Jak widać z kodu, zastosowanie tego rozwiązania wymaga przygotowania dwóch obrazków. Dzięki temu, że w kodzie wynikowym mamy dwa elemeny (<div class="moduletable-przyrostek"> i <h3>), można im przypsiać różne tło - elementowi <h3> wyrównywane do górnej krawędzi, z efektami dla lewego i prawego górnego narożnika, a elementowi <div class="moduletable-przyrostek"> wyrównywane do dolnej krawędzi, z efektami dla lewego i prawego dolnego narożnika. Obrazek tła elementu <div class="moduletable-przyrostek"> musi być na tyle wysoki, aby - w przypadku dużej objętości treści modułu nie powstała pusta przestrzeń między pod nagłówkiem.

Zmienna wysokość i szerokość ramki

Zaokrąglone szczęście, jak ktoś określił ten efekt, wymaga zastosowania czterech oddzielnych obrazków, po jednym dla każdego rogu. Każdy narożnik musi być zdefiniowany odrębnie, aby istniała możliwość rozciągania prostokąta w każdym kierunku. Stąd też w generowanym przez szablon kodzie mamy cztery znaczniki <div>, aby dla każdego zdefiniować obrazki tła. Ilustracja obok pomoże zrozumieć zasadę działania.

Obrazek lewego górnego rogu powinien być na tyle długi i na tyle szeroki, aby wystarczył na wypełnienie przewidywanej maksymalnie wysokości i szerokości ramki modułu. Obrazek prawego górnego rogu i prawej krawędzi powinien mieć wysokość równą wysokości poprzedniego. Obrazek dolnego prawego rogu natomiast powinien mieć szerokość równą szerokości pierwszego. Czwarty obrazek to prawy dolny narożnik.

Poniżej zamieszczamy dostosowane do tej techniki deklaracje stylów udostępnione w poradniku Joomla Template Tutorial:

 
 
div.module-grey h3, div.moduletable-grey h3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #333;
  margin: -2px -8px 0 -8px;
  border-bottom: 1px solid #cdcdcd;
  padding-left: 10px;
  padding-bottom: 2px;
}
div.module-grey, div.moduletable-grey {
  background: url(../images/box_grey_tl.png) 0 0 no-repeat;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
div.module-grey div, div.moduletable-grey div {
  background: url(../images/box_grey_tr.png) 100% 0 no-repeat;
}
div.module-grey div div, div.moduletable-grey div div {
  background: url(../images/box_grey_bl.png) 0 100% no-repeat;
}
div.module-grey div div div, div.moduletable-grey div div div {
  background: url(../images/box_grey_br.png) 100% 100% no-repeat;
  padding: 8px;
  width: auto !important;
  width: 100%;
}
div.module-grey ul, div.moduletable-grey ul {
  margin: 10px 0;
  padding-left: 20px;
}

Klasy z przyrostkiem

Jeśli chcesz niektórym modułom nadać specyficzny, odróżniający je od innych wygląd, możesz zdefiniować w arkuszu stylów odmiany klas moduletable i module (zobacz ilustrację, na której przedstawiono trzy różniące się wyglądem moduły.

Ważne: O zastosowaniu do formatowania modułu jednego z dostępnych wariantów klasy .moduletable i module decyduje administrator serwisu. W instrukcji do szablonu należy w związku z tym umieścić informację o dostępnych wariantach tych klas.

Wariantowe klasy .moduletable imodule należy uzupełnić o przyrostek, najlepiej sygalizujący przeznaczenie, np.: -nav, -login, -latest czy -popularne. Ten przyrostek (wraz z myślnikiem) administratorzy wykorzystują w parametrach modułu.

Style klasy .moduletable-zprzyrostkiem czy module-zprzyrostkiem nie nadpisują stylów klasy .moduletable czy .module. To ważna informacja! Dla klas .moduletable-zprzyrostkiem i module-zprzyrostkiem należy określić wszystkie reguły formatujące. Najprościej zatem skopiować deklaracje selektorów klas .moduletable czy module, a następnie dopisać do ich nazw przyrostek i zmodyfikować te właściwości, które mają wyróżniać nowo utworzone style.