It's Friday - what a day to visit jfoobar!

Joomla!, quick, rapid, fast, speedy and custom

Written by Arno Zijlstra Wednesday, 18 March 2009 10:54

Sunday night, there I sat and my plate was full of work but what can you do in a situation like this. There is only one thing you can do … download Joomla! 1.5, fire up your localhost and get rocking.

The installer is running smoothly and within a few minutes I have the site without Joomla! default data up and running and ready for a new clean custom site and template. You could of course opt for a free template or a template from one of the many template clubs in a situation like this, but since building custom templates is my specialty and passion I always start my templates from scratch. I like things to be unique.

There are solid reasons for building a template from scratch to match the needs and goals a site or client has regarding branding or the markup. A site should be light weight, SEO effective and accessible. Free and template club templates are great but they are built to be used by many people and therefore in many cases include lots of functions, features and render lots of (x)HTML and CSS you may not even need for your website.

So, starting from scratch it is, and I will try to walk you through the process I take from start to finish in a fast and not too complicated way.

Step one: Create your Template folder and the needed files

Before you can start building you need the minimum required files for a Joomla! template. I have a standard plain package that I can use over and over again and will offer a download link for the package at the end of this tutorial.

My package is called "joomla_base" and contains the following files and folders:

joomla_base/
	HTML/
		index.html
		pagination.php
		modules.php
		CSS/
				index.html
				reset.css
				pageframe.css
				pagestyle.css
		images/
				index.html
				logo.png
				a few other images 
		index.html
		index.php
		templateDetails.xml
		template_thumbnail.png
		favicon.ico

Those are the basics you need for a Joomla! template; everything else like template parameters or overrides you'll find in some template packages is advanced stuff. Those are things you can play with after you understand the basics.

I code all my HTML and CSS by hand because I want full control over it, and don't trust WYSIWYG software, But if you don't have the knowledge to write HTML yourself these software packages will be something for you to use. Do take a look at the plain HTML from time to time so you can learn and understand what is happening under the hood.

Step 2: Place the Template where it needs to live

Put the "joomla_base" folder in Joomla! the templates directory, you'll also find templates called "rhuk_milkyway" and "beez" in there.

Step 3: Name and Install your Template

Now you need to give your template a name, lets name it "my_template" for the rest of this tutorial.

The first thing you do is rename the template folder from "Joomla_base" to "my_template"

The second thing is opening the templateDetails.xml file and change this line:

<name>Joomla base</name> to <name>My template</name>, that way you can recognize the template in the Joomla! administrator template manager.

Step 4: Activate your Template

Login to your Joomla administrator and go to Extensions -> Template manager. In the list you will see your template, check the radio box and press the "Default" button in the Joomla! toolbar.

Your template is the active template now and you can have a look at the Joomla! front-end, there's not much there because you did an install without the Joomla! demo data, nice and clean just how we want it.

Step 5: Set up a few menu items

The "joomla_base" package has the following module positions:

1. level1_menu
2. level2_menu
3. content_top
4. content_bottom
5. sidebar_top
6. sidebar_bottom
7. footer
8. copyright

Position "level1_menu" is there to create a horizontal main menu., Let's create that menu.

1. Create a couple of uncategorized articles in the article manager.
2. Go to Menus -> Mainmenu
3. Create a few new menu items, type Article and link them to the created articles.
4. Go to Extensions -> Module Manger and edit the Main menu module. Change the position parameter to "level1_menu" and set title to not display. On the right you'll see more parameter options and you only have to change a few of them, Start level = 0, End level = 1 and under the advanced parameters set Menu Class Suffix = main and Module Class Suffix = main
5. Save the module, make sure it is published and have a look at the front-end of your site. If all went well you will now see a horizontal menu.

Position "level2_menu" is for submenu items and will be vertical, lets create that.

1. Create a couple of uncategorized articles again
2. Go to Menus -> Mainmenu
3. Create a few new menu items and make sure they are set to be submenu items of one or more of the mainmenu items you created earlier.
4. Go to Extensions -> Module Manager and edit the Sub menu module. Change the position parameter to "level2_menu". On the right you'll see more parameter options and you only have to change a few of them, Start level = 1, End level = 2 and under the advanced parameters set Menu Class Suffix = sub and Module Class Suffix = sub
5. Save the module, make sure it is published and have a look at the front-end of your site. If all went well you will now see some sub-menu items appear in the sidebar when you click trough the main horizontal menu, now that is Joomla! 1.5 split menu feature and it's great.

Position "content_top" is a position above the content area and "content_bottom" is a position below the content area, you can just publish modules there if you want or need too.

Position "sidebar_top" is a position above the "level2_menu" position and "sidebar_bottom" is a position below that menu, you can just publish modules there if you want or need too.

