 Joomla algemene css stijlen
De algemene stijlen behoren niet specifiek aan Joomla. Dit zijn de stijlen voor algemene html tags, zoals body, a, h1, p, ol, ul, input, button etc.
body
De body stijlen we zoals we het standaardlettertype, kleur of achtergrondkleur van de website stijlen. Als standaard lettertype van de website kunt u het beste de stijl (zonder marges of padding) van de paragraaf gebruiken. Daar waar geen p tag om de tekst staat (bijvoorbeeld in tabellen) toont de tekst toch het normale lettertype van de website.
Voor de voorbeeld website is gekozen voor de volgende stijlen.
body {
font-family: Verdana;
font-size: 12px;
line-height: 16px;
color: #660000;
}
Alleen al met deze stijl krijgt de website meteen een heel ander uiterlijk. We laten het bovenste deel van de website zien.
Header, paragraph en list stijlen
Joomla gebruikt naast algemene headers (h1, h2 etc.) ook andere headerstijlen, zoals componentheading of contentheading. Deze komen aan de orde bij de contentstijlen in het volgende hoofdstuk.
Voor de voorbeeld website hebben we de volgende stijlen gekozen.
h1 {
font-family:Arial;
font-size: 22px;
font-weight: bold;
color: #660000;
line-height: 22px;
margin: 0 0 10px 0;
}
h2 {
font-family:Arial;
font-size: 20px;
font-weight: bold;
color: #660000;
line-height: 20px;
margin: 0 0 3px 0;
}
h3 {
font-family:Arial;
font-size: 18px;
font-weight: bold;
color: #660000;
line-height: 18px;
margin: 0 0 3px 0;
}
h4 {
font-family:Arial;
font-size: 16px;
font-weight: bold;
color: #660000;
line-height: 16px;
margin: 0 0 3px 0;
}
h5 {
font-family:Arial;
font-size: 14px;
font-weight: bold;
color: #660000;
line-height: 14px;
margin: 0 0 3px 0;
}
h6 {
font-family:Arial;
font-size: 12px;
font-weight: bold;
color: #660000;
line-height: 12px;
margin: 0 0 3px 0;
}
p, ol, ul {
font-family: Verdana;
font-size: 12px;
line-height: 16px;
color: #660000;
margin-bottom: 15px;
}
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 stijl voor deze algemene html elementen, zoals “input”, “button” of “select”, maar altijd 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.
Opmerkingen
Input, select en button elementen zijn standaard verschillend gestijld door verschillende browsers, Voor Internet Explorer 6 en/of 7 kan eventueel een apart stylesheet worden opgenomen. 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 formulier elementen hebben de volgende algemene classes:
input (input.inputbox)
select (slelect.inputbox)
button (button.button)
In het blanco css bestand, dat u op deze website kunt downloaden, zijn de marges en padding voor deze elementen op 0 gezet bij de resetstijlen. Hierdoor vallen de buttonkaders direct om de buttontekst heen. Om deze reden is de volgende basisstijl opgenomen.
button, input.button {
padding: 0 5px 0 5px;
}
Optioneel zijn ook stijlen voor ul en ol opgenomen. In de resetstijlen hebben deze de stijl meegekregen van "list-style: none". Zonder wijziging van deze stijl zijn de bullits of nummers van de lijst niet meer zichtbaar. In de basisstijlen zijn de volgende stijlen opgenomen.
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;
}
Na het toepassen van deze algemene stijlen ziet de voorpagina van de voorbeeld website er als volgt uit.
Tussen de teksten en headers is met deze stijling ruimte gekomen en de meeste headers staan nu in het juiste lettertype en op de juiste grootte. De componentheading en contentheading zijn nog niet gestijld. Wel ziet u in het rechter menu, dat Internet Explorer de inputvelden van het log-in formulier een verschillende lengte geeft. We zullen dit oplossen bij de behandeling van de log-in module.
We gaan nu verder met het stijlen van de content van Joomla.
|