Archive
There are two ways to display archived articles.
- Archive module
- Menu-item archive.
Here we only discuss the Menu item Archive.
Menu-item list articles archived
Without any additional styling the page looks as follows.
Structure with classes and id's
form#jForm
div.componentheading Archief overzicht
input.inputbox
select.inputbox#month
select.inputbox#year
select.inputbox#limit
button.button
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
li.row2
Etc.
ul#archive-list
ul#archive-list {
padding: 15px 0 10px 0;
}
li.row(n)
We can style each other row with a different background colour.
li.row2 {
background-color: transparent;
padding: 5px 0 5px 0;
}
li.row1 {
background-color: #D9E0FF;
padding: 5px 0 5px 0;
}
h4.contentheading
Here we use the same styles as the content heading.
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
Here we use the same styles as the article info (span.small)
h5.metadata {
font-family: Verdana;
font-size: 10px;
line-height: 10px;
color: #666;
}
span.created-date { }
span.author { }
Pagination
div#navigation {
margin: 0 0 30px 0;
text-align: center;
}
Print screen after applying CSS
