 Joomla archief css stijlen
Wanneer artikelen zijn gearchiveerd zijn er 2 mogelijkheden om een archiefoverzicht te tonen. Wanneer de archiefmodule is geactiveerd wordt een nieuw menu getoond met items per kalendermaand. Alle artikelen van die maand worden in een lijst getoond met een introtekst. Bovenaan de lijst is een filter, waarmee gezocht kan worden in het archief. U kunt ook in een bestaand ander menu, bijvoorbeeld het Hoofdmenu, een Archieflink opnemen. Het resultaat, een archieflijst, is in beide hetzelfde. In de voorbeeld website is de Archieflink opgenomen in het Hoofdmenu. Er zijn 7 artikelen gearchiveerd, waarvan er 5 zichtbaar. Zonder aanvullende stijling ziet de pagina er als volgt uit.
We willen hier nog specifieke stijlen toepassen. De lijst willen we links uitlijnen met de componentheading. Tussen de lijstitems moet er meer ruimte komen en een per lijstitem een wisselende achtergrondkleur. De “gemaakt …” tekst moet in het kleine lettertype, zoals op de voorpagina worden gestijld. De introteksten lijken goed en de paginatie onderaan de pagina is reeds gestijld bij de voorpagina.
De stuctuur van het archiefoverzicht
form#jForm
div.componentheading Archief overzicht
input.inputbox
select.inputbox#month
select.inputbox#year
select.inputbox#limit
button.button
ul#archive-list (list-style:none)
li.row2
h4.contentheading
h5.metadata
span.created-date
span.author
div.intro
li.row1
h4.contentheading
h5.metadata
span.created-date
span.author
div.intro
Stijlen
form#jForm
Het formulier van de archiefpagina omvat alle hierna genoemde stijlelementen. In de basis stijlen is een form als volgt gedefiniëerd:
form {
margin: 0;
padding: 0;
}
Het formulier van de archiefpagina heeft ook een id (#jForm), zodat het formulier specifiek voor de archiefpagina gestijld kan worden met:
form#jForm { }
In de voorbeeld website is geen aanvullende stijl voor het formulier ingevuld.
div.componentheading
Deze stijl is reeds gedefiniëerd. Zie div.componentheading.
Stijlen archief filter
De stijlen van de input (input.inputbox), select (select.inputbox) en button (button.button) elementen hebben we niet in de Algemene stjilen ingevuld. De reden hiervoor was dat deze formulier elementen in verschillende browsers steeds weer anders tonen. We stijlen hier dus ook geen formulier velden. Wel is het "select" element voorzien van een unieke ID, waardoor deze specifiek te stijlen zijn. Deze zijn:
select#month
select#year
select#limit
select#month, select#year, select#limit {
width: ;
background-color: ;
border: ;
font-family: ;
font-size: ;
font-weight: ;
margin: ;
padding: ;
color: ;
text-align: ;
}
ul#archive-list
Om de archieflijst helemaal links te laten lijnen en marge te houden ten opzichte van de componentheading is de volgende stijl opgenomen voor de voorbeeld website.
ul#archive-list {
margin: 15px 0 10px 0;
padding: 0;
}
li.rowx
Voor de li elementen kunnen we per item een achtergrondkleur wisselen en padding instellen om de items vertikaal iets uit elkaar te halen en te kunnen onderscheiden. Voor de voorbeeld website hebben we de volgende stijlen ingevoerd:
li.row2 {
background-color: transparent;
padding: 5px 0 5px 0;
}
li.row1 {
background-color: #D9E0FF;
padding: 5px 0 5px 0;
}
h4.contentheading
Deze contentheading willen we hetzelfde stijlen als de contentheading van de pagina's (td.contentheading).
h4.contentheading a, h4.contentheading a:visited {
display: block;
font-family:Arial;
font-size: 18px;
font-weight: bold;
line-height: 18px;
padding: 0 0 5px 0;
}
h4.contentheading a:hover {
display: block;
font-family:Arial;
font-size: 18px;
font-weight: bold;
line-height: 18px;
padding: 0 0 5px 0;
}
h5.metadata
Vervolgens willen we de metadata (datum gemaakt… en gemaakt door …) hetzelfde stijlen als de “kleine tekst” bij de artikelen (span.small, td.createdate en td.modifydate). We hoeven alleen deze stijl aan te passen. De subitems (span.createdate en span.author) zullen deze stijl automatisch overnemen.
h5.metadata {
font-family: Verdana;
font-size: 10px;
line-height: 10px;
color: #666;
}
span.created-date { }
span.author { }
div.intro
Indien we deze stijl niet invullen wordt automatisch de body stijl (=paragraaf stijl, zonder ondermarge) aangehouden. Voor de voorbeeld website hebben we deze stijl dan ook niet ingevuld.
div.intro { }
Paginatie
Er wordt een paginatie getoond indien er meer items bestaan dan maximaal op de pagina getoond wordt. Hier kunnen nog stijlen worden aangegeven, bijvoorbeeld om iets meer marge aan de onderzijde te verkrijgen voor de gehele paginatie. We creëren daarom iets meer ruimte tussen de paginatie en de footer van de pagina.
div#navigation {
margin: 0 0 30px 0;
text-align: center;
}
De archief pagina ziet er na het doorvoeren van de stijlen als volgt uit.
|
ul {
margin: 0 0 0 17px;
}
Dit is wederom niet het geval, is nu al de 3e keer dat zoiets beweerd word, waardoor ik ga twijelen of het blanco css bestand wel helemaal correct is of dat er hier op de website nog dingen verkeerd staan.
Groet Willem