Category List
The category list page without any additional styles looks as follows.
Structure with classes and id's
div.compinentheading
table.contentpane (align:center)
td.contentdescription (width:60%) Categorie beschijving
td Form
table
tr
td table
td (align:left width:60%) Filter op titel input.inputbox
td (align:right width:40%) Toon select.inputbox #limit
tr
td.sectiontableheader (align:right width:5%) #
td.sectiontableheader (width:45%) a Artikel titel
td.sectiontableheader (width:25%) a Datum
td.sectiontableheader (width:20%) a Auteur
tr.sectiontableentry1
td (align: right) 1
td a Voorpagina artikel 4
td Datum
td Administrator
tr.sectiontableentry2
td (align:right) 2
td a Voorpagina artikel 5
td Datum
td Administrator
tr.sectiontableentry1
td (align:right) 3
td a Voorpagina artikel 6
td Datum
td Administrator
tr.sectiontableentry2
td (align:right) Etc.
tr
td.sectiontablefooter (align:center) span.pagenav
table.contentpane
table.contentpane {
border: 1px #999 dotted;
}
table.contentpane td {
padding: 0 5px 2px 6px;
}
td.contentdescription
table.contentpane td.contentdescription {
font-family:Arial;
font-size: 18px;
font-weight: bold;
color: #660000;
line-height: 18px;
padding: 5px 0 10px 10px;
}
td.sectiontableheader
table.contentpane td form table td.sectiontableheader {
font-weight: bold;
}
tr.sectiontableentry1 and tr.sectiontableentry2
For every other row we style a different background colour.
table.contentpane tr.sectiontableentry1 {
background-color: #cccccc;
}
table.contentpane tr.sectiontableentry2 {
background-color: transparent;
}
A little more space between the list-items.
table.contentpane td form table table td {
padding: 0 0 10px 0;
}
After applying the styles the page looks like the following.
After clicking the article on the category list
Without any additional styles the page looks like the following.
Pagination
table.pagenav (stijl: align="center")
tr th.pagenav_prev a Vorige
th.pagenav_next a Volgende
table.pagenav, table.pagenav th.pagenav_prev and table.pagenav th.pagenav_next
table.pagenav {
margin-bottom: 10px;
}
After applying the styles the page looks like the following.
