 Joomla template css stijlen
Om het effect van stijlen zichtbaar te maken hebben we een voorbeeld template gemaakt, gebaseerd op het ontwerp van deze website. De titel van de website is: "Creative Webstudio Joomla Handleiding CSS". We starten als er nog geen content in de website aanwezig is. Alleen één menu-item (Main menu) is standaard aanwezig, zoals Joomla ook zonder voorbeeldcontent kan worden geïnstalleerd. Verder is alleen de template gestijld.
Het is een eenvoudige template met de volgende structuur.
<div id="wrapper">
<div id="top_container">
<div id="logo" ></div>
<div id="topheadertekst">Joomla CSS handleiding</div>
<div id="topmenu"><jdoc:include type="modules" name="top" style="xhtml" /></div>
</div>
<div id="middle_container"><jdoc:include type="component" /></div>
<div id="right_container"><jdoc:include type="modules" name="right" style="xhtml" /></div>
<div id="footer_container"><jdoc:include type="modules" name="footer" style="xhtml" /></div>
</div>
De nog lege template ziet er in een browser als volgt uit.
De template heeft de volgende stijlen:
#wrapper {
width: 780px;
margin: 20px auto 0 auto;
background-color: transparent;
border-left: 1px #666 dotted;
border-right: 1px #666 dotted;
background-image: url(../images/bg_content.jpg);
background-position: 0 95px;
background-repeat: no-repeat;
}
#top_container {
width: 760px;
height: 75px;
background-image: url(../images/bg_topbanner.jpg);
background-repeat: repeat-x;
padding: 20px 0 0 20px;
}
#logo {
float: left;
width: 256px;
height: 33px;
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
padding: 0 20px 0 0;
}
#topheadertekst {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
line-height: 28px;
color: #fff;
padding: 5px 0 0 0;
}
#topmenu {
clear: both;
margin: 6px 0 0 0;
height: 30px;
}
#middle_container {
width: 560px;
float: left;
padding: 10px 15px 0 25px;
}
#right_container {
width: 170px;
float: left;
padding: 10px 0 0 10px;
background-image: url(../images/bg_right.jpg);
background-repeat: repeat-x;
}
#footer_container {
width: 100%;
height: 50px;
clear: both;
background-image: url(../images/bg_footerbanner.jpg);
background-repeat: repeat-x;
}
Deze template hebben we gevuld met dummy content en modules van Joomla. We zullen deze content verder gaan stijlen volgens het Stijlplan (stap 1. Basisstijlen en 2. Template stijlen zijn reeds ingevuld). In Internet Explorer ziet de voorpagina van deze website met gevulde dummy content er als volgt uit.
Door het invoeren van de basisstijlen is te zien dat bijvoorbeeld de lijsten netjes links lijnen met de overige tekst en dat de buttonheadings geen (lelijke blauwe) border hebben. Maar voor het overige moet er nog veel gebeuren.
We gaan nu de volgende stap uitvoeren: De Algemene stijlen.
|