Position "footer" is a position at the bottom of the site and you can publish modules there if you want or need to and the same counts for copyright although that is styled by CSS to just hold a oneliner with a copyright text, that would be done with a "Custom HTML" type module.

Step 6: The fun part, it's play time! Yeehaw!

Now once the above is done you are ready to start playing with your actual design.

The motto is, don't be afraid just try and find out!

I've put some CSS background images in the template, you can just replace them with your own beautiful images and see the site change with incredible speed.

In the file called "reset.css" there is CSS that you normally don't have to change. The CSS reset was created by web guru Eric Meyer at http://meyerweb.com and there are pro's and con's for using it, but I like it, so I use it. What it does is basically reset different interpretations of CSS that browsers begin with so that you have a known, blank start to work with.

The file called "pageframe.css" is the file that just holds the CSS for the frame of the site. This is the place where I set the header values, the position of the sidebar etc etc.

The file called "pagestyle.css" is where the candy goes, menu styles, module styles and everything that is really a site frame matter.

The reason I make such a separation is that by having the frame CSS in its own file I can very easily change the layout of the site, for example having the site-bar appear right instead of left.

The file called "index.php" is where the markup lives, just open it up in a text-editor and have a look at what is in there.

Here are some things you will find:

1. The statement, below, is a Joomla! security check to make sure the file is only be used trough the CMS and not called directly through a browser URL:

   
   <?php defined('_JEXEC') or die('Restricted access'); ?>
   
   

2. The DOCTYPE declaration tells a browser how to render the site.
3. The HTML tag which also passes information to the browser,; there is a end HTML tag way below which is the end of the page.
4. Between the <head> and </head> tags Joomla will generate Meta information for the browser to read and insert CSS and JavaScript files that are to be included in the page rendering. Joomla! has a tag that will generate the default information and files and it looks like this:

   
   <jdoc:include type="head" />
   
   

5. Next, you will see the <body> and at the end just before the </html> tag there is a </body> tag. In between those tags is the markup which produces your website's looks.
6. You'll see a <div id="header-container">something else</div> which is of course the header container of your site. The ID is used by the CSS to add presentation rules and should always be unique, used just once per page. Look in pageframe.css for an example:

   
   #header-container {
   height: 200px;
   background: url('/../images/header_back.png') 0 0 no-repeat;
   }
   
   

7. You'll also see things like <div class="inner">something else</div> which I've put in there to show that something with a class can be used many times on a page. The inner in this case puts a 10pixel padding inside some of the containers. The padding is set in frame.css, look for:

   
   .inner {
   padding: 0 10px 10px 10px; /* no top padding */
   }
   
   

8. Some divs have a class="clearfix" which is a "hack" that makes sure a div wraps around two or more floating elements inside that div but that's not something to break your head over now.
9. You'll also find things like:

   
   <?php if($this->countModules('content_top')) : ?>
   <jdoc:include type="modules" name="content_top" style="raw" />
   <?php endif; ?>
   
   

10. Which are the Joomla! tags that render your modules. The above will first check/count if there are modules published on the position "content_top" and if there are will show all modules that are published for that position with a "raw" style which is minimal markup. You could change that to xHTML for example and have some more markup per module to style.

Quick, rapid, fast, speedy and custom

That is in blazing speed explained what a Joomla! template is and I hope this gives you the basis to start building your own template from scratch using the "Joomla_base" template as a guideline.

The most important thing to remember is again "don't be afraid to try," you'll learn by trying and trying again.

Change and refresh the site front-end after a change and see what happens:

1. Change color codes in your CSS files
2. Change heights, widths, paddings, margins, float: from left to right
3. Move div blocks around in the index.php file
4. Do whatever you can think off

The index.php and CSS files are full of comments explaining what different parts do, you can remove them when you put a template on a real site.

The template uses none of the Joomla! core CSS classes or id's because right now it shows that basically any HTML/CSS design can be used as a Joomla! template.

Download the source used in this tutorial

1. Download the template pack
2. Download the demo data (import in a Joomla! database)
3. The Joomla! template forum

Happy templating all!

Update on the wedding. They managed to stay in the game until there where just 4 couples left and than they lost. They're going to marry any way in the next couple of weeks :-)

This post on Joomla! is called Joomla! 1.5 and the Million Dollar Wedding

Like it? Share it!

• bookmark.it
• del.icio.us
• digg
• furl
• blinkllist
• reddit
• feedmelinks
• technorati
• yahoo
• rawsugar
• netvouz
• rojo
• shadows
• gabbr
• dzone
• newsvine
• ma.gnolia
• stumbleupon
• google
• squidoo
• spurl
• blinkbits
• blogmarks
• bloglines
• co.mments
• scuttle
• ask
• slashdot