It's no secret that content is what really makes a good website, although it can also be said that a good template can really help to show off that content in the best light. Elixer2.0 gives you a great basis on which to build your site, but a large portion of the effort is in constructing interesting and well structured content. This demo site uses some great techniques that you can also use and this page will provide an overview of how the Header module was constructed and the techniques and reasons behind it.

  


  

  

  
A Web 2.0 Template for Joomla!
  
Elixer2.0 has many fantastic features many of which you will find by 
browsing this demo site or by going straight to the 
features tab
. This template integrates two great mootools effects; 
Slimbox 
and 
Reflection to really add that professional web 2.0 zing that will make
your site stand out from the rest.

First off, my personal preference is to keep the HTML as lean as possible and use CSS to provide the majority of the layout. I like to create a Content section in the main template_css.css file of the template to contain my styling used for content sections such as this.

O.K., let's break down the html and show the appropriate CSS from the stylesheet to see what each part does and why

The name of this div is pretty obvious and should indicate the purpose of this element. I like to use divs for static image areas as they are by default a "block" element in that they can have a defined size and can be positioned anywhere you like. The use of an id rather than a class indicates that only one of these objects should exist on the page. So this is just a place holder div, the real meat of this element is of course in the stylesheet, so let's take a look at the CSS for this:

/* from template_css.css */

#screenshot {
	position: absolute;
	height: 195px;
	width: 343px;
	right: 30px;
	/* background: see style css */
}

/* from style1.css */

#screenshot {
	background: url(../images/style1/screenshot.jpg) 0 0 no-repeat;
}

This element is split over 2 CSS files for a good reason. All the non-color related elements are in the template_css.css file, while a separate stylesheet contains any portions that are color specific. This is one of the great features of CSS and how they have the name Cascading Style Sheets. Anyway, I digress, back to the code.

Position is set to absolute so that we can position it exactly in the header area. The height and the width of this div are set to match the height and width of the screenshot image we're going to use. The right property says that this div should be 30px from the right side of the surrounding div. This effectively moves the div in so that it's not flush against the right side. The background element from the style1.css file provides the actual image location. O.K., that was easy, what's next?

The next part is a button that we want to play at the bottom right of the content. This button has a link that takes you to the RocketTheme.com site. As you can see the <img> tag uses a blank image as it's src and a class to allow us to style and control it appropriately. Now for the CSS!

/* from template_css.css */

img.top_button {
	border: 0;
	position: absolute;
	right: 400px;
	top: 124px;
	/* background: see style css */
	width: 153px;
	height: 52px;
}

/* from style1.css */

img.top_button {
	background: url(../images/style1/head_button.jpg) no-repeat;
}

Again the styling of this element is similar to that of the screenshot. The position is absolute and border is set to 0 as IE will put a blue 3px border around an image by default. The width is set to be the same as that of the image it will contain, and the position is controlled by the right and top properties. This effectively sets this div to be located 124px from the top, and 400px from the right of the surrounding div. The background is again set in th e style1.css file.

The next block of HTML is a bit more interesting. Here it is again with the actual content part removed so we can break it down:

  

  

  
A Web 2.0 Template for Joomla!
  
...content...

The first thing you will notice is there is a <div id="topmodule"> surrounding this chunk of HTML. This is really just an element that controls padding. There are then two more divs with the id's sandbag1 and sandbag2. What on earth are these for you may ask? I'm about to explain a Very Useful technique for controlling how your text wraps around graphic elements on your page. The technique, as you may have guessed, is called "sandbagging" and basically consists of specifically sized divs floated against the sides of your containing div to provide a transparent block object that text has to wrap around. here is the CSS for these elements:

/* from template_css.css */

#topmodule {
	padding:  0;
}

#sandbag1 {
	/*border: 1px solid #f00;*/
	float: right;
	width: 350px;
	height: 100px;
}

#sandbag2 {
	/*border: 1px solid #f00;*/ 
	float: right;
	clear: right;
	height: 70px;
	width: 515px;
}

As you see above, the sandbags are floated to the right with a specified width and height set. The second sandbag has a clear: right; property so that it clears the first sandbag and sits under it. You can see how these sandbags actually will look by uncommenting the border property

TIP: When working with CSS use a temporary border element in a bright color to enable you debug styling issues

You can see the effect of enabling the borders has. You can clearly see the div's are providing an area for the text to wrap-around. if you modify the sizes of the images, you will have to adjust to the sizes of the sandbags to compensate. This is usually a process of trial and error.

The content itself that I removed in the previous html chunk is nothing special and is used for example purposes only. The next interesting part comes after the topmodule div.

The badge div is another div used as a place holder in a similar fashion to that of the screenshot. The only difference here is that this is a 32bit transparent PNG and it has a negative top margin so that it appears to float on top of the screenshot and also the tab bar above it. There is some special trickery needed to achieve the transparent PNG in IE and that is contained in the template_ie.css file that is only used by IE6 and below.

/* from template_css.css */

#badge {
	position: absolute;
	top:  -20px;
	right:  30px;
	width: 213px;
	height:  214px;
	/*background: see style css */
}

/* from style1.css */

#badge {
	background: url(../images/style1/badge.png) 0 0 no-repeat;
}

/* from template_ie.css */
body.style1 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style1/badge.png', sizingMethod='scale');
}

body.style2 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style2/badge.png', sizingMethod='scale');
}

body.style3 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style3/badge.png', sizingMethod='scale');
}

body.style4 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style4/badge.png', sizingMethod='scale');
}

body.style5 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style5/badge.png', sizingMethod='scale');
}

body.style6 #badge {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/rt_
elixer2.0/images/style6/badge.png', sizingMethod='scale');
}

The badge CSS is pretty much the same as the other elements except you see the use of the filter for the 32bit transparent PNGs in IE. The last bit of HTML is the clr div that is used to ensure that all floats are cleared so that layout and content can continue below without 'catching' on any of the floats.

That wraps up this tutorial, I hope it will prove useful to you.

Cheers!

Andy Miller
RocketTheme.com