Template styles

To visualize the effect of the styling, we have created an example template: "Creative Webstudio Joomla Handleiding CSS". We start when there is no content added in the website. Just the main menu (just one item "Home"). This is the result of a Joomla installation without any example content in it.

The template has the following HTML structure.

<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>

We apply the following styles to the template.:

#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;
}

Without any content the website looks like this.

Content Joomla 1.5 with only template styles

We have added content to the website and apply only the template styles (not the reset or default font styles and no general styles). We want to show this to demonstrate the changes after you apply the reset, default font and general content styles.

The print screen of the page above is based on the display in FireFox (default settings). The links are blue, the bullits of the list indent. The borders of the icons (pdf, print. e-mail and RSS-Feed) are thick blue (all hyper linked images have a blue border in many browsers). The log-in module has a border (field set). The default font is Times New Roman (This can be different in browsers).

These styles are not the styles we want.

Content joomla 1.5 with template, reset- and default font styles

By applying these styles the website displays differently. Many of the weird styles, like blue borders around linked images are gone. Almost everything has changed.  But it is still not what we want.

Content Joomla 1.5 with the defined styles so far (template, reset-, default font and general content styles)

Content Joomla 1.6 / 1.7 with the defined styles so far (template, reset-, default font and general content styles)

Depending on your Joomla version (1.5 of 1.6 / 1.7) you can proceed with applying the Joomla Content Styles.