Algemene content stylen
De algemene stijlen zijn niet specifiek aan Joomla gerelateerd. Dit zijn de stijlen voor algemene html elementen, zoals body, a, h1, p, ol, ul, input, button etc.
body
Het body element is al gedefiniëerd in de reset- en basisfontstijlen. Bij de Algemene stijlen willen we deze bodystijlen overschrijven. Voor de voorbeeldwebsite willen we in plaats van Arial het lettertype Verdana gebruiken met een andere font-size, line-height en font color. De nieuwe bodystijl passen we ook toe op de paragraaf (p) en list (ul en ol) stijlen. Daar waar in de code geen p (paragraaf) element om een tekst staat toont de browser toch het algemene lettertype van de website, omdat deze dan de stijl van de body aanneemt.
Voor de voorbeeld website is gekozen voor de volgende stijlen.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #660000;
}
Header, paragraph en list stijlen
Joomla gebruikt naast algemene headers (h1, h2 etc.) ook andere headerstijlen t.w. componentheading en contentheading. Deze komen aan de orde bij de Joomla content stijlen.
Voor de voorbeeld website hebben we de volgende stijlen gekozen.
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #660000;
line-height: 22px;
margin: 0 0 10px 0;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #660000;
line-height: 20px;
margin: 0 0 3px 0;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #660000;
line-height: 18px;
margin: 0 0 3px 0;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #660000;
line-height: 16px;
margin: 0 0 3px 0;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #660000;
line-height: 14px;
margin: 0 0 3px 0;
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #660000;
line-height: 12px;
margin: 0 0 3px 0;
}
p, ol, ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #660000;
margin-bottom: 15px;
}
/* Ongenummerde en genummerde lijsten */
ul {
padding: 0 0 0 15px;
list-style: disc;
}
ul li ul {
list-style: circle;
}
ol {
padding: 0 0 0 20px;
list-style: decimal;
}
ol li ol {
list-style: lower-alpha;
}
Link stijlen
Voor de voorbeeld website zijn de volgende stijlen gekozen.
a, a:visited {
outline: 0 none;
text-decoration: underline;
color: #660000;
}
a:hover {
outline: 0 none;
text-decoration: none;
color: #ff0000;
}
Input, select en button stijlen
Gebruik bij voorkeur geen algemene stijl voor deze html elementen, zoals "input", "button" of "select", maar zoveel mogelijk in combinatie met een class of id van Joomla. Input, select en button elementen komen veel voor in de bronbestanden van Joomla. Veel van deze elementen zijn specifiek te stijlen door de id of class toe te voegen (bijvoorbeeld voor de searchbox of het log-in formulier). Deze classes en id’s zijn bij de betreffende modules opgenomen.
Opmerking
Input, select en button elementen zijn standaard sterk verschillend gestijld door verschillende browsers. Voor uitgebreide stijlingsmogelijkheden van deze en andere formulier-elementen verwijzen wij u naar de volgende website: http://www.456bereastreet.com/lab/styling-form-controls-revisited. In de voorbeelden op deze website worden ook de effecten in verschillende browsers getoond. Deze site heeft overigens interessante weetjes over het gebruik van CSS en HTML.
De stijlen in de Joomla content voor deze elementen hebben onder meer de volgende algemene classes:
input (input.inputbox)
select (select.inputbox)
button (input.button & button.button)
In de reset stijlen zijn de elementen input, select en button "gereset" met een padding 0 en margin 0. De buttons hebben dan bijna geen button-klik ruimte meer om de tekst heen. Om dit te herstellen is gekozen voor onderstaande buttonstijlen, die de resetstijlen zullen overschrijven.
input.inputbox {}
select.inputbox {}
button, input.button, button.button {
padding: 1px 7px 1px 7px;
}