Pomoc - Artykuły wielostronicowe

Start

Programowanie

CSS w Joomla

Artykuły wielostronicowe

Administratorzy i redaktorzy Joomla! mogą dzielić dłuższe artykuły na części wyświetlane na kolejnych stronach. Funkcję tę obsługuje bot Paginacja [MOS Paging]. W konfiguracji globalnej witryny można ponadto włączyć opcję Paginacja - spisy treści, co spowoduje generowanie spisów treści dla artykułów wieloczęściowych.

Tabela ze spisem treści

Spis treści umieszczany jest w tabeli oznaczonej stylem contenttoc.

Spis treści artykułu wielostronicowego

Oto przyklad deklaracji:

Listing: Style dla spisu treści artykułów wielostronicowych

.contenttoc { /* dot. całej tabeli */
   float:right;
   margin            : 0 0 .84em 1.5em;
   width             : 25%;   /* konieczne w przypadku elementów pływających */
   border            : 1px solid #C7E7C7;
}
.contenttoc th {
   text-align        : center;
   font-size         : 1em;
   background-color  : #F5FcF5;
   margin            : 0 0;
   height            : 1.6em;    
   border-bottom     : 1px solid #C7E7C7;  
}
.contenttoc td {
   white-space       : nowrap;
   padding-right     : .5em;
}
.contenttoc td:hover { 
   color             : #ff0000;
}

Odnośniki

Jak w przypadku innych odnośników, można również umieścić w arkuszu stylów deklaracje dla pseudoklas:

a.toclink:link, {} - ustawia styl odnośnikom nieodwiedzonym.
a.toclink:visited{} - ustawia styl odnośnikom odwiedzonym.
a.toclink:hover{} - formatuje styl odnośnika, gdy wskaźnik myszki znajduje się nad nim
a.toclink:active{} - ustawia styl aktywego styl onośnika.

Paginacja

Spisowi treści artykułów wielostronicowych towarzyszy licznik stron wyświetlający wynik paginacji,np. Strona 2 z 6. Licznik umieszczany jest w blogu div z przypisaną mu klasą pagenavcounter. W arkuszu stylów można pominąć definicję stylu dla tego elementu, pozostawiając domyślne formatowanie zgodnie z ogólnymi właściwościami wszystkich bloków obejmujących teksty albo określić niektóre z właściwości.

Listing: Style dla spisu treści artykułów wielostronicowych. Paginacja

.pagenavcounter {
   font-size      : .85em;    /* ustala rozmiar czcionki */
   color          : #03060D;  /* ustala kolor czcionki */
   padding-bottom : 0 0 .84em ;  /* ustala odstępy od elementu poniżej */ 
   background     : url(../images/back_button.gif) no-repeat 0 .25em;
}

Zmiana wyglądu

Skrypt odpowiedzialny za spis treści artykułów wielostronicowych nie generuje kodu zgodnego z XHTML. Zamiast listy mamy jednokolumnową tabelkę z wierszami na każdą pozycję i sporo nadmiarowego kodu. Można go jednak łatwo zmodyfikować. Ilustracja poniżej przedstawia efekt niewielkich zmian w pliku /mambots/content/mospaging.php i, oczywiście, dostosowanego do wyświetlania listy poziomej arkusza stylów.

Poziomy spis treści artykułu wielostronicowego

Listing: Style dla spisu treści artykułów wielostronicowych lista pozioma

/* Spis artykułów wieloczęściowych - lista pozioma*/
 
div.contenttoc { 
  border: 1px solid #C7E7C7;
  margin: .5em 0;
  text-align: center;
} 
.contenttoc h3 { 
  text-align: center;
  font-size: 1em;
  background-color: #F5FcF5;
  margin: 0 0;
  height: 1.6em;    
  border-bottom: 1px solid #C7E7C7;  
} 
.contenttoc ul {
   list-style: none;  
  margin: 0;
  padding: .25em 0 ;    
}
.contenttoc ul li{
  display: inline;
  background-image: none;
  white-space: nowrap;
}
.contenttoc a {
  text-decoration: none;
}
.contenttoc a:link {
 
  color: #13A613;   
  margin: 0 .15em;
  padding: 0;
}
.contenttoc a:visited {
  color: #000; 
}
.contenttoc a:hover {
  color: #224322; 
}