FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

As part of the Official Joomla Documentation program, this tutorial has been developed by Barrie North of Compass Design. As well as here at the official Joomla Dev site (dev.joomla.org) it is also available at www.compassdesigns.net in various complete formats, Word, PDF and HTML.

In this tutorial, we'll go through the steps of creating a joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the tutorial.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 6: Enhancing a Template for Joomla SEO

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

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.

Some basic changes to the Joomla CSS

Let's first make the text a little more readable, two quick changes to the joomla CSS.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%; /* don't go smaller than this */
}

Note we dropped the style being applied to "html,body" as we didn't want the percentage font size being applied twice!

This makes the font a more reasonable size. Remember, we talked about how we were sizing our fonts in one of our previous articles, A Blank Template CSS file for Joomla. I have also chosen a sans-serif font: verdana. Web pages have the opposite readbility of paper pages. On paper, serif (like Times New Roman) are more readable, on the web its the opposite.

Next, let's center the page.

body {
text-align:center; /* for IE */
}
#wrapper {
position:relative;
width:85%;
margin:0 auto;
}

OK, so here we have centered the page and made it a little wider. This is a fluid joomla CSS layout, the main part of the page will always be 85% of the browser window. It re-seizes depending on the screen resolution.

Now, we have to do a little changing of the column sizes. This is important, if columns overlap, it can break a layout in a browser.

#leftcontent {
width:175px;
}
#centercontent {
margin-left: 190px; /*tweaked a little to get a slight gap*/
margin-right:165px; /*tweaked a little to get a slight gap*/
}
#rightcontent {
width:150px;
}

I have reduced the width of both side columns and increased the margins. Note I have made a small gap between them and the center column.

Let's make a splash of color, C00 is a shade of red and fff is white:

body { ..
background-color: #C00;
}
#wrapper {
background-color:#fff;
}

Joomla SEO

OK, so here is the really good bit. It's to do with joomla search engine optimization or joomla SEO. The closer something is to the beginning in the xhtml code of your page, the more weight it carries for yoursearch engine ranking . Unfortunately, a joomla website outputs alot of xhtml. This means that your important content (the middle column) gets pushed down. But, CSS to the rescue, remember that we absolutely positioned our side columns. This means that they can appear anywhere in the source, as long as they are in their container, the "wrapper". So let's put them after the main content! Heck, if you wanted and had alot of non-vital content in it, you could even make a header container and put that after the main content too.

<body>
<div id="wrapper">

<div id="centercontent">
<div class="insidecenter">
<?php mosMainBody(); ?>
</div></div>

<div id="header">
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div>

<div id="leftcontent">
<?php mosLoadModules('left');?>
</div>

<div id="rightcontent">



<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Flivesite.compassdesigns.net%2F" target="_blank" title="W3C Joomla Design">Valid xhtml?</a></p>

</body>
</html>

We had to add this rule (you can see it in the xhtml above) to push the center column down.

.insidecenter {
padding: 100px 0 0 0;
}

Last but not least we move the footer below the end of the wrapper div, putting it into the colored page background.

Now we add some titles for the site.

<div id="header">
<h1><span><?php echo $mosConfig_sitename; ?></span></h1>
<h2><span><?php echo $mosConfig_live_site; ?></span></h2>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div>

Notice how the name of the site and its url are in header tags. This does two things, first it is good practive for semantic layout, so increases the accessibility of the site, second, it helps your joomla SEO as anything in a header tag is given slightly more weight as a keyword.

So, there you have it, a source ordered joomla template, this week with a little kick for your joomla SEO needs.

A Joomla SEO template

Is it still a W3C valid joomla template?? Well, what do you think?

 

How do you set up SEO optimized Websites? Do you want to learn SEO? Would be interested in SEO lessons?  SEO Courses? SEO video tutorials? SEO Training? Conversion optimization lessons? Conversion optimization courses. Conversion optimization video tutorials. Conversion optimization training.

 

A preview from our next joomla tutorial

Tutorial 7: Using CSS to add imagery to your joomla website (unpublished)

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Reprinted with permission from Compass Design: Joomla template designs for your website

An Incomplete Guide to SEO

How to earn $1,000�s a day with Search Engine Optimization and Joomla.

GoogleSecretsRevealed.PNG

"How you can profit from the EXACT SAME search engine optimization strategies that I used to charge clients $3,590 a day to implement!"

In this web-based, no-hype guide, I'll reveal my simple step-by-step search engine optimization strategy that I have been using for 2 years on over 350 clients and that anyone can use to get a front page ranking on Google:

Do you want:

More web site traffic? More orders? A better cash-flow? A healthier Internet business? A front-page ranking on Google and all major search engines? More money than you thought humanly possible?

if so, keep reading. Get ready to become a search engine optimization "insider". What I'm about to teach you are the actual secrets that I have used to get unlimited daily traffic for over 350 of my clients from Google. For the sake of your business, you can't afford not to read my search engine optimization guide!

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 5: Making a 3 column joomla theme for your website

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

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!

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:

joomla design

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> <!-- End of the wrapper div-->

Now it should look like this:

joomla design

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!

 

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.

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 4: The Blank Template CSS for Joomla

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.

Let's startout with a basic blank template, no layout, just all the font typography styling. This is a blank template to help speed production of a site. Its not a production template CSS file , all styles shouldn't be filled in, ones that don't get used should be deleted before using. This blank CSS file has several features:

CSS Shorthand

There are 'shorthand' styles at the beginning of each style definition. Once you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is:

font: font-size |font-style | font-variant | font-weight |
line-height | font-family

Here is an example, rather than this

font-size:100%;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:130%em;

Have this:

font: 100%/130% Arial,Helvetica,sans-serif italic bold;

Read more at An Introduction to CSS shorthand properties about this syntax.

Global CSS Reset

At the beginning of this joomla CSS file is a few styles that set all styles to certain characteristics. You then have to over-ride these later on. The first key global style is:

