Cory Webb's How to Joomla!

How-To Categories

Recent How-To's

News Feed E-mail

Login

Affiliates

How to Create a Basic Template

Written by Cory

Monday, 25 September 2006

Article Index
How to Create a Basic Template
Step 1: Design
Step 2: HTML Markup
Step 3: CSS
Step 4: Joomlafy
Steps 5-9
Sample Template Files

Page 5 of 7

Step 4: Joomlafy

The next step is to "Joomlafy" our 'index.php' and 'template_css.css' files. Here is the XHTML markup, Joomlafied:

XHTML Markup

 
<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
  initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body id="bodybg">
 
<div id="sidebar">
 
  <h1 id="sitetitle"><a href="index.php"><?php echo $mosConfig_sitename; ?></a></h1>
  <h2 id="siteslogan">Your source for red spheres</h2>
 
<?php
  if( mosCountModules( 'left' ) > 0 ) {
    mosLoadModules( 'left', -2 );
  }
?>
 
</div><!-- end sidebar -->
 
<div id="mainbar">
 
  <?php mosMainBody(); ?>
 
</div><!-- end mainbar -->
 
</body>
</html>

Now that we have our "Joomlafied" XHTML markup, let's take a look at what's different. In the header, I have added the following code:

 
<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
  initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css" rel="stylesheet" type="text/css" />
 
</head>

"defined( '_VALID_MOS' )..."

The first line, "defined( '_VALID_MOS')...", prevents direct access to the 'index.php' file.

mosShowHead

Another important part to note is the line that says "mosShowHead". I have used this in place of my "title" and "meta" tags because Joomla! uses this function to automatically show the site's title along with important meta tags.

initEditor

The third part I would like to point out is "initEditor". This function initializes the WYSIWYG editor for the front end of your site. It is inside a conditional statement that tests whether or not the user is logged in. The conditional statement improves load time for users who are not logged in, because it prevents Joomla! from executing the initEditor function when it is not necessary.

echo $mosConfig_live_site

You should also note that the link element has been changed to use an absolute href for the template's CSS file. Using $mosConfig_live_site along with the path to the template (templates/redspheres...), your template now knows exactly where its corresponding CSS file is.

Now let's take a look at what else we've added to "Joomlafy" our 'index.php' file.

Left Module Position

The following code is used to 1) determine whether or not there are modules published to the "left" module position, and 2) load those modules in the "left" module position with a style of -2. (see "mosLoadModules - An Explanation")

 
<?php
  if( mosCountModules( 'left' ) > 0 ) {
    mosLoadModules( 'left', -2 );
  }
?>

Main Body

The following code is used to load the Main Body of your Joomla! template. This is where all content items and components are loaded for your Joomla! site.

 
  <?php mosMainBody(); ?>

CSS Code

 
* {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #fff;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
 
a, a:link, a:visited {
  color: #900;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #000;
}
 
h1#sitetitle {
  padding: 100px 0 0;
  background: #fff url(../images/logo.png) center top no-repeat;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #000;
}
h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited {
  text-decoration: none;
  color: #000;
}
h1#sitetitle a:hover {
  text-decoration: none;
  color: #000;
}
h2#siteslogan {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 10px;
  text-align: center;
  color: #000;
}
 
#sidebar {
  width: 215px;
  margin: 10px 0 10px 10px; 
  float: left;
  color: #000;
}
 
#mainbar {
  margin: 10px 10px 10px 235px;
}
 
/* Joomla Elements */
 
/* Moduletable DIV's */
#sidebar .moduletable {
  margin: 10px 0;
}
#sidebar .moduletable h3 {
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px;
  padding: 0 0 0 5px;
}
 
/* Main Menu */
ul {
  padding: 0 0 0 5px;
}
li {
  list-style-type: none;
  padding: 3px 0 3px 18px;
  background: #fff url(../images/bullet.gif) 0 5px no-repeat;
}
ul#mainlevel a, ul#mainlevel a:link, ul#mainlevel a:visited {
  text-decoration: none;
  color: #900;
}
ul#mainlevel a:hover {
  text-decoration: underline;
  color: #000;
}
 
/* Login Form */
#mod_login_username {
  width: 205px;
  margin: 0 5px 5px;
  border: 1px solid #ccc;
}
#mod_login_password {
  width: 205px;
  margin: 0 5px 5px;
  border: 1px solid #ccc;
}
#mod_login_remember {
  margin: 0 0 0 5px;
}
input.button {
  border: 1px solid #ccc;
  background-color: #eee;
  color: #666;
  padding: 3px;
  margin: 5px;
  font-size: 10px;
}
label {
  margin: 0 0 0 5px;
}
 
/* Search Form */
#mod_search_searchword {
  width: 205px;
  margin: 0 5px 5px;
  border: 1px solid #ccc;
}
 
/* Main Content Area */
.componentheading {
  display: block;
  font-size: 20px;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px;
}
 
.contentheading {
  font-size: 20px;
  color: #900;
  font-weight: bold;
  margin: 0 0 2px;
}
 
.small, .createdate, .modifydate {
  font-size: 10px; 
  font-weight: normal;
}
 
a.readon {
  display: block;
  padding: 3px 0 3px 18px;
  background: #fff url(../images/bullet.gif) left center no-repeat;
  margin: 5px 0 0;
}
 
.article_seperator {
  display: block;
  height: 10px;
}

We also Joomlafied our CSS code. Everything below "Joomla Elements" was added to the CSS for Joomla!-specific elements. I will not take time to discuss the Joomla!-specific CSS elements, but rather I will just give you a link to "A Blank Template CSS file for Joomla" from CompassDesign.

<< Prev - Next >>

Tag it: