Template stijlen

Om het effect van stijlen zichtbaar te maken hebben we een voorbeeld template gemaakt. 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 zonder voorbeeldcontent kan worden geïnstalleerd. Verder is alleen de template gestijld.

De template heeft 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 template heeft de volgende stijlen:

/* ---------------
   Template styles
---------------- */

#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 20px 25px;
}

#right_container {
   width: 170px;
   float: left;
   padding: 10px 0 20px 10px;
}

#footer_container {
   width: 100%;
   height: 50px;
   clear: both;
   background-image: url(../images/bg_footerbanner.jpg);
   background-repeat: repeat-x;
}

De template ziet er zonder content als volgt uit.

Voorbeeld joomla 1.5 met alleen de template stijlen

De voorbeeldwebsite hebben we gevuld met dummy-content en alleen de template stijlen geactiveerd. Zonder de reset- en basisfont stijlen en algemene content stijlen toe te passen ziet de pagina er in FireFox als volgt uit:

De getoonde pagina is geheel gebaseerd op de standaard browser stijlen van FireFox. De links zijn blauw, de bullits van de list springen in, Rond de afbeeldingen van de icoontjes (pdf, print. e-mail en RSS-Feed) is een blauwe border (gelinkte afbeeldingen hebben standaard een blauwe border in veel browsers). Rond de log-in module in de rechterkolom wordt een border (van de fieldset) getoond. Het standaard lettertype is Times New Roman (Dit kan overigens per browser anders zijn ingesteld.

Voorbeeld website Joomla 1.5 met de template stijlen en reset- en basisfontstijlen

Door naast de template stijlen ook de reset- en basisfontstijlen toe te passen is uit uiterlijk van de website gewijzigd. Rond de afbeeldingen van de icoontjes is geen blauwe border meer zichtbaar. De border van de fieldset van de log-in module is verwijderd. Het lettertype is gewijzigd in Arial, 13 pixels en een line-height van 17px volgens de specificatie van de basisfontstijlen.

Voorbeeld website joomla 1.5 met de template stijlen, reset- en basisfontstijlen en algemene content stijlen

Voorbeeld website joomla 1.6 / 1.7 / 2.5 met de template stijlen, reset- en basisfontstijlen en algemene content stijlen

Afhankelijk van uw Joomla versie (1.5 of 1.6 / 1.7) kunt u doorgaan met de Joomla content stijlen en stijlen voor de Joomla components en modules.

• Toevoegen

Reacties (2)

• 1901-12-13 20:45:52 |Unregistered| Karen  - Bedankt
  Hallo,
  
  Mijn website heb ik nog niet online gezet. Maar ik snap nu wat belangrijk is om een goed Joomla site te stylen. Ik heb jullie voorbeelden toegepast en dat werkt prima. Uitleg is helder.
  Nu ga ik zelf met photoshop en css verder puzzelen.
  
  groetjes Karen
  Antwoorden

• 1901-12-13 20:45:52 |Unregistered| antoon  - compliment
  Ik heb een aantal websites gebouwd met html/CSS en werd een echte CSS-puzzelaar. Joomla bleef een black box zolang ik met templates van anderen bleef werken. Ik kon maar niet zien/begrijpen hoe ik via CSS een joomla site kon stijlen. Nu dus wel. Bedankt.
  Antwoorden

Post een commentaar of stel een vraag

Uw contact gegevens:

Naam:

Email: Stuur mij GEEN E-mail bericht bij een reactieHoud mij op de hoogte bij een reactie reactie

Website:

Reacties:

Onderwerp:

Commentaar of vraag:

Spam beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by Compojoom comment 4.2.1