Let’s face it, making a joomla theme with tables is easy. That’s why we all
did it (may we hang our heads in shame). Achieving the same using CSS is much
harder. The learning curve is steep and there are lots of issues with how
browsers interpret the CSS. We mentioned this some in our joomla tutorial: Joomla,
doctype and the blank joomla template.
I am going to move quickly on to the actual layout possibilities, but I
recommend reading at least one "beginners guide to CSS" if new to it. Here are a
few suggestions:
Kevin Hale’s – An Overview of Current CSS Layout
Techniques
htmldog’s CSS
Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.com
Ok, so now we have done some bedtime reading, or knew some of CSS to start,
its time to look at our layout choices. Here is a decent list of all the CSS
template /CSS themes I have come across:
- [Position is Everything’s] One True Layout
- [Dennis
Kracht’s] 3col background-color Layout - [Rob
Chandanais’] Blue Robot "3 col Flanking" - [Eric Costello’s] glish.com "3 columns, the holy grail"
- [Holly ‘n John] "Three Column Stretch"
- [Mark
Newhouse’s] nn4_3col_header - [Craig
Salia’s] saila_layout - [Al
Sparber’s] 3boxnoscript - [Owen
Brigg’s] see multiple examples - [Douglas
Livingstone’s] fixed: px - [Douglas
Livingstone’s] flexible: % - [Douglas
Livingstone’s] flexible: % or px, full bg colors on side columns - [Dug
Falby’s] A List Apart article - [Ben
Meadowcroft] - [Holly
‘n John] Source Ordered Columns - [Alex
Robinson’s] one of several - [Mike
Foster’s] Absolute Magnitude Site - [Holly
Bergevin’s] unique demo for Jonas - [Holly
‘n John] 3 Col – Equal Height "Flag demo" - [pixy’s] 3 Col – Equal Height with Footer (no hacks)
- [Jason
Estes’] any column expands height - [Enzo’s] 3 Col Pixel Perfect w/header & footer
- [Ben
de Groot’s] 3 Col Flexible w/header&footer - [Holly
‘n John] Ordered Borders Layout - [Holly
‘n John] The Rigid Piefecta - [Paul
O’Brien’s] Three Equalizing Columns Layout - [Paul
O’Brien’s] Three Equalizing Columns Layout PLUS Source ordering - [Tonico’s] "Flexible Layout" with elastic behaviour
- [Liam
Delahunty’s] Centered layer – version 1 - [Ruthsarian
Labs] Skidoo – 3 Columns - [Gavin
Kistner’s] 3 Column Border Layout - [Alex
Robinson’s] Liquid center and right - [Alscreations’s] With sub-header for menu/breadcrumbs
- [WebRef’s] Replicate front page tutorial
- [M.
Meadhra]/Builder.com with re-ordering column code - [Peter
Lambert’s]Inneroptics layout - [Tiffany
B. Brown] multiple examples - [Thierry
Koblentz’] Liquid center (no hacks) - [John
Oxton] - [luci’s] 3 Cols Source Ordered Floating Layout
- [Thierry
Koblentz’] All Liquid (no hacks at all)
Although its worth taking a while to look some of these over. This list is
more of a resource you can bookmark and come back to later. You could use any of
them to make a joomla website.
A Three Column Joomla Theme through CSS
After reading through any of these CSS guides above, or know a little
youself, you will know that there are a number of ways to layout a page. Now,
for those with a little CSS background already, you might want to wander over to
csscreator.com; http://www.csscreator.com/version2/pagelayout.php. Its a great
tool where you can make an assortment of layouts and it will generate the CSS
for you, don’t leave home without it!
Overview of a Joomla Design
However, for the purposes of this joomla tutorial, we are going to be using a
different layout technique (csscreator uses floats), that being absolute
positioning. I think that using this CSS is perhaps the easiest model to
understand for beginners. Quite simply you specifiy exactly where the "box" of
content will be on the page. So for example:
{
position:absolute;
top:20px;
left:50px;
width:200px;
}
will make a box that is 200px wide, and starts 20px from the top and 50px
from the left. Now, 50 pixels from what I hear you ask. Well, there is a trick
here, normally it will be 50 pixels from the top of the viewport (browser
window). However, if the parent selector (the box the leftcontent box is in) is
also positioned, then the leftcontent style will be relative to THAT. OK, you
can go grab another beer/chai/sherbet, that made no sense to me either! Let’s
add another style and draw a couple of pictures…
This will be the parent box:
position:relative;
width:560px;
margin: 50px
auto;
}
If curious, we have changed the type of positioning from absolute to relative
(there is also fixed). We are getting into what is called "document" flow and
how elements effect other elements. Read any of the layouts above and you will
find discussions on this. OK, let’s use this html as out first example:
Text in wrapper, blah, ipsum
stuff
</div
<div id="leftcontent"
Leftcontent text,
blah and domini and what is the url to generate that random
latin?
</div
Based on our two CSS rules above, this would look like:
OK, not much use. Now let’s put the leftcolumn div inside the wrapper (hey,
why do you think we called it "wrapper"?)
wrapper text, blah, blah and ipsum
stuff
<div id="leftcontent"
Text in leftcontent, blah, blah and
ipsum domini and what is the url to generate that random
latin
</div
</div
Now it should look like this:
Much better. Now the text is all ontop of itself, but we don’t need to worry
about that at the moment. We can now look at the CSS we will use for our page.
Note this gets put in a seperate CSS file called layout.css, which is then
imported into template_css.css. I tend to seperate layout from typography in
design, then put together for production. One reason is to try and reduce
browser errors. Many of these errors are when you try and combine positioning
with padding and/or size. Try to avoid
applying padding/borders and a fixed width to an element.
By putting all my positioning in this sheet and all my padding and borders in
another, it forces me to do this (I combine the sheets later). Steps like this
make validating your joomla website much easier.
So, with that bit of explanation, here is our 3 column joomla
theme:
body {
margin:10px 10px
0px 10px;
padding:0px;
}
#leftcontent {
position:
absolute;
left:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px
solid #000;
}
#centercontent {
background-color:#fff;
margin-left:
211px; /*1 more than 210 because we have to count the border*/
margin-right:211px;
margin-top:7px; /* Margin here to line up center
content with side columns */
border:1px solid #000;
}
#rightcontent {
position:
absolute;
right:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px
solid #000;
}
An adpatation of a layout used a few places round the web, you can read more
about it at http://glish.com/css/7.asp. Note we have dropped a large amount of the CSS
to make it simpler and because we are not going to be supporting IE5.X with this
site.
Its not *quite* simple absolute positioning (you didn’t think it would be
that easy did you?). The leftcontent and rightcontent is positioned as we just
saw. But the center content seems to have no positioning at all. What gives?
Well, absolutely positioned elements are taken "out of the document flow". This
means other content will just get placed as though these absolute elements were
not there. We saw this in our example above when our text overlapped. We are
doing the same thing here, but have been crafty by using left and right margins
for the centercontent the same width as the left and right columns. This means
that the center column content will squeeze in between the two side columns even
though it doesn’t know they are there.
Right, so its live site design time (drum roll). Remember, our index.php file
currently looks like this:
<?php echo $mosConfig_sitename;
?
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
<?php mosLoadModules(‘left’);?
<?php
mosMainBody(); ?
<?php mosLoadModules(‘right’);?
<?php
mosLoadModules(‘bottom’);?
<?php include_once(‘includes/footer.php’);
?
</body
</html
Now we will put in some positioning with our new CSS:
<?php echo $mosConfig_sitename;
?
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
<div id="leftcontent"
<?php
mosLoadModules(‘left’);?
</div
<div
id="centercontent"
<?php mosMainBody();
?
</div
<div id="rightcontent"
<?php
mosLoadModules(‘right’);?
</div
<?php
mosLoadModules(‘bottom’);?
<?php include_once(‘includes/footer.php’);
?
</body
OK, so now we have a 3 column joomla theme, not bad. Let’s take a quick look; livesite.compassdesigns.net . Well, our columns are there, and
the right places.Resizing your browser you will see that the size of the middle
column adjusts. Commonly called a fluid CSS layout. Taking a
quick look in Internet Explorer 6 we see some weirdness going on with the bottom
of the left column, but hey, weird and IE often occur together in a
sentence!
Yes, we still have a W3C Standards Compliant CSS Joomla Website . OK, I grant you it doesn’t look that amazing right now, but hey,
that’s what next week’s installment is for!
A preview from our next joomla tutorial
Tutorial
6: Enhancing a Template for Joomla SEO
So we have a very basic shell of
a web site. Doesn’t look very interesting does it. Well, we can soon change
that, let’s make a few changes. We will also optimize the template for SEO.
Joomla has some challenges compared to a static website, but techniques such as
those we describe here can improve your joomla SEO efforts.
Important Note!
This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design.
It uses a superior CSS layout strategy that does not reply on absolute
positioning, which allows easier clearing of the footer. You can find
out more at: