Taken from http://www.compassdesigns.net/articles/livesitedesign/joomlatemplate.html
What actually is the index.php file in the template? In this part we are going to talk about is the "doctype". This is the bit of code that code that 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:
Code: Select all
<!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="<?php echo _LANGUAGE; ?>">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. This is where 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 the 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:
Code: Select all
DTD/xhtml1-strict.dtdExcept 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.
Code: Select all
<?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 and Mambo
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:
*http://www.quirksmode.org/css/quirksmode.html
*http://www.alistapart.com/stories/doctype
* http://www.w3.org/QA/2002/04/Web-Quality
* http://forum.joomla.org/index.php/topic,7537.0.html
*http://forum.joomla.org/index.php/topic,6048.0.html
What else is in the 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:
Code: Select all
<?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="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<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?
Code: Select all
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>Makes sure that the file isn't being accessed directly. The index.php in the template folder needs to be included from the index.php in the root.
Code: Select all
<!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="<?php echo _LANGUAGE; ?>">We talked about this above. The"" is just pulling the language from the site global configuration.
Code: Select all
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />What character set we are using (don't ask).
Code: Select all
<?php mosShowHead(); ?>Header stuff that is set in the global configuration again. It includes the following tags:
Code: Select all
<base href="http://livesite.compassdesigns.net/" />
<title>Live Site Design - Home</title>
<meta name="description" content="Joomla - the dynamic portal engine and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<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="http://livesite.compassdesigns.net/images/favicon.ico" />We'll come back to this later.
Code: Select all
<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 hacks in the CSS, so this is solution. Somewhat of a brutal one, but hey, what are you doing with Netscape 4 anyway?
Template Body
This is going to be very very easy! Ready?
Code: Select all
<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 is what is sometimes called a 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. For the wiki amongst you you can read more about semantic layout here.
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. This is an important consideration for CMS sites, a template is only as good as the population of the content.
Now at this point, the only CSS I have applied is set all text to Verdana and 76% size. You can see what it looks like at livesite.compassdesigns.net, and its valid XHTML!
