Joomla categorie lijst css stijlen

De categorie lijst geeft een overzicht van artikelen uit een bepaalde categorie. In de voorbeeld website hebben we een categorie van voorpagina artikelen opgenomen. De categorie lijst ziet er zonder verdere stijling als volgt uit.

De structuur van de categorielijst

De stijlen

div.sectiontablefooter
Deze stijl is reeds behandeld, zie "div.componentheading".

table.contentpane
Voor deze tabel willen we voor de voorbeeld website wel een border stijl om de gehele categorielijst en wat padding tussen de categorielijst items. Bovendien willen we de teksten van de contentdiscription met een padding stijl laten lijnen met de regel van het filter.

table.contentpane {
   border: 1px #999 dotted;
   border-collapse:separate;
}

table.contentpane td {
   padding: 0 5px 2px 6px;
}

td.contentdescription
Wanneer in de categorie definitie een beschijving is meegegeven wordt deze boven de categorielijst getoond. We willen deze beschrijving stijlen als een contentheading (= aan stijl h3).

table.contentpane td.contentdescription {
   font-family:Arial;
   font-size: 18px;
   font-weight: bold;
   color: #660000;
   line-height: 18px;
   padding: 5px 0 10px 10px;
}

input en select
De input en select items stijlen we niet, zoals eerder aangegeven bij input, select en buttons.

td.sectiontableheader
In de tabel van de lijst zijn 4 cellen naast elkaar geplaatst, met elk een verschillende breedte percentage, samen 100%. Deze breedtes zijn met CSS stijling niet te wijzigen. Wel kunnen we de sectiontableheader laten onderscheiden van de overige tekst door de tekst vet te maken.

table.contentpane td form table td.sectiontableheader {
   font-weight: bold;
}

De hyperlinks van de tabelkoppen zijn uniek te stijlen. Wij laten ze echter in de stijl zoals al aangeven onder de algemene stijlen.

table.contentpane td form table td.sectiontableheader a,
table.contentpane td form table td.sectiontableheader a:visited  { }

table.contentpane td.sectiontableheader a:hover { }

tr.sectiontableentry1 en tr.sectiontableentry2
Net als bij de archieflijst worden de rijen afgewisseld met een wisselende class. Hierdoor is het mogelijk om de rijen onderscheidend te maken met een achtergrondkleur.

table.contentpane tr.sectiontableentry1 {
   background-color: #cccccc;
}

table.contentpane tr.sectiontableentry2 {
   background-color: transparent;
}

Ook in de lijstitems kunnen de links specifiek gestijld worden. Voor de voorbeeld website stijlen we deze niet.

table.contentpane tr.sectiontableentry1 a,
table.contentpane tr.sectiontableentry1 a:visited { }

table.contentpane tr.sectiontableentry1 a:hover { }

table.contentpane tr.sectiontableentry2 a,
table.contentpane tr.sectiontableentry2 a:visited { }

table.contentpane tr.sectiontableentry2 a:hover { }

Wel willen we tussen de lijst items iets meer padding.

table.contentpane td form table table td {
   padding: 0 0 10px 0;
}

td.sectiontablefooter
Er is ook nog een tablefooter stijl. Hierin is de paginatie opgenomen. Deze wordt getoond wanneer er meer items zijn dan is gefilterd. De paginatie is dezelfde als bij de voorpagina in blog layout en de archieflijst (zie  span.pagenav).

table.contentpane form table td.sectiontablefooter { }

Na stijling ziet de categorielijst pagina er als volgt uit.

Tonen van het artikel uit de categorielijst
Wanneer op een artikelnaam wordt geklikt wordt een nieuwe pagina getoond met de tekst van het artikel. Onder het artikel is een paginatie opgenomen, om naar het volgende of vorige artikel uit de lijst te gaan.

De pagina ziet er zonder aanvullende stijlen als volgt uit

Wat opvalt is dat de paginatie boven de kleine tekst staat (laatst aangepast..).

De structuur van de paginatie is als volgt.

table.pagenav (stijl: align="center")
   tr   th.pagenav_prev   a   Vorige
        th.pagenav_next   a   Volgende

Stijlen

table.pagenav, table.pagenav th.pagenav_prev en table.pagenav th.pagenav_next
We willen voor de voorbeeld website alleen meer ruimte tussen de paginatie en de kleine tekst. Dit doen we met de volgende stijl.

table.pagenav {
  margin-bottom: 10px;
}

De links van de paginatie zijn ook uniek te stijlen. Wij vullen hier geen stijlen in.

table.pagenav th.pagenav_prev a,
table.pagenav th.pagenav_prev a:visited { }

table.pagenav th.pagenav_prev a:hover { }

table.pagenav th.pagenav_next a,
table.pagenav th.pagenav_next a:visited { }

table.pagenav th.pagenav_next a:hover { }

Na stijling ziet de pagina er als volgt uit.

• Toevoegen
• Zoeken

Commentaar (0)

Schrijf commentaar

Uw contact gegevens:

Naam:

Email: geen bericht bij reactiehoud me op de hoogte bij reactie

Website:

Commentaar:

Onderwerp:

Bericht:

Beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by !JoomlaComment 4.0 beta2