* {
margin: 0;
padding: 0;
}
body {..
font-size: 76.1%;..

Everything is given a zero margin and padding and then font size is set to 76.1%. The reason font is set here to 76.1% is to try and get more consistant font sizes across browsers. All font sizes are then set in em's further down. A link that discusses this idea:

An experiment in typography at The Noodle Incident (Owen Briggs)

Header Tags and Joomla CSS Titles

Sometimes I will have Joomla titles turned off and use h1/h2 tags in content. Usually I am doing this to get a SEO bonus*. To get some consistancy across titles depending whether I have the off or not, I'll define the Joomla CSS alongside the hX tags. For example:

h1,.componentheading {

This is personal preference, you could certainly separate them out.

*I have realised I could get a further SEO bonus by keeping the Joomla titles to show in parameters and then hiding them through a CSS style, and making the titles linkable. Any of these would work:

display: none;
height:0;
text-indent: -3000px;

Note that there is some discussion regarding hiding text with CSS. Please read this if you are considering it!

Joomla Rounded Corners

Towards the end of this blank template CSS file is the code to have rounded corners. Its the same technique used at joomla.org and requires the module suffix contained in index.php file to be "-3".

OK, ready? So here is the blank CSS template. Note it doesn't include any layout, we'll be looking at this next time.

The blank template CSS file for joomla is free for you to take and use. If you do, maybe drop me an email to show your project.

Now, how to use this blank CSS file? Well, after you have done all your joomla CSS styling, your file will have all that extra empty CSS. Just use this tool to get rid of it. Be careful and do a test to make sure you know what it does first!!

CSS Formatter and Optimiser

 

A preview from our next joomla tutorial

Tutorial 5: Making a 3 column Joomla Theme for your joomla website
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.

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 3: Free Tools for Joomla Design

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

So we are about to begin design the site for real, but first we need a few tools. Now, everyone probably has their own favorites, but here is a list I have been working on of all the tools you will need to design a site. The good part? They are all free for the downloading.

Important Note: Where a download link is shown I have give a direct link for the download to make the download as easy as possible. Where mirrors have been linked to I have chosen US ones. More experienced users should examine the link and truncate it to go to the actual site.

Free HTML/Web Design editors

Two choices here, Nvu is one I found recently and I have been playing around with it. It seems pretty good, has built in validation (important for us) and also a Mambo/Joomla extension which will be helpful. Nvu is 100% open source.  This means anyone is welcome to download Nvu at no charge, including the source code if you need to make special changes. You can get the extension from Mamboforge. The complete forge project is here.

Another choice is actually more of a validator. The "CSE HTML Validator" is an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker. You can get the free version html validator here.

Out of these two, the CSE Validator is probably better, but Nvu has the cool extension. Ahh, what to do!

Note that neither of these are "WYSIWYG" html editors. In an editor such as Dreaweaver you can create a web page without even seeing the html code. However, this is perhaps not the best way to make a Joomla/Mambo page. Its important to be able to see the html and css styles and the page in the index.php (as you saw in the last article) is not really very long or complex.

Standards Compliant Browsers

Now we need a decent browser. Now if you are still using Internet Explorer, goes outside and slap yourself around.

Finished? Good, you deserved it. Quite apart from the fact that IE is the most buggy, security-hole ridden browser to ever be installed (or was that Netscape?), using it has one big problem when designing to standards. We talked a little in the last article about how support for CSS is not consistent across browsers. IE has some of the worst support. To make a page look the same you have to use CSS "hacks". These are snippets of CSS that can only be seen by certain browsers. Its very very important when trying to design to web standards to use a browser that is standards compliant, then you make allowances for browsers that aren't. Doing it the other way around makes it difficult to say the least. "Design for the best and then for the rest" goes the saying.

OK, so my choice is Firefox, and while you are at it, download the developer toolbar, it will be essential for our design work. Note that its easiest to get the toolbar after installing firefox by actually using Firefox to browse the link, then the installation is somewhat automated.

Right, so next time I look at my web stats, I don't want to see any IE, right?

Free Graphics Editor

In keeping with our cheapskate theme, there is actually a decent graphics editor out there and its free. Its called GIMP and your can download it here. You also need another piece of code which you can get here. More information is at http://gimp-win.sourceforge.net/stable.html.

Note that if you go to the actual gimp.org web site, you can't really download much of use there. Its all the source code (its open source like Joomla). You need to go to another site like the one above to find something you can actually install.

So make sure you have all those downloaded/set up and then we are ready for the Basic Joomla CSS Template

 

A preview from our next joomla tutorial

Tutorial 4: A Blank Template CSS file for Joomla
In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 1: Creating a W3C valid Joomla template for your Joomla website

In this series of joomla tutorials, we'll be building a valid joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. The site will actually be live on-line at livesite.compassdesigns.net from the very beginning, you'll be able to see the different stages as the design develops. As this is a CSS designed site, you'll be able to slowly see the raw joomla design get styled step by step.

Joomla Design for Web Standards

You may have seen words such as "web standards" or "CSS" or even "accessibility". They are often all used together in some sort of commentary about a "design for the future rather than the past".

What do we mean by that?

We'll discuss it more in another article, but many web pages are designed for older browsers. How so? Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It's often decided that the web page needs to appear properly to these "legacy" browsers.

Web standards put into place a common set of "rules" for all web browsers to use to show a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989 (how's that on a resume!).

Cascading style sheets or CSS was developed a few years ago that made styling easier for web designers. You have all styles in a separate file and they are applied to the whole site. Rrecently is has been part of a movement to separate content from presentation. This is another thing we'll visit later, right now we'll just note that using CSS is key to building a valid Joomla website that meets WC3 standards.

Accessibility, sometimes mistakenly called usability, is an attempt for a page to be accessible to all possible viewers. Usually this is chosen to mean such examples as someone that is blind (uses a screen reader) or old (struggles with small fonts/delicate mouse based navigation). I use these two as examples as they are the ones quoted most often (don't shoot the messenger!). I take a much broader view and include viewers with or without disabilities, young or old, or even non-human, such as search engine spiders!

Trying to get your joomla website to meet these standards can be hard. Any sort of CMS generates its content dynamically, which can mean code gets put in that invalidates your site, the joomla design is never constant.

Overview of a Joomla Design

There is no "right way" to create a website, it depends on the designer's own background. Those more graphical make an "image" of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. As a goal of this project is to have the process be as transparent as possible for people to see, we'll use a process with lots of small steps. We'll have two other twists in the joomla design process:

  • We will put up a site a raw content very early in the process, normally this would come as one of the last stages.
  • We will design a basic 3 column CSS joomla template first and then adapt to our desired design. We are doing this so that it's possible to see a "universal layout" and see how it can be adapted to different needs.

So, with those two points in mind, here is our modified design process.

  1. Outline and discuss website criteria.
  2. Install Joomla with no CSS, a raw joomla design with no styling, publish onto web.
  3. Create basic position 3 column CSS layout.
  4. Adapt 3 column CSS joomla template and complete any further styling.
  5. Adapt this Joomla design to achieve desired site functionality.
  6. Take comments generated by community and create detailed guide to building a valid Joomla website.

The URL is http://livesite.compassdesigns.net. We'll start with a fresh Joomla website install. We'll use this section of this website to place the articles discussing the process. We'll also use a comment tool so that anyone can make comments. Hopefully this will be a learning experience for us all.

Summary:

  • Joomla is a free, powerful content management system, we'll be using it to build a valid Joomla template that meets WC3 standards.
  • Web Standards describe a set of rules for all web browsers to use to interpret web pages. CSS is a design protocol that is closely tied to web standards.
  • Getting a joomla design to meet W3C standards and validate can be difficult.
  • Microsoft needs to be taken out back and shot.

 

A preview from our next joomla tutorial

Tutorial 2: Installing Joomla, doctype and the blank joomla template
In this article we will look quickly at installing joomla and then spend most of our time discussing the joomla doctype and how it relates to a valid joomla site. We'll also briefly look at how to construct a basic or blank joomla template with the index.php file.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 2: Installing Joomla, doctype and the blank joomla template

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

In this article we will look quickly at installing joomla and then spend most of our time discussing the joomla doctype and how it relates to a valid joomla site. We'll also briefly look at how to construct a basic or blank joomla template with the index.php file.

Installing Joomla

There are several ways to do this, fantastico, manually, and there is a handy tool to do it http://joomla.astang.com/autoinstall. Please note I have never used this, so you are on your own!

My preferred method is to do it manually, its really pretty easy, especially if you have cpanel on your host server:

  1. Go to your SQL databases and create (through phpAdmin) a database and user to use with Joomla.
  2. Go to the file manager in your cpanel.
  3. Create a directory for your site. Or if you are using a subdomain like we are (livesite.compassdesigns.net), the folder is automatically created when you create the subdomain. Navigate to the folder.
  4. Use the Upload file link to upload a full version of Joomla (sneak to your local Starbucks/College to take advantage of a big fat free connection).
  5. Click once on your uploaded file and you will see a menu appear. Click on "extract file contents".
  6. Your done!

Now, we have only uploaded the files, we haven't "installed" it yet. I am not going to go into details of how to install Joomla. Here is the 'official' guide http://help.joomla.org/content/view/39/132/

The Blank Joomla Template

Now, one of the points here is to start with a blank joomla template. So, let's set that up. You will need this file: livesitedesign.zip. In this file are the various files and folders that make up a blank Joomla template:

  • index.php
    This file is the most important. It lays out the site and tells the joomla CMS where to put the different components and modules.
  • templateDetails.xml
    This files details the author, copyright and what files make up the template (including any images used)
  • template_thumbnail.png
    A simple image of your template (via a screen shot). Not critical
  • css/template_css.css
    The CSS of the template. The folder location is optional, but you have to specify where it is. Note that the file name is only important in that its referenced in index.php. You could call it what you like.
  • images/
    Any images that go with the template. Again for organization reasons, most designers put this in an images folder. Our will start out empty.

To add the template (again, copious tutorials exist) you go to the admin portion of your site and install the template by uploading the zip file.

Note you can actually add the files individually (not in a zip) too. You have to put them in yoursite.com/templates.

The index.php: joomla doctype

So here we are getting to the first significant part of this project. What actually is in an index.php file? The part we are going to talk about is the "doctype". This bit of code that code goes at the very top of a web page. Here things start getting messy, and to be honest, I only have a vague grip on it myself! If you don't want to be bothered by all the technical details, just be aware that at the top of our page we have this in our template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">

Got it? OK, you can skip the next part then

Browser Wars

The nitty gritty of doctypes starts getting messy. I especially like this observation from alistapart.com, [information on W3C's site about doctypes is] "written by geeks for geeks. And when I say geeks, I don�t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She�s Got Mail.�". Anyway, there are several doctypes you can use. Basically, the doctype tells the browser how to interpret the page. Here the words "strict" and "transitional" start getting floated around (float:left and float:right usually). Essentially, ever since it started, different browsers have had different levels of support for CSS. This means for example, that Internet Explorer won't understand the "min-width" command to set a minimum page width. Shame really, because then you have to use "hacks" in CSS to duplicate the effect. Strict means the html (or xhtml) will be interpreted exactly as dictated by standards. A transitional doctype means that the page will be allowed a few agreed upon differences to the standards.

Now to complicate things, there is something called "quirks" mode. If the doctype is wrong, outdated, or not there, then the browser goes into quirks mode. This is an attempt to be backwards compatible, so Internet Explorer for example, will render the page pretending as if it was IE4. Scary eh?

Now, unfortunately, people sometimes end up in quirks mode accidentally. It usually happens two ways:

  • They use the doctype declaration straight from the WC3 web page, the link ends up as:
    DTD/xhtml1-strict.dtd
    Except this is a relative link on the WC3 server. You need the full path as I showed above.
  • Microsoft got involved again (I swear they do all their development after they've been down the pub) and set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an "xml prolog" put before the doctype.
    <?xml version="1.0" encoding="iso-8859-1"?>
The part about IE6 quirks mode is important for us. We are only really designing for IE6+, so we will make sure that its running in standards mode. This will minimize the hacks we have to do later on. Its worth noting that the xml prolog isn't essential anyway. We'll be taking note of future releases of Joomla and be leaving it off.

Standards Compliant Joomla

So, here is the good bit, making a page standards compliant, where you see "valid xhtml" at the bottom of the page. Having your page be standards compliant does not mean really difficult coding, or hard to understand tags. It merely means that the code you use matches the doctype you said it would. That's it! Nothing else. Sometimes I get the feeling that people think of standards as some higher level of coding, but really its just saying what you do, and then doing what you say.

Some useful links:

What else is in index.php?

Let's look at the structure of the header first. A great outline is at http://help.joomla.org/content/view/44/60/. Unfortunately it does have a layout based on tables, but we will change that.

We want to be as minimal as possible, but still have enough for a production site. The header information we will use is:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; " />
<?php mosShowHead(); ?>
<script type="text/javascript"> </script> <!--http://www.bluerobot.com/web/css/fouc.asp-->
<style type="text/css" media="screen">@import
"<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>
/css/template_css.css";</style>
</head>

OK, so what's all that?

 

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>

Makes sure that the file isn't being accessed directly.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">

We talked about this above. The "" is just pulling the language from the site global configuration.

 

<meta http-equiv="Content-Type" content="text/html; " />

What character set we are using (don't ask).

 

<?php mosShowHead(); ?>

Header stuff that is set in the global configuration again. It includes the following tags (for example):

  • <title>Installing Joomla, doctype and the blank joomla template</title>
  • <meta name="description" content="Installing Joomla, doctype and the blank joomla template" />
  • <meta name="keywords" content="installing joomla, joomla doctype, blank joomla tempate" />
  • <meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." />
  • <meta name="robots" content="index, follow" />
  • <link rel="shortcut icon" href="https://d8cm9kf4j2igh.cloudfront.net/images/favicon.ico" />

We'll come back to this later.

 

<script type="text/javascript"> </script>

To stop a bug, that being a flash of un styled content. Details courtesy of Blue Robot. Note this can be any script file and we'll be adding one in here later.

 

<style type="text/css" media="screen">@import
"<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>
/css/template_css.css";</style>

I am using import as a way to stop the site breaking with Netscape 4. Users of ancient browsers won't be able to get the CSS sheet so will see our neat un styled content. If you wanted to cater to these older browsers, we would have too many CSS hacks, so we do this. Somewhat of a brutal one, but hey, what are you doing with Netscape 4 anyway?

A blank joomla template body

This will be very very easy! Ready?

<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 that's what I call lean code! I have a reasonably logical order:

  1. name of the site
  2. the pathway
  3. top module (maybe navigation?)
  4. left modules
  5. main content
  6. right modules
  7. any bottom modules
  8. footer

This order is called semantic markup. Or at least by the time we add our titles and sub-titles it is. Basically, it means the term paper like you used to write at college, you know, the one with neat logical titles, headers and organization. From a web point of view, it means a page can be read by anyone, a browser, a spider or a screen reader. Semantic layout is the cornerstone of accessibility.

Now its worth noting that what we have here really is only the potential for semantic layout. If one were to go ahead and put random modules in random locations, then you would have a mess. An important consideration for CMS sites, a template is only as good as the population of the content. It is this that often trips desingers up when trying to make their valid joomla template.

Now at this point, the only CSS I have applied is set all text to Verdana and 76% size.

 

A preview from our next joomla tutorial

Tutorial 3: Free Web Design Tools
So we are about to begin design the site for real, but first we need a few tools. Now, everyone probably has their own favorites, but here is a list I have been working on of all the tools you will need to design a site. The good part? They are all free for the downloading.

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Friday, 18 May 2007

Just two weeks after its release on Joomlashack.com, more than 2,000 Joomla users have answered our first-ever Joomla Survey.

Joomlashack has many big questions about Joomla users that the survey will help answer, such as:

Is Joomla mostly used by developers?
Nearly half of all respondents have made changes to the code of a Joomla component or the core code of Joomla itself, with 57% claiming PHP programming knowledge.

Is Joomla easy to install?
0ver 80% of those surveyed say that installing Joomla on a server was so easy it took "a few minutes."

What other content managements systems do people use instead of Joomla and why?
32% of respondents say they have used WordPress, while only 11% have used Drupal.

Does Joomla make a good blogging platform?
Over 60% say they use Joomla for a blog site.

Take the Joomla Survey today and win free templates for life or a $100 Amazon gift certificate.




Friday, 18 May 2007

JoomlaShack is pleased to announce the addition of Christopher Baskind, Dave Childs and Steve Burge to the forum team.

Both Christopher and Dave have each volunteered many hours helping other community members and Steve is generous to offer his expertise on the SEO forum. Our forum grows stronger because of this type of great user-to-user support.

Thank you gentlemen. Welcome Aboard, we're glad you are here!

RECENT POSTS

  • Don't know which hosting best fits your Joomla needs? Find here a post commenting about the Best Joomla Hosting 2013. http://t.co/Y42m7Vzcsv

    about 1 day ago