| In this joomla tutorial, we will look at
a 3 column theme for your joomla website. Most joomla websites
use 3 columns and having the theme start with that is a good
foundation. Then later we can hide side columns if there is
no content in them for that page.
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:
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:
#leftcontent {
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:
#wrapper {
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:
<div id="wrapper"
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"?)
<div id="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:
/* Basic 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:
<body
<?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:
<body
<?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!
Does
it validate?
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!
|
