how to create your first joomla template

How to Create Your First Joomla TemplateTarek Farage on Feb 17th 2009 with 358 commentsTutorial Details

Difficulty: Beginner

Completion Time: 1-2 hours

In this tutorial , you will learn about the basics of a Joomla template, and create

one from scratch. We will quickly go through installing a local server and Joomla

itself, and then create a basic functioning template.

1. PreparationBefore we get started on our template, there are a few things you need to

prepare.

Just like most CMSs, Joomla requires a server with PHP and MySQL installed.

Installing the above manually can be quite annoying and, to be honest, a waste

of time (unless you want to get into how it’s done exactly).

What we will be doing is downloading a single installer for all the above that will

stick a local server on your system and give you a really nifty control panel too.

So head on over to WAMP and download the latest version.( MAMP for Mac)

Once the installer is downloaded, execute it and install WAMP in a place easy to

remember. If all goes to plan you should be looking at a folder named : wamp

http://net.tutsplus.com/author/tarekfarage/

http://www.mamp.info/en/index.php

http://www.wampserver.com/en/

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/#comments

You should now also have an icon in your notification bar (where the clock is)

that gives you access to WAMP’s control panel. You can use this for a number of

things, including restarting the server.

2. Downloading and installing JoomlaNow that we have a server installed, we can get Joomla and set it up. Go

to Joomla and download the latest release.

http://www.joomla.org/

Before we continue, let’s take a look at our wamp folder again. Inside you will

find a bunch of folders, but the one we are interested in is the www folder.

This is the root of your server setup and this is where we will be installing

Joomla. (note: you can install as many copies of Joomla in here as you want, or

anything else for that matter)

So, unpack your Joomla download into the www folder. I usually rename it at

this point to the name of my site or just shorten it to joomla.

Joomla is now on our server. However there is one last thing we need to do

before installing, and that’s to create a database. Open up your browser and go

to http://localhost .

Here you will find the your server admin area, this is where we create our

database.

To create the database, click on phpmyadmin under the Your Aliases section.

For this tutorial’s sake we will be calling our database joomla. You will not be

creating a user with password here, instead using the root user details. It is

strongly recommended that you create a user with a strong password in live

situations.

Now that we have a database, we can start installing Joomla. Fire up your

browser and go to http://localhost/joomla (or whatever you called your site

when unpacking it.)

The first screen pretty much speaks for itself. Choose a language and press

next.

The next screen you see is the Pre-Install checklist. This is a list of the required

items and settings Joomla needs to successfully install. Make sure you have the

necessary configuration and click next.

On the next page, read the license carefully, and, when ready click next and

enter the required details(Host Name: localhost , Username: root , no password

and joomla as Database name), and press next.

Skip the FTP Configuration screen by clicking next and on the next page, enter

your site name, an email address and choose a password. This will be the

password you will use to log into the admin area of joomla along with the

username: admin.

We will not install any sample data right now, as we want to add the modules

one by one to see how our template is coming along later on in the tut. Click

next.

Congrats! Joomla is up and running, but before we can go in and mess around

we have to delete the installation folder. So go to your www folder inside wamp,

and then into the joomla folder and delete the installation folder

3. A closer look at JoomlaIt’s pretty hard these days to get into any Open Source CMS discussion without

the name of Joomla dropping.

Its installation along with intuitive admin panel makes it very popular with users

who are after an easy CMS while, at the same time, being packed with features

that keep

thousands of developers busy rolling applications and modules. If necessary,

get familiar with the back end ( I recommend this quick Joomla 101 article on

the Themeforest blog to get a quick feel.)

To visit your site , click on preview in the upper right corner of the admin area.

What you will get is the default template with no content and the most basic of

modules loaded.

http://blog.themeforest.net/joomla/joomla-101/

4. The templateIn order to begin understanding the template structure, let’s take a look at the

default one. Go to your www folder, then inside the joomla folder you should

see a templates folder.

(wamp/www/joomla/templates). This is where all the different templates go. You

can switch between templates in the admin panel.

Inside the templates folder, you will see a folder for every template installed.

Joomla comes with three templates: beez, rhuk_milkyway and ja_purity.

Remember this location as this is where you will be installing your new

templates in the future.

Although most templates are made up of quite a few files, only two are needed

to make a working template. These are:

index.php

templateDetails.xml

The first one – index.php – is where all the markup goes in which you stick the

Joomla includes. These can be seen as little hooks where joomla hangs up

information on, like modules for example

The second file is templateDetails.xml. You can see this as a list of instructions

to Joomla. This list must include the name of the template, the names of the

files used in the template(images etc..) and the positions you want to use (the

includes mentioned above.)view plain copy to clipboard print ? 1. <?xml version="1.0" encoding="utf-8"?> 2. <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 3. "http://dev.joomla.org/xml/1.5/template-install.dtd"> 4. <install version="1.5" type="template"> 5. <name>template _tut</name> 6. <creationDate>31-01-2009</creationDate> 7. <author>Nettut Fan</author> 8. <authorEmail>[email protected]</authorEmail> 9. <authorUrl>http://www.siteurl.com</authorUrl> 10. <copyright>You 2009</copyright> 11. <license>GNU/GPL</license> 12. <version>1.0.0</version> 13. <description>Template Tut</description> 14. <files> 15. <filename>index.php</filename> 16. <filename>templateDetails.xml</filename> 17. <filename>css/template.css</filename> 18. </files> 19. 20. <positions> 21. <position>breadcrumb</position> 22. <position>left</position> 23. <position>right</position> 24. <position>top</position> 25. <position>user1</position> 26. <position>user2</position> 27. <position>user3</position> 28. <position>user4</position> 29. <position>footer</position> 30. </positions> 31. </install>

The above is an example of a templateDetails.xml file. As you can see, this is a

specific list that tells Joomla about the template, like the name, the author, date

created etc…

Notice the positions section in the code above. These are the positions we

spoke of earlier, the includes.

Some are self explanatory, like footer.

If you put the joomla footer include in the footer area of your design, you will be

able to control some aspects of the footer using the Joomla back end. Lets try

and throw together a simple template.

5. Beginning the template

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/




Lets do some preparation so we have something to work with. Go to your

templates folder , and create a new folder. Lets call it template_tut.

Inside your new folder, create a file called index.php, and another called

templateDetails.xml (copy/paste the code in the example above inside it).

Open up your index.php file in notepad or anything else you use to edit code,

and copy/paste the following in:view plain copy to clipboard print ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-

>language; ?>" lang="<?php echo $this->language; ?>" > 3. <head> 4. <jdoc:include type="head" /> 5. </head>

We have a DOCTYPE, a PHP code for the language, and in the head section our

first Joomla include. This is not in the xml list because it is not a position.view plain copy to clipboard print ? 1. <jdoc:include type="head" />

What this does is include the joomla header code (which includes the page

title), and a bunch of other stuff that can probably fill half a tutorial on its own.









Finish up the markup on the page by adding the body tags and closing the html

tag.

6. Using the template Now that we have the basic files in place, let’s add another include, this time to

display the main content of any given page being viewed.view plain copy to clipboard print ? 1. <jdoc:include type="component" />

You should now have this in your index.phpview plain copy to clipboard print ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://


>language; ?>" lang="<?php echo $this->language; ?>" > 3. <head> 4. <jdoc:include type="head" /> 5. </head> 6. 7. <body> 8. 9. <jdoc:include type="component" /> 10. 11. </body> 12. </html> 13.

Before we test our template, let’s add an article so we have some content.

Make sure WAMP is running and go to your admin area in Joomla with

http://localhost/joomla/administrator

Now enter your login details

Go to Content on the menu and then to Article Manager in the drop down









Click on New to add an article

Give your article a title, fill in an alias, make sure its published to front page and

hit save

Let’s see what our article looks like on the front page. Click on preview in the

upper right corner after saving. You should see the front page of your site with

your text.

Now that we have published content, let’s see if the template we made actually

works. Go back to your admin area and click on Extensions and then Template

Manager

You should see template_tut in the list, so go ahead and choose it, and set it as

default.

Hit preview and check out your glorious new template. Well maybe not so

glorious but your first joomla template. YAY!

7. Adding some meat to our template We got our template working, it’s retrieving the header info including the title

and displaying content we created in the joomla back end .Before we add more

includes, let’s take a closer look at the module position includes; the ones we

named in our xml file.view plain copy to clipboard print ? 1. <positions> 2. <position>breadcrumb</position> 3. <position>left</position> 4. <position>right</position> 5. <position>top</position> 6. <position>user1</position> 7. <position>user2</position> 8. <position>user3</position> 9. <position>user4</position> 10. <position>footer</position> 11. </positions>

They are included in the following way:view plain copy to clipboard print ? 1. <jdoc:include type="modules" name="position_name" />

So in order to add , for example, the left position, our index.php will look like

this:view plain copy to clipboard print ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://


>language; ?>" lang="<?php echo $this->language; ?>" > 3. <head> 4. <jdoc:include type="head" /> 5. </head> 6. 7. <body> 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. </body> 12. </html>

While we are at it, let’s add the footer positionview plain copy to clipboard print ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://


>language; ?>" lang="<?php echo $this->language; ?>" > 3. <head> 4. <jdoc:include type="head" /> 5. </head> 6. 7. <body> 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. <jdoc:include type="modules" name="footer" /> 12. </body> 13. </html>

















If you go back to your admin area, and go to the Module Manager you will

notice a module already there, the Main Menu module. This module gets

installed even if we choose to install the simple version of Joomla.

The menu is already hooked on to the left position (which we just included in

our template), so let’s see what it looks like. Hit preview

As you can see, we now have a menu with a link to Home. You can add more

menu items and link to different content through the Menu Manager.

Lets get a footer working. Go to the Module Manager, click new and select

Footer. Then press next.

On the following page, give the new module the title: Footer, and in the Position

dropdown, select Footer.

Click save and then preview the page.

You should now also see footer information on your template.

8. Adding more positions and modules Lets style our page a bit so we can see what we are doing. In your template_tut

folder create a new folder and call it “CSS” , and create a file inside it called

‘template.css”

Stick the includes in index.php in some divs and wrap it all in a container div

and then link your style sheet like the example. Feel free to copy my messy

layout if you are not already using one of your own. I did mine real quick for this

tutorial.view plain copy to clipboard print ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://


>language; ?>" lang="<?php echo $this->language; ?>" > 3. <head> 4. <jdoc:include type="head" />





5. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/template_tut/css/template.css" type="text/css" />

6. </head> 7. 8. <body> 9. <div id="container"> 10. <div id="header"> Header and stuff</div> 11. <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left"

/></div> 12. <div id="content" class="float"> 13. <jdoc:include type="component" /> 14. </div> 15. <div id="sidebar_right"class="float">Right sidebar</div> 16. <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /

></div> 17. </div> 18. </body> 19. </html>

and the CSSview plain copy to clipboard print ? 1. * { 2. padding: 0; 3. margin:0; 4. } 5. ul { 6. list-style:none; 7. } 8. . float { 9. float: left; 10. } 11. . clear { 12. clear: both; 13. } 14. #container { 15. width:960px; 16. margin: auto; 17. } 18. #header { 19. background-color:#999999; 20. height: 150px; 21. } 22. #content { 23. width: 660px; 24. text-align: center; 25. 26. } 27. #sidebar_left { 28. text-align: center; 29. background-color:#CCCCCC; 30. width: 150px; 31. } 32. #sidebar_right { 33. background-color:#CCCCCC; 34. width: 90px; 35. } 36. #footer { 37. background-color:#999999; 38. text-align:center; 39. }

Lets hook our right sidebar and header up with positions. Add the top position to

the header and right position to the right side bar.view plain copy to clipboard print ? 1. <div id="header"><jdoc:include type="modules" name="top" /> </div>









2. 3. and 4. 5. <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /

></div>

Now let’s create the modules for those two positions. Go to the admin area of

Joomla, login if necessary, and go to the Module Manager under the Extensions

drop down menu. You should see Main Menu and the Footer we created earlier.

Follow the same steps to create two more modules. A Search module that you

will place in the top position, and a Login module that you will place in the right

position.

Preview your page, you should now have a search bar in your header and a

login form in your right sidebar. These are pretty much the basics of a Joomla

template. You create positions in your design, like little hooks for Joomla to send

info to, which in most cases you create in the back end. You can apply this to

almost any design using the many positions that Joomla offers. I hope this has

been useful to you guys, keep in mind that these are the very basics, Joomla

templates can be made as complex and powerful as you want.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts

and articles.

How to Build a Joomla Template: Start to FinishRyan Olson on Oct 21st 2010 with 133 comments

Tutorial Details

Topic: Joomla Template Creation

Difficulty: Basix

Estimated Completion Time: 2 Hours

Download SOURCE FILES

Demo VIEW IT ONLINE

To begin, I am not even going to touch the inevitable flame war here. Joomla vs

WordPress vs… who cares? And frankly, neither should you. You wouldn’t

hammer a nail with a saw, would you? So let’s bear in mind that every job

requires the correct tool.

That being said, this tutorial will demonstrate how to proceed from design to

deployment of a complete Joomla template theme, including core override and

template option parameters that you can use and abuse to your hearts content.

Getting Around The PSD

The HTML

The CSS

The JavaScript

Joomla Conversion

Frontpage Override

Dynamic Parameters

Installation

My goal is to provide something useful — not ammunition. There are so many

wonderful WordPress resources and so few for Joomla. This is my attempt to aid

in the effort; I hope you find it useful. So let’s begin!

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#install

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#params

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#front

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#joomla

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#js

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#css

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#html

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#psd

http://demos.thatryan.com/joomla_tutorial/

http://nettuts.s3.amazonaws.com/826_joomla/source.zip

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#comments

http://net.tutsplus.com/author/ryan-olson/

http://feeds.feedburner.com/nettuts

The PSDBack Up

Here is the design I am starting with. I found a free PSD file online here, and

modified it for this tut. The easiest and fastest way I have found to get from PSD to HTML is how I will demonstrate here. Begin by making sure auto select

layers is enabled in Photoshop, and then make note of which images you need

to grab. Concentrate on parts that either you cannot, or do not want to

duplicate, via CSS. This includes things, such as actual imagery, logo, and

buttons (possibly). Shadows and gradients are your call, considering the new

CSS3 properties, and should be decided on a case by case basis. For this tut, we

will achieve those effects with CSS.

http://theodin.co.uk/blog/design/everlyn-marketing-and-pr-site-template.html

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/#toc

Old browsers get solid colors…fine with me!

Start by clicking on the logo to highlight its corresponding layer in the layers panel. Now, move the cursor to the thumbnail and option+click it to auto

select the entire layer; you should should see ants dancing around it now.

Next, hit copy, create a new file, (cmd+c, cmd+n if you are rocking a Mac) and

you will notice that the height and width are automatically set; so simply hit enter, then paste (cmd+v) and you have the logo. You may not see it as the

background blends with the text, so the next step, for all images you copy that

have transparency, is to turn off the background layer.

Next, save it as a .png file to preserve the pretty see-through-ness and name it

something obvious like “logo” or such. BAM! Image one is done. Rinse and

repeat for all the images you need to grab.

A tricky one can be the button dots used for the slider navigation. The easiest

way that I’ve found to do this is to copy the layer or group that makes up one of

the dots, and then put it into a new file, bigger than its actual size. Then turn off the background layer, go to trim in the edit menu,

and get rid of the transparent pixels so that the size is precise.

Continuing on, edit the image canvas size to be 200% height, and simply copy,

(option+click) the layer or group and drag it down to duplicate it. Make a

change to this one and you now have an active state! Easy as pie right? Save

this new image and our buttons are now ready!

Once you have gathered the pics, drop them into a folder, called images, and

now it is time to begin building the HTML structure; let’s dig into some HTML.

The HTMLBack Up

So we have our design and images; now it’s time to turn them into something

usable. You can skip this step, and very well may learn to as you become more

adept at templating a site; however, I still find it helpful to construct the static

version before full conversion into a theme. Create a simple folder structure like so, and then in index.html, build a standard HTML skeleton with a structure.


view plain copy to clipboard print ?

1. <!DOCTYPE html> 2. <html lang="en" class="no-js"> 3. <head> 4. <meta charset="utf-8"> 5. 6.  7. 8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9. 10. <title>Joomla! Template Tutorial</title> 11. 12. <link rel="stylesheet" href="css/style.css"> 13. 14. <script src="js/modernizr-1.5.min.js"></script> 15. 16. </head> 17. 18.  19.  20.  21.  22.  <body>  23. 24. <header id="header"> 25. <section id="header_container" class="clearfix"> 26. 27. </section> 28. </header> 29. 30. <section id="wrapper" class="clearfix"> 31. 32. </section> 33. 34. <footer id="footer"> 35. <section id="footer_container" class="clearfix"> 36. 37. </section> 38. 39. </footer> 40. 41. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></

script> 42. 43. <script src="js/plugins.js"></script> 44. <script src="js/script.js"></script> 45. 46. </body> 47. </html>

http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/

This is the base HTML5 we are going to use to create this site. It’s based on

the HTML5 Boilerplate. You will notice the inclusion of the Moderizr script, so be

sure to download it there if you need it. Starting from the top, let’s go ahead and add in our logo and navigation sections, so inside the header_container,

add the following chunk:view plain copy to clipboard print ?

1. <h1 class="logo"> 2. <a href="/" title="Custom Template">Custom Template</a> 3. </h1> 4. 5. <nav id="main_nav"> 6. <ul> 7. <li><a href="#">Home</a></li> 8. <li><a href="#">About</a> 9. <ul> 10. <li><a href="#">Sub Link</a></li> 11. <li><a href="#">Sub Link</a></li> 12. <li><a href="#">Sub Link</a></li> 13. <li><a href="#">Sub Link</a></li> 14. <li><a href="#">Sub Link</a></li> 15. <li><a href="#">Sub Link</a></li> 16. </ul> 17. </li> 18. <li><a href="#">Blog</a></li> 19. <li><a href="#">Contact</a></li> 20. </ul> 21. </nav>

This covers the logo link and a simple menu system, complete with dropdown goodness. I used the new tag,nav, for the semantic HTML5 markup. Up next is

our featured content slider area, so, inside of our wrapper section, add the

following to create an image list:view plain copy to clipboard print ?

1. <article id="featured"> 2. <ul class="slider"> 3. <li class="first"> 4. <img src="images/slide1.jpg" /> 5. <div class="slide_caption"> 6. <p>Testing Caption!</p> 7. </div> 8. </li> 9. 10. <li> 11. <img src="images/slide1.jpg" /> 12. <div class="slide_caption"> 13. <p>Testing Caption!</p> 14. </div> 15. </li> 16. 17. <li> 18. <img src="images/slide1.jpg" /> 19. <div class="slide_caption"> 20. <p>Testing Caption!</p> 21. </div> 22. </li> 23. 24. <li> 25. <img src="images/slide1.jpg" /> 26. <div class="slide_caption"> 27. <p>Testing Caption!</p> 28. </div>









http://www.modernizr.com/

http://html5boilerplate.com/

29. </li> 30. 31. </ul> 32. </article>

Feel free, obviously, to change the text and image links to suit your own setup,

or simply follow along here. Be sure that you are not hopping into a browser to

check this out yet, because it will look dreadful!The list of elements inside the slider ul will all start out hidden, except for the

first one, which is why it has a class assigned to it: first. This way, we keep all

of the images from briefly displaying on page load, bypassing that annoying

flicker.

Next, we add some main content stuff; drop in these two sections. I am simply

duplicating what was in the PSD when we started.view plain copy to clipboard print ?

1. <section id="main" class="clearfix"> 2. <aside id="why"> 3. <h3>Why Joomla?</h3> 4. <img class="alignright" src="images/joomla.png" /> 5. <p>Well it is pretty awesome. How about that? Also, the model - view - controll

er structure is a strong base for construction.</p> 6. </aside> 7. 8. <article id="content"> 9. <h3>Why Am I Writing This Stuff?</h3> 10. <p>I don't know! I should just use some Lorem Ipsum and be done with it here,

right? But hey, I thought this would be fun too! Plus, I get to say stuff about what we are making. Ok ok ok, here is your precious Lorem text.</p>

11. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

12. 13. </article> 14. 15. </section>

I gave the first chunk an aside tag as I feel it tangentially relates to the rest of

the content, and the main content gets the article tag as it would be the main

area.

Now to incorporate our tri-column section:view plain copy to clipboard print ?

1. <section id="columns" class="clearfix"> 2. <article class="col left"> 3. <h3>Base Info</h3> 4. <ul> 5. <li>Did I design this?</li> 6. <li>Nope, not really.</li> 7. <li>It is based off a free PSD</li> 8. <li>You can find <a href="http://theodin.co.uk/blog/design/everlyn-

marketing-and-pr-site-template.html" title="Everlyn - Flexible Marketing, PR, Agency Site | the odin">here!</a></li>

9. </ul> 10. </article> 11. 12. <article class="col center"> 13. <h3>More Stuffs</h3> 14. <ul> 15. <li>This will be HTML5 based!</li>









16. <li>Probably some CSS3 too <img src="http://net.tutsplus.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </li>

17. <li>jQuery enhancements? Oh yeah!</li> 18. <li>Working slider? Check.</li> 19. <li>More Lorem Ipsum over there →</li> 20. </ul> 21. </article> 22. 23. <article class="col right"> 24. <h3>Blah Blah</h3> 25. <ul> 26. <li>Lorem ipsum dolor sit amet</li> 27. <li>consectetuer adipiscing elit</li> 28. <li>Aliquam tincidunt mauris eu risus</li> 29. <li>Vestibulum auctor dapibus neque</li> 30. </ul> 31. </article> 32. 33. </section> 34. 35. <hr />

I aptly named the section with an ID of columns, and, inside, have three articles

with a class to style them properly later. I added in a horizontal rule to break it

up a bit as well.

Finally, we arrive at our images section:view plain copy to clipboard print ?

1. <section id="images" class="clearfix"> 2. <h3>Fun With Lightboxes!</h3> 3. <figure class="zoom_out"> 4. <a rel="prettyPhoto" href="images/img1_full.jpg"><img src="images/

img1.jpg" /><span></span></a> 5. </figure> 6. 7. <figure class="zoom_out"> 8. <a rel="prettyPhoto" href="images/img2_full.jpg"><img src="images/

img2.jpg" /><span></span></a> 9. </figure> 10. 11. <figure class="zoom_out"> 12. <a rel="prettyPhoto" href="images/img3_full.jpg"><img src="images/

img3.jpg" /><span></span></a> 13. </figure> 14. 15. </section>

Worth noting here is the inclusion of the rel attribute on the image links inside

of the figure tags. I did this to incorporate the PrettyPhoto plugin we will be

using to spice these pics up a bit. The image displayed is the smaller, thumbnail size one, and the actual href points to the full-sized image.

Now, down to the bottom, inside of the footer_container, drop in

these sections to give us our three columns and associated content:view plain copy to clipboard print ?

1. <aside class="foot_col"> 2. <h4>Some Links</h4> 3. <ul> 4. <li><a href="/">PSD Base</a></li> 5. <li><a href="/">thatryan.com</a></li> 6. <li><a href="/">myappshelf.com</a></li> 7. <li><a href="/">twitter.com/ryanolson</a></li> 8. </ul> 9. </aside>





http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/





10. 11. <aside class="foot_col"> 12. <h4>More Links</h4> 13. <ul> 14. <li><a href="/">Lorem</a></li> 15. <li><a href="/">Ipsum</a></li> 16. <li><a href="/">Ipsum</a></li> 17. <li><a href="/">Lorem</a></li> 18. </ul> 19. </aside> 20. 21. <aside id="about"> 22. <h4>About This Template</h4> 23. <p>So a few fun things should work in this bad boy. We will have a cool animated

menu, some sweet popup lightbox images, a featured image slider that is rocking, and more!</p>

24. </aside>

And finally, just outside of the closing section tag for the footer_container,

paste in our lower copyright area that includes the link to jump back to top.view plain copy to clipboard print ?

1. <section id="copyright" class="clearfix"> 2. <a href="#header">Go Up!</a> 3. <p>Copyright yo!</p> 4. </section>

Notice how the href points to the header ID; this will allow a click here to jump

the page right back up to the top-most section. Later, we will enhance this with

some scrolling fun.

Onto some styling now; if you take a look in a browser, you will find something

similar to this — but don’t worry, we are about to rectify the situation!





The CSSBack UpLet’s work on the styling a bit. Inside your style.css file, begin by dropping in

this base here. It contains a reset and basic setup of the elements, and of

course, the ubiquitous clearfix.view plain copy to clipboard print ?

1. /* 2. *Reset 3. */ 4. html, body, div, span, object, iframe, 5. h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6. abbr, address, cite, code, 7. del, dfn, em, img, ins, kbd, q, samp, 8. small, strong, sub, sup, var, 9. b, i, 10. dl, dt, dd, ol, ul, li, 11. fieldset, form, label, legend, 12. table, caption, tbody, tfoot, thead, tr, th, td, 13. article, aside, figure, footer, header, 14. hgroup, menu, nav, section, menu, 15. time, mark, audio, video {






16. margin:0; 17. padding:0; 18. border:0; 19. outline:0; 20. font-size:100%; 21. vertical-align:baselinebaseline; 22. background:transparent; 23. } 24. 25. article, aside, figure, footer, header, 26. hgroup, nav, section { display:block; } 27. 28. nav ul { list-style:none; } 29. 30. blockquote, q { quotes:none; } 31. 32. blockquote:before, blockquote:after, 33. q:before, q:after { content:''; content:none; } 34. 35. a { margin:0; padding:0; font-size:100%; vertical-align:baselinebaseline; backg

round:transparent; } 36. 37. ins { background-color:#ff9; color:#000; text-decoration:none; } 38. 39. mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } 40. 41. del { text-decoration: line-through; } 42. 43. abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } 44. 45. table { border-collapse:collapse; border-spacing:0; } 46. 47. hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em

0; padding:0; } 48. 49. input, select { vertical-align:middle; } 50. 51. body { font:14px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } 52. 53. table { font-size:inherit; font:100%; } 54. 55. select, input, textarea { font:99% sans-serif; } 56. 57. pre, code, kbd, samp { font-family: monospace, sans-serif; } 58. 59. h1,h2,h3,h4,h5,h6 { font-weight: lighter; text-rendering: optimizeLegibility; } 60. 61. html { -webkit-font-smoothing: antialiased; } 62. 63. a:hover, a:active { outline: none; } 64. 65. a, a:active, a:visited { color:#37592f;text-decoration:none; } 66. a:hover { color:#036; } 67. 68. small { font-size:85%; } 69. strong, th { font-weight: bold; } 70. 71. td, td img { vertical-align:top; } 72. 73. sub { vertical-align: sub; font-size: smaller; } 74. sup { vertical-align: super; font-size: smaller; } 75. 76. input[type="radio"] { vertical-align: text-bottom; } 77. input[type="checkbox"] { vertical-align: bottombottom; *vertical-align: baselin

ebaseline; } 78. .ie6 input { vertical-align: text-bottom; }

79. 80. label, input[type=button], input[type=submit], button { cursor: pointer; } 81. 82. ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } 83. ::selection { background:#FF5E99; color:#fff; text-shadow: none; } 84. 85. a:link { -webkit-tap-highlight-color: #FF5E99; } 86. 87. html { overflow-y: scroll; } 88. 89. button { width: auto; overflow: visible; } 90. 91. .alignleft{float: left; margin: 0px 20px 10px 0px;} 92. .alignright{float: rightright; margin: 0px 0px 10px 20px;} 93. 94. .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidde

n; } 95. .clearfix { display: inline-block; } 96. * html .clearfix { zoom: 1; } /* IE6 */ 97. *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 98. .clearfix { display: block; }

Ok, that part is done… yay; now let’s add in our own styling!

Here we have some basic typography setup, colors and sizes.view plain copy to clipboard print ?

1. body, select, input, textarea {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#111; }

2. h1,h2,h3,h4,h5,h6{font-family:Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;color:#37592f;margin:5px 0;}

3. h1{font-size:36px;} 4. h2{font-size:32px;} 5. h3{font-size:28px;} 6. h4{font-size:24px;} 7. h5{font-size:18px;} 8. h6{font-size:14px;}

Now, give some styling to the top region.view plain copy to clipboard print ?

1. body 2. { 3. background: #e8e8e8; 4. } 5. hr 6. { 7. border-top: 1px inset #37592f; 8. margin: 10px; 9. } 10. #header 11. { 12. background: #37592f; 13. width: 100%; 14. } 15. #header_container 16. { 17. height: 220px; 18. margin: 0 auto; 19. position: relative; 20. width: 940px; 21. z-index: 5; 22. } 23. .logo 24. { 25. background: url(../images/logo.png) no-repeat; 26. float: left; 27. height: 49px;









28. margin-top: 40px; 29. width: 170px; 30. } 31. .logo a 32. { 33. display: block; 34. height: 100%; 35. text-indent: -9999px; 36. width: 100%; 37. }

Note the image in the logo styling; if you did not name yours the same, be sure

to change it here.The menu comes next. Here, we take care of positioning and text sizing, as well

as handling multi-level lists!view plain copy to clipboard print ?

1. #main_nav 2. { 3. float: rightright; 4. margin-top: 40px; 5. position: relative; 6. z-index: 6; 7. } 8. #main_nav ul 9. { 10. margin: 0; 11. padding: 0; 12. } 13. #main_nav ul li 14. { 15. float: left; 16. list-style: none; 17. margin-left: 10px; 18. position: relative; 19. } 20. #main_nav ul li a 21. { 22. color: #fff; 23. font-size: 22px; 24. text-decoration: none; 25. text-shadow: 0px -1px 0px #37592f; 26. } 27. #main_nav ul li a:hover 28. { 29. color: #999; 30. } 31. #main_nav ul li ul 32. { 33. background: #37592f; 34. border-bottom: 1px solid #555; 35. border-left: 1px solid #555; 36. border-right: 1px solid #555; 37. display: none; 38. left: -10px; 39. margin: 0; 40. moz-border-radius-bottomleft: 10px; 41. moz-border-radius-bottomright: 10px; 42. padding: 10px; 43. position: absolute; 44. top: 100%; 45. webkit-border-bottom-left-radius: 10px; 46. webkit-border-bottom-rightright-radius: 10px; 47. width: 140px; 48. z-index: 7;





49. } 50. #main_nav ul li:hover ul 51. { 52. display: block; 53. } 54. #main_nav ul li ul li 55. { 56. margin: 5px 0; 57. padding: 0; 58. } 59. #main_nav ul li ul li:hover 60. { 61. margin-left: 1px; 62. }

There’s some scary CSS3 in there, but it adds a pretty little curve to the bottom

part of the drop down list, so take it or leave itAlso, note how initially we start with the submenu ul as hidden, and only display

it when we hover over its parent list item. This ensures that the menu is still

accessible for folks without JavaScript enabled, because we will enhance this

later on.

We’ll next add in more structure styles to handle the main wrapper and the

uber fancy slider component we are putting to use.view plain copy to clipboard print ?

1. #wrapper 2. { 3. margin: 0px auto 20px auto; 4. position: relative; 5. width: 940px; 6. z-index: 1; 7. } 8. #wrapper p 9. { 10. text-shadow: 0px -1px 0px #f1f1f1; 11. } 12. #wrapper h3 13. { 14. text-shadow: 0px -1px 0px #f9f9f9; 15. } 16. #columns h3, #images h3 17. { 18. margin-left: 10px; 19. } 20. #featured 21. { 22. background: #e8e8e8; 23. border: 1px solid #555; 24. box-shadow: 0px 5px 15px #666; 25. height: 280px; 26. margin-top: -100px; 27. moz-box-shadow: 0px 5px 15px #666; 28. position: relative; 29. webkit-box-shadow: 0px 5px 15px #666; 30. width: 940px; 31. z-index: 2; 32. } 33. .slider 34. { 35. margin: 0; 36. padding: 0; 37. } 38. .slider li





39. { 40. display: none; 41. list-style: none; 42. position: relative; 43. } 44. .slider .first 45. { 46. display: block; 47. } 48. .slider li img 49. { 50. } 51. .slide_caption 52. { 53. background: rgba(0,0,0,.5); 54. bottombottom: 3px; 55. height: 40px; 56. left: 0; 57. position: absolute; 58. width: 940px; 59. } 60. .slide_caption p 61. { 62. color: #fff; 63. font-size: 24px; 64. margin: 5px 10px; 65. text-align: rightright; 66. text-shadow: none; 67. } 68. .slide_nav 69. { 70. bottombottom: 10px; 71. left: 10px; 72. position: absolute; 73. width: 200px; 74. z-index: 9; 75. } 76. .slide_nav a 77. { 78. background: url(../images/dots.png) no-repeat; 79. float: left; 80. height: 17px; 81. margin: 0 2px; 82. text-indent: -9999px; 83. width: 16px; 84. } 85. .slide_nav a:hover,.slide_nav a.activeSlide 86. { 87. background-position: 0px -18px; 88. }

Continuing, we’ll configure the footer section.view plain copy to clipboard print ?

1. #footer 2. { 3. background: #393939; 4. margin-top: 40px; 5. padding-top: 20px; 6. width: 100%; 7. } 8. #footer hr 9. { 10. border-bottom: 1px solid #565656; 11. border-top: none; 12. margin: 10px 0 20px 0; 13. width: 100%;





14. } 15. #footer_container 16. { 17. margin: 0 auto; 18. width: 940px; 19. } 20. #footer_container h4,#footer_container p 21. { 22. color: #fff; 23. } 24. #footer_container h4 25. { 26. border-bottom: 1px solid #000; 27. } 28. #footer_container p 29. { 30. margin: 10px 0; 31. } 32. #footer_container ul 33. { 34. margin: 10px 0 0 0; 35. padding: 0; 36. } 37. #footer_container ul li 38. { 39. border-bottom: 1px dotted #e8e8e8; 40. font-size: 14px; 41. line-height: 20px; 42. list-style: none; 43. } 44. #footer_container ul li a 45. { 46. color: #fff; 47. text-decoration: none; 48. } 49. #footer_container ul li a:hover 50. { 51. margin-left: 1px; 52. } 53. .foot_col 54. { 55. float: left; 56. margin-right: 30px; 57. width: 15%; 58. } 59. #about 60. { 61. float: rightright; 62. width: 58%; 63. } 64. #copyright 65. { 66. border-top: 1px solid #000; 67. clear: both; 68. margin: 30px auto 0 auto; 69. padding-top: 10px; 70. width: 940px; 71. } 72. #copyright a 73. { 74. background: url(../images/home.png) no-repeat; 75. float: left; 76. height: 16px; 77. text-indent: -9999px; 78. width: 18px; 79. }

80. #copyright p 81. { 82. color: #fff; 83. float: rightright; 84. }

Finally, let’s style some of the main text.view plain copy to clipboard print ?

1. #main 2. { 3. margin: 40px 0 20px 0; 4. } 5. #why 6. { 7. float: left; 8. width: 30%; 9. } 10. #content 11. { 12. float: rightright; 13. width: 59%; 14. } 15. #columns 16. { 17. clear: both; 18. margin: 40px 0; 19. width: 100%; 20. } 21. .col 22. { 23. float: left; 24. margin: 0 1%; 25. padding: 0; 26. width: 30%; 27. } 28. .left ul li 29. { 30. list-style-image: url(../images/info_bullet.png); 31. } 32. .center ul li 33. { 34. list-style-image: url(../images/more_bullet.png); 35. } 36. .rightright ul li 37. { 38. list-style-image: url(../images/warn_bullet.png); 39. } 40. #images 41. { 42. margin: 40px 0; 43. width: 100%; 44. } 45. #images figure 46. { 47. float: left; 48. margin: 0 10px; 49. position: relative; 50. width: width:290px; 51. z-index: 2; 52. } 53. #images figure a 54. { 55. text-decoration: none; 56. } 57. .zoom_out 58. {





59. position: relative; 60. z-index: 3; 61. } 62. .zoom_in 63. { 64. background: url(../images/img_zoom.png) no-repeat; 65. display: block; 66. filter: alpha(opacity=0); 67. height: 141px; 68. left: 0; 69. moz-opacity: 0; 70. opacity: 0; 71. position: absolute; 72. top: 0; 73. width: 290px; 74. z-index: 9; 75. }

Take a note of the final classes in the code above, zoom_out and zoom_in. This

is another enhancement for the popup images, to add a little flare — you will

see soon enough!

At this point you should have something along the lines of this:

Hey, that isn’t too bad, but note that some parts may not work

as awesomly yet, because the scripts to make them function we have not yet

been created! So, time to get on that.

The JavaScriptBack Up

This part should be a snap! Mostly, because we are going to use a couple of

awesome plugins. First up is the Cycle plugin, by @malsup. We will use this to

build our slider, and also the PrettyPhoto plugin, by@scaron will be used for

our lightboxing. Enhancing this will be the easing plugin for some more spice,

andlocalscroll to handle our ups and downs. Each of the links above should link

to the author’s page where you can find and download the script you wish.

Once we have the plugins downloaded, we need to include them within our

code, like so:view plain copy to clipboard print ?

1. <script src="js/plugins.js"></script> 2. <script src="js/jquery.prettyPhoto.js"></script> 3. <script src="js/jquery.cycle.all.min.js"></script> 4. <script src="js/jquery.easing.1.1.1.js"></script> 5. <script src="js/jquery.scrollTo-1.4.2-min.js"></script> 6. <script src="js/jquery.localscroll-1.2.7-min.js"></script> 7. <script src="js/script.js"></script>

Note that, at the time of production, try to group these scripts into one file, in order to limit the number of HTTP requests.Be sure to put this in the footer “after” we include the jQuery library, in order

for this to all function. Bear in mind we will be combining all of these shortly.

Now to make these take effect, we have to write a small bit of scripting.view plain copy to clipboard print ?

1. <script> 2. $(document).ready(function(){ 3. }); 4. 5. </script>

Firstly, drop in this line of code to handle the hash tag scrolling:1. $.localScroll({duration:600});

This ensures that our “back to top” button will smoothly glide back up. Next,

let’s work with the slider core.view plain copy to clipboard print ?

1. $('.slider') 2. .after('<div class="slide_nav">') 3. .cycle({ 4. fx: 'scrollHorz', 5. timeout: 4000, 6. slideExpr:'li', 7. easing: 'bounceout', 8. pager: '.slide_nav' 9. });













http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

http://gsgd.co.uk/sandbox/jquery/easing/

http://twitter.com/scaron

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

http://twitter.com/malsup

http://jquery.malsup.com/cycle/


This will add the bullet navigation for the slides, and setup the duration and easing parameters. Next, we handle the lightbox with the prettyphoto code,

like so:view plain copy to clipboard print ?

1. $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_rounded'});

This instructs each image, that we assign the prettyPhoto rel to, to behave in

the proper manner. In order to spruce up the images, add in the following,view plain copy to clipboard print ?

1. $('#images figure').animate({'opacity' : 1}).hover(function() { 2. $(this).animate({'opacity' : 0.5}).find

('span').addClass("zoom_in").animate({'opacity' : 1}); 3. }, function() { 4. $(this).animate({'opacity' : 1}).find('span').removeClass("zoom_in"); 5. });

This will add a nice hover in, fade out effect when we mouse over the images.

Pretty!

And finally the menu; add the following snippet, still in between the document

ready tags.view plain copy to clipboard print ?

1. var mainLi = $('#main_nav ul li'); 2. 3. mainLi 4. .find('ul') 5. .hide() 6. .end() 7. .hover(function () { 8. $(this).find('> ul').stop(true, true).slideDown('slow'); 9. , function() { 10. $(this).find('> ul').stop(true, true).fadeOut('fast'); 11. );

This simply makes sure that the submenu is hidden on page load, and then sets

up the animations to take place when we hover over the corresponding menu

items. Simple and fun!

Okay, now check the page and make sure that all the functions and JavaScripts

are working as expected. We are now going to combine these multiple files. Go

ahead and open the file named plugins.js and inside paste the following:view plain copy to clipboard print ?

1. // remap jQuery to $ 2. (function($){ 3. 4. })(window.jQuery);

We will pass all of the plugin source code in between this function. Granted,

these plugins are by good developers and have been created the right anyway,

but this is a good habit to prevent potential conflicts with the jQuery

namespace. Grab the source for cycle, easing, localscroll, scrollto and

prettyphoto and paste each one in, one at a time, in between the remap function in plugins.js. Once that is done, save the file and open

up script.js. Here, we will take all the code in between the script tags in

our footerand paste it in, inside one document ready function.

















Now, we only need to import these two files and are good to go. Once done, be

sure to recheck and make sure that everything still works correctly on the page.

So we installed the PrettyPhoto plugin and its script, but we also need to grab

its default images and styling. So grab the folder named prettyPhoto from the plugin file you downloaded; it will be in the images folder. Simply copy that

folder in its entirety to your templates images folder. While you are there, copy theprettyPhoto.css into your template’s css folder as well. At this point, your

file structure should look something close to:

Now, hey, guess what? Refresh your html page to see some pretty sweet stuff

going on! Hopefully, you have a functional menu, slider, and scrollable and

lightbox imagery. Take a moment to revel in the fact that you just made some

awesomeness happen.

Back? Okay, now it’s time to tear this boy apart and templatize it for the

homestretch of our Joomla Template tutorial!

Joomla ConstructBack Up

We now have a fully functional static HTML site, and it is time to templatize this

monster. Joomla has a standard file structure that we need to adhere to. Create

a folder structure like so, and be sure to include all the files — I will explain

what each of them do shortly.


Starting with component.php; this file is a structure template that Joomla uses

to display content called with the component parameter. Essentially, when you

want to see part of the site that is just its content, and not the header/footer

etc. For now, you will simply be copying mine for the default usage. The CSS folder will hold, you know, CSS and the same with the images. Index.html is

simply a generic page that display nothing, and it is a good practice to keep one

of these empty index files in the root of each folder you create to keep prying

eyes away.Index.php will be the main file; nearly everything will take place in

here. Template_thumbnail.png is, you guessed it, an image of the template

itself that will show in the admin section of Joomla, andtemplate_details.xml is the main control file that Joomla reads to install

your template. It contains basic information about the file structure of your

theme, as well as template parameters and module position names.The Params.ini file needs to be here and can remain blank for now. This will be

a writeable file that stores the template parameter data that Joomla can access

later on.Finally, the HTML folder is where we will store files to override the default Joomla

behavior for certain display types, such as the frontpage. So inside, you will find another folder named frontpage, which itself holds a few more files. Each one

will take precedence over the default core files that would be used to display

the frontpage content. The benefit of this is that we can alter the structure here

completely, or simply remove a line we don’t want or need. Be sure to copy over your CSS and Images folders into this directory for your template as well.

Sidestep To gain an idea of where the files and folders inside the HTML folder come from, head to your root installation of Joomla and look in the administrator folder,

then in the components folder and finally open the com_content folder. You will

find a nice list of core components — components being the way Joomla

displays information in an abstract way from logic. This is only an overview; you

can override just about every aspect of Joomla output by adding a folder to the HTML folder in your theme root and creating a newview file. For example, to

override the main menu output, you would create a path such as[YOUR_TEMPLATE_NAME]/html/mod_mainmenu/default.php where mod_mainm

enu is the name of the core module you wish to override.

Breaking Into Pieces So, easiest thing first; take a snapshot of your HTML page and save it as template_thumbnail.png. This should be placed in the root of the template

folder. For index.html, simply open it up and paste the following inside:view plain copy to clipboard print ?

1. < html><body bgcolor="#FFFFFF"></body></html>

Make a few copies of this file and put them in the root of each folder.

Wow, two files down already!Now, for component.php, I suggest you use the one from the accompanying

download, as it is too much to paste in here, and it is just default behavior we

are not going to touch, but is helpful to have in your theme, depending on usage. Again, for the HTML folder, use the provided download and drop the

entire folder and contents into your template root.I like to break things up a bit more, so create a folder called includes, and,

inside two more folders, one named sections, and the other named scripts.

You guessed correctly: inside the scripts folder, copy all of the contents of

your HTML folder version’s js folder. Now, head into the sections folder and

create a few new files:

head.php

header.php

footer.php

scripts.php

setup.php

It seems like a lot, but it is really not. This is simply a good method to separate content and keep things as modularized as possible. We’ll start with setup.php,

so open that one up and paste the following in:view plain copy to clipboard print ?

1. < jdoc:include type="head" /> 2. 3. <?php









4. unset($this->_scripts[$this->baseurl .'/media/system/js/mootools.js']); 5. unset($this->_scripts[$this->baseurl .'/media/system/js/caption.js']); 6. unset($this->_scripts[$this->baseurl .'/media/system/js/validate.js']); 7. ?>

This is really a personal preference, but, for the sake of ease, I suggest you

follow along with it. First, we instruct Joomla to include the hook for its head,

thus enabling core functions access. Following that, I manually unset the mootools that is loaded by default.

Save and done! For now, we are finished with the set up, so open head.php and

add:view plain copy to clipboard print ?

1. < link rel="stylesheet" href="<?php echo JURI::base()."templates/".$this->template; ?>/css/style.css">

2. < link rel="stylesheet" href="<?php echo JURI::base()."templates/".$this->template; ?>/css/prettyPhoto.css">

3. 4. < script src="<?php echo JURI::base()."templates/".$this->template; ?>/includes/

scripts/modernizr-1.5.min.js"></script>

All we do here is point to the base stylesheet we will use, and load up the

Modernizr script. This is the only Javascript that gets loaded into the head section. The href attributes may look odd, and that is to keep them as dynamic

as possible. The PHP statement,view plain copy to clipboard print ?

1. echo JURI::base()."templates/".$this->template;

simply prints out the absolute base URL of the site as Joomla knows it, and then

concatenates it with the templates folder and points it to our own template. This

way, we can easily access our own files and folders.That’s it! Save head.php and move along to header.php.

Inside header paste in the following,view plain copy to clipboard print ?

1.  2.  3.  4.  5.  <body>  6. 7. <header id="header"> 8. <section id="header_container" class="clearfix"> 9. <h1 class="logo"> 10. <a href="/" title="Custom Template">Custom Template</a> 11. </h1> 12. <?php if($this->countModules('main_nav')) : ?> 13. 14. <nav id="main_nav"> 15. 16. <jdoc:include type="modules" name="main_nav" style="raw" /> 17. 18. </nav> 19. 20. <?php endif;?> 21. </section> 22. </header> 23. <section id="wrapper" class="clearfix"

This code opens the body tag in an awesome way that allows us to target

individual versions of Internet Explorer. Then, it creates our top header section

and navigation area. Finally, we open the main wrapper.

The new code here is the statement,view plain copy to clipboard print ?

1. <?php if($this->countModules('main_nav')) : ?>

This is a native to Joomla that runs a check before the page renders on the

specific module position. It determines if there is anything setup to go there. So, if we have not created a menu and assigned it to the position “main_nav” then

this statement will not execute. Be sure to close the if statement.Ok save it; we’re done for now. While we are here, open footer.php, and add:view plain copy to clipboard print ?

1. </section> 2. 3. <footer id="footer"> 4. <hr /> 5. < section id="footer_container" class="clearfix"> 6. <?php if($this->countModules('footer')) : ?> 7. <jdoc:include type="modules" name="footer" style="raw" /> 8. <?php endif;?> 9. </section> 10. 11. <?php if($this->countModules('copyright')) : ?> 12. 13. < section id="copyright" class="clearfix"> 14. <jdoc:include type="modules" name="copyright" style="raw" /> 15. 16. </section> 17. <?php endif;?> 18. </footer> 19. 20. </body> 21. </html>

You already know what’s happening in here now. Again, we simply create our

sections and close out the site. We also do a few more checks for module

positions so we can append their contents when needed.And here, we come to index.php, the main attraction. Add the following code:view plain copy to clipboard print ?

1. <!DOCTYPE html> 2. < html lang="en" class="no-js"> 3. < head> 4. < meta charset="utf-8"> 5. 6.  7. < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8. 9. <?php include_once(JPATH_ROOT . "/templates/" . $this->template . '/includes/

sections/setup.php'); ?> 10. <?php include_once(JPATH_ROOT . "/templates/" . $this->template . '/includes/

sections/head.php'); ?> 11. 12. </head> 13. 14. <?php include_once(JPATH_ROOT . "/templates/" . $this->template . '/includes/

sections/header.php'); ?> 15. 16. <section id="main" class="clearfix">

17. 18. <jdoc:include type="component" /> 19. 20. </section> 21. 22. <?php include_once(JPATH_ROOT . "/templates/" . $this->template . '/includes/

sections/footer.php'); ?> 23. <?php include_once(JPATH_ROOT . "/templates/" . $this->template . '/includes/

sections/scripts.php'); ?> 24. 25. </body> 26. </html>

Yup, it is everything that was left over! Now top to bottom: we start by declaring the new Doctype in HTML5 fashion. Next, we’ve added the no-

js class to the html tag if you are using Modernizr. We immediately include two

of the files we already setup: our head.php and setup.php. This time, note how

we use a new variable, jPATH_ROOT to concatenate our way into our template.

Once again, we’re keeping things as dynamic as possible so that we can

transport this code across multiple templates. After we include the top section,

we close out the head and start building our page. Including the header.php kicks that off and brings in the top section of our soon to be

awesome website.

Now, open the main section and drop in another Joomla call:

<jdoc:include type="component" />This call to component essentially tells Joomla to output right here exactly what

is put into the WYSIWYG editor for the page currently being viewed.Next we include the footer.php file to end things up, and then the last file we

created in the sectionsfolder, scripts.php.

What? Yes I know that file is empty still! So, let’s go fill it up. Open scripts.php and paste in the following:view plain copy to clipboard print ?

1. < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2. 3. < script src="<?php echo JURI::base()."templates/".$this->template; ?>/includes/

scripts/plugins.js"></script> 4. < script src="<?php echo JURI::base()."templates/".$this->template; ?>/includes/

scripts/script.js"></script>

Again, this is reading in our script files, and keeping them segmented away

from other code. Now, we add in the functions code like so:view plain copy to clipboard print ?

1. <script> 2. $(document).ready(function(){ 3. $

("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_rounded'}); 4. $.localScroll({duration:600}); 5. 6. $('.slider') 7. .after('<div class="slide_nav">') 8. .cycle({ 9. fx: 'scrollHorz', 10. timeout: 4000, 11. slideExpr:'li', 12. easing: 'bounceout', 13. pager: '.slide_nav'









14. }); 15. 16. $(document).ready(function() { 17. 18. $('.zoom_out').animate({'opacity' : 1}).hover(function() { 19. $(this).animate({'opacity' : 0.5}).find

('span').addClass("zoom_in").animate({'opacity' : 1}); 20. }, function() { 21. $(this).animate({'opacity' : 1}).find('span').removeClass("zoom_in"); 22. }); 23. 24. $('#main_nav ul li ul').hide(); 25. 26. $('#main_nav ul li').hover(function () { 27. $(this).find('> ul').stop(true, true).slideDown('slow'); 28. }, function() { 29. $(this).find('> ul').stop(true, true).fadeOut('fast'); 30. }); 31. 32. }); 33. 34. }); 35. 36. </script>

And we are good to go. Moving on!

The Frontpage Back UpYou may have noticed that index.php seems to be quite lacking in, stuff — like

everything that we built intoindex.html for the first version. Why is that? Well,

because that is for our homepage. Now, we are going to override Joomla’s frontpage to show our custom homepage. Head into the html folder, and then

intocom_content and the frontpage directory. Inside should be two PHP files;

make one called default.phpand one called default_item.php. We are going

to rip 95% of the guts from these to make our own, so open up default_item.php. If anything is there, delete it and replace it with:view plain copy to clipboard print ?

1. <?php echo JFilterOutput::ampReplace($this->item->text); ?>

Nice, right? This is setting up the output for whatever text was entered into the homepage component. Now open default.php and again, delete all that may

be there and paste in:view plain copy to clipboard print ?

1. <?php 2. defined('_JEXEC') or die('Restricted access'); 3. 4. global $mainframe; 5. jimport('joomla.filesystem.file'); 6. $slider = new JParameter(JFile::read(JPATH_BASE.DS.'templates'.DS.$mainframe-

>getTemplate().DS.'params.ini')); 7. 8. $slide_path = 'templates/' . $mainframe->getTemplate().DS.'images/slides/';










9. 10. $image1 = $slider->get( 'image1' ); 11. $caption1 = $slider->get( 'caption1' ); 12. 13. $image2 = $slider->get( 'image2' ); 14. $caption2 = $slider->get( 'caption2' ); 15. 16. $image3 = $slider->get( 'image3' ); 17. $caption3 = $slider->get( 'caption3' ); 18. 19. $image4 = $slider->get( 'image4' ); 20. $caption4 = $slider->get( 'caption4' ); 21. 22. $document = &JFactory::getDocument(); 23. $renderer = $document->loadRenderer('modules'); 24. $options = array('style' => 'xhtml'); 25. $columns = 'columns'; 26. $images = 'images'; 27. 28. ?> 29. 30. <article id="featured"> 31. 32. <ul class="slider"> 33. <li class="first"> 34. <img src="<?php echo $slide_path . $image1; ?>" /> 35. <div class="slide_caption"> 36. <p><?php echo $caption1; ?></p> 37. </div> 38. </li> 39. 40. <li> 41. <img src="<?php echo $slide_path . $image2; ?>" /> 42. <div class="slide_caption"> 43. <p><?php echo $caption2; ?></p> 44. </div> 45. </li> 46. 47. <li> 48. <img src="<?php echo $slide_path . $image3; ?>" /> 49. <div class="slide_caption"> 50. <p><?php echo $caption3; ?></p> 51. </div> 52. </li> 53. 54. <li> 55. <img src="<?php echo $slide_path . $image4; ?>" /> 56. <div class="slide_caption"> 57. <p><?php echo $caption4; ?></p> 58. </div> 59. </li> 60. 61. </ul> 62. 63. </article> 64. 65. <?php $i = $this->pagination->limitstart; 66. $rowcount = $this->params->def('num_leading_articles', 1); 67. for ($y = 0; $y < $rowcount && $i < $this->total; $y++, $i++) : ?> 68. <?php $this->item =& $this->getItem($i, $this->params); 69. echo $this->loadTemplate('item'); ?> 70. <?php endfor; ?> 71. 72. <section id="columns" class="clearfix"> 73. <?php echo $renderer->render($columns, $options, null); ?> 74.

75. </section> 76. 77. <hr /> 78. 79. <section id="images" class="clearfix"> 80. <?php echo $renderer->render($images, $options, null); ?> 81. 82. </section>

There’s lots of new stuff here, and this is a pretty complicated page override; so

let’s go through it all.

Because the frontpage is actually displayed via a component, the override does

not have access to the standard Joomla directives; we have to instantiate them.

So we create an object and use it to grab the params list that is set when we

update the template setting parameters. Once we have that, we can grab the

chosen parameters as we normally would. We then use the variables to output

the info into the slider list markup.

The modules class is not included by default either. We need to create an object

for it and load its renderer that will allow us to output our custom modules

where they need to go. Two variables are created after that:columns and images, which are then set equal to their respective module

positions, so that, later down the page, they can be called, using:view plain copy to clipboard print ?

1. <?php echo $renderer->render($columns, $options, null); ?>

Finally, the ugly part in the middle,view plain copy to clipboard print ?

1. <?php $i = $this->pagination->limitstart; 2. $rowcount = $this->params->def('num_leading_articles', 1); 3. for ($y = 0; $y < $rowcount && $i < $this->total; $y++, $i++) : ?> 4. <?php $this->item =& $this->getItem($i, $this->params); 5. echo $this->loadTemplate('item'); ?> 6. <?php endfor; ?>

This is the only part kept from the original default.php for the frontpage, as it

is how Joomla communicates with default_item.php, and decides if it is okay

to output whatever we had in the page. I know there is a lot to this file, but

hopefully it makes some level of sense.

If you have been working along, you should noe have a file hierarchy that looks

like so:









All that is left appears to be the XML file. Let’s handle that now.view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?> 2. <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://

www.joomla.org/xml/dtd/1.5/template-install.dtd"> 3. < install version="1.5" type="template"> 4. <name>Tutorial Template</name> 5. <creationDate>10/05/10</creationDate> 6. <author>Ryan Olson</author> 7. <authorEmail>[email protected]</authorEmail> 8. <authorUrl>http://thatryan.com</authorUrl> 9. <copyright></copyright> 10. <license></license> 11. <version>1.0</version> 12. <description>Template from tutorial creation</description> 13. </install>

Obviously, feel free to change the name and URLs to fit your needs. This file

sets up the install process to get our template into the database, so that Joomla

will recognize it. After you have this info in, we need to tell Joomla what to expect from our template folder. Before the closing </install> tag, paste in:view plain copy to clipboard print ?

1. <files> 2. <filename>component.php</filename> 3. <filename>index.html</filename> 4. <filename>index.php</filename> 5. <filename>template_thumbnail.png</filename> 6. <filename>templateDetails.xml</filename> 7. 8. <folder>css</folder> 9. <folder>html</folder> 10. <folder>images</folder>









11. <folder>includes</folder> 12. </files>

Remember the module positions we were querying earlier? Here is where we

inform Joomla what positions to expect by default:view plain copy to clipboard print ?

1. <positions> 2. <position>main_nav</position> 3. <position>columns</position> 4. <position>images</position> 5. <position>footer</position> 6. <position>copyright</position> 7. </positions>

Dont worry if you miss a position, because you can enter new ones later from

the administration area if needed. Finally, add:view plain copy to clipboard print ?

1. < params> 2. 3. </params>

Wait, what’s that? Glad you asked. Wouldn’t it be cool if we could change stuff

in our template on the fly from the backend? Yes, it would! This is where we get

the opportunity to setup some template parameters. In all honesty, you can go

nuts here, but for the purposes of this tutorial, I will only add some basic

parameters.

Let’s start with a simple text parameter to set the copyright in our footer. I

know this looks like backtracking, but, this way, we learn a second way of doing

things, and a better way to integrate it! Add this in between the params tags:view plain copy to clipboard print ?

1. < param type="spacer" default="<b>Template Parameters</b>" /> 2. 3. <param name="copyright" type="text" default="" label="Copyright" descriptio

n="Enter Copyright Text" />

The first param type is the spacer in which we can put a label. Make note of the

ASCII, however, if you wish to bold or italicize the text in there.

How about a second stylesheet? If so, add this parameter:view plain copy to clipboard print ?

1. < param name="style" type="radio" default="style" label="Style Sheet" description="Choose Color Style">

2. <option value="style">Default</option> 3. <option value="dark">Dark</option> 4. </param>

Once again, note how the name of the parameter is style, and the radio button

allows one stylesheet to be chosen at a time. Now before we jump into the big one, let’s first finish setting up these parameters. So open up setup.php and

add:view plain copy to clipboard print ?

1. $copyright = $this->params->get( 'copyright' ); 2. $style = $this->params->get( 'style' );

This creates two variables we can use that hold the input data for copyright and style, respectively. Now, open head.php and replace the

call to the style.css with this line:view plain copy to clipboard print ?

























1. < link rel="stylesheet" href="<?php echo JURI::base()."templates/".$this->template."/css/".$style;?>.css">

Here, we use the variable we just created to concatenate into the string to our

second CSS file. Don’t forget to create one! It will use the actual value from the parameter, so the default will output style.css, and dark will output dark.css.

Create a second CSS file, named dark.css and change anything in it for the

time being — only for the sake of reviewing difference. I made the header and footer all black.

Now open footer.php and replaceview plain copy to clipboard print ?

1. <?php if($this->countModules('copyright')) : ?> 2. 3. <section id="copyright" class="clearfix"> 4. <jdoc:include type="modules" name="copyright" style="raw" /> 5. 6. </section> 7. <?php endif;?>

…with:view plain copy to clipboard print ?

1. < section id="copyright" class="clearfix"> 2. <a href="#header">Go Up!</a> 3. <p> 4. <?php echo $copyright;?> 5. </p> 6. </section>

Now we have one less module to make, and we allow the copyright data to be set inside a parameter. Sweet! Head back into tempate_details.xml, and

remove the copyright position. Then, back into the parameter area, let’s setup

our slider.view plain copy to clipboard print ?

1. < param type="spacer" default="<b>Feature Slider</b>" /> 2. 3. < param name="image1" type="imagelist" default="" label="Select an image" descr

iption="Slide 1 Image" directory="/templates/tutorialtemplate/images/slides/" exclude="" stripext="" />

4. < param name="caption1" type="text" default="" label="Caption" description="Enter Image Text" />

5. 6. < param name="image2" type="imagelist" default="" label="Select an image" descr









Here, we create another spacer to segment our slider and then a few parameter

fields. One will be a drop down list for choosing the image to display, and the













second one, the caption for each slide. The drop down image list works as a

path; so inside your template images folder, create a new folder, named slides, and insert the images that you want to be made available to the

slider section. Be sure to change where it says “tutorialtemplate” to the name

of your template folder.

Dynamic Parameters Back Up

I debated including this part, but it is just too cool not to! You noticed that

PrettyPhoto has multiple folders and lots of CSS right? That is because it has a

few built in themes, which makes it ideal for a situation where you can change

stylesheets. We can make some dynamic parameters to change the theme that

PrettyPhoto will use!Within template_details.xml, add the following section for parameters:view plain copy to clipboard print ?

1. < param name="pretty" type="radio" default="style" label="prettyphoto" description="Choose popup Style">

2. <option value="dark_rounded">Dark Rounded 3. 4. <option value="dark_square">Dark Square 5. 6. <option value="facebook">Facebook Style 7. 8. <option value="light_rounded">Light Rounded 9. 10. <option value="light_square">Light Square 11. 12. </param>

So, we create a new section label and a dropdown list to choose the available

themes. The value returned will be a string that corresponds to the parameter

PrettyPhoto expects. To handle this, we need to make two more edits. First open up setup.php and add the following to grab the parameters that we can

now set:view plain copy to clipboard print ?

1. $pretty = $this->params->get( 'pretty' ); 2. $pretty_settings = array('theme' => $pretty);

The first line above sets a variable to the parameter we will choose, and then we add that parameter to an array with a key of theme — you will learn why in a

minute. Save and close this, then open scripts.php.

Find the code:view plain copy to clipboard print ?

1. $ ("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_rounded'});

And add this above it:view plain copy to clipboard print ?


















1. var pretty_settings = <?php echo json_encode($pretty_settings)?>;

This is why we put the parameter into an array. We can use the magic json_encode function to create a parameter list that we can send into a

jQuery function. Awesome! So replace the prettyPhoto function parameter with

this new variable, like so:view plain copy to clipboard print ?

1. $("a[rel^='prettyPhoto']").prettyPhoto(pretty_settings);

We can now dynamically change the theme from the template parameter

section! Awesome indeed.

Idea! Feel free to take this a step further and add multiple transition options to the slideshow.

Install Template Back Up

We should be all done! Wow, how exciting. Now, zip up this folder and install it

to your Joomla installation. With any luck, there will be no errors!

Jump into template manager, and set your new template as the default.






Be sure to create a new page, called home and assign it as frontpage. In it, you

can paste the following, which will be output from the Joomla “component”

module that we reviewed earlier in this tutorial. Please note: be sure to enter

this into the HTML view, not the WYSIWYG view, to preserve the tags.

Speaking of tag preservation, we need to set it up so that the TinyMCE editor

does not eat our code! Navigate to the plugins section and click on TinyMCE.

On the right, you will find an option to instruct Joomla to never perform “code

cleanup on save.” Check it, and save.

Phew, code is safe now! Okay, into the article manager and back to edit your

frontpage:view plain copy to clipboard print ?

1. < aside id="why"> 2. <h3>Why Joomla?</h3> 3. <img class="alignright" src="images/joomla.png" /> 4. <p>Well it is pretty awesome. How about that? Also, the model - view - controller

structure is a strong base for construction.</p> 5. </aside> 6. 7. < article id="content"> 8. <h3>Why Am I Writing This Stuff?</h3> 9. <p>I don't know! I should just use some Lorem Ipsum and be done with it here, rig

ht? But hey, I thought this would be fun too! Plus, I get to say stuff about what we are making. Ok ok ok, here is your precious Lorem text.</p>

10. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

11. </article>

Sweet. You may notice that your image did not appear. That is because the paths have changed and/images no longer goes to where it used to. Be sure to

alter your image paths to account for this; simply add to the front of the path, templates/YOUR_TEMPLATE_NAME/, and voila, images shall appear once

more!





Inside the modules section, create a new custom html module, and in the HTML

view, paste in the code and text from the columns section:view plain copy to clipboard print ?

1. < h3>Base Info</h3> 2. < ul> 3. < li>Did I design this?</li> 4. < li>Nope, not really.</li> 5. < li>It is based off a free PSD</li> 6. < li>You can find <a href="http://theodin.co.uk/blog/design/everlyn-marketing-and-

pr-site-template.html" title="Everlyn - Flexible Marketing, PR, Agency Site | the odin">here!</a></li>

7. </ul> 8. < h3>More Stuffs</h3> 9. < ul> 10. < li>This will be HTML5 based!</li> 11. < li>Probably some CSS3 too <img src="http://net.tutsplus.com/wp-includes/

images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </li> 12. < li>jQuery enhancements? Oh yeah!</li> 13. < li>Working slider? Check.</li> 14. < li>More Lorem Ipsum over there →</li> 15. </ul> 16. < h3>Blah Blah</h3> 17. < ul> 18. < li>Lorem ipsum dolor sit amet</li> 19. < li>consectetuer adipiscing elit</li> 20. < li>Aliquam tincidunt mauris eu risus</li> 21. < li>Vestibulum auctor dapibus neque</li> 22. </ul>

Set the position on it to columns and save. Do the same thing for a new images

module, and be sure to update the image paths!





view plain copy to clipboard print ?

1. < h3>Fun With Lightboxes!</h3>





2. < p><a href="templates/tutorialtemplate/images/img1_full.jpg" rel="prettyPhoto"><img src="templates/tutorialtemplate/images/img1.jpg" border="0" /></a> <a href="templates/tutorialtemplateimages/img2_full.jpg" rel="prettyPhoto"><img src="templates/tutorialtemplate/images/img2.jpg" border="0" /></a> <a href="templates/tutorialtemplate/images/img3_full.jpg" rel="prettyPhoto"><img src="templates/tutorialtemplate/images/img3.jpg" border="0" /></a></p>

We are so close… homestretch!Create one more custom html module, named footer, assign it to

the footer position, and drop in:view plain copy to clipboard print ?

1. < aside class="foot_col"> 2. <h4>Some Links</h4> 3. <ul> 4. <li><a href="/">PSD Base</a></li> 5. <li><a href="/">thatryan.com</a></li> 6. <li><a href="/">myappshelf.com</a></li> 7. <li><a href="/">twitter.com/ryanolson</a></li> 8. </ul> 9. </aside> 10. 11. <aside class="foot_col"> 12. <h4>More Links</h4> 13. <ul> 14. <li><a href="/">Lorem</a></li> 15. <li><a href="/">Ipsum</a></li> 16. <li><a href="/">Ipsum</a></li> 17. <li><a href="/">Lorem</a></li> 18. </ul> 19. </aside> 20. 21. <aside id="about"> 22. <h4>About This Template</h4> 23. <p>So a few fun things should work in this bad boy. We will have a cool animate

d menu, some sweet popup lightbox images, a featured image slider that is rocking, and more!</p>

24. </aside>

Before we leave the module section, click on the main menu module that was

there by default, and reassign its position to main_nav. Now, jump into template

admin and click on our template. You should be greeted by the following

screen:





Go ahead and pick a style and add some copyright text. Then, pick your images

and set some captions for the slider. Hit save, and guess what, time to check

this bad boy out! Point to the upper right and hit preview.

With any luck, you’ll see a sweet frontpage with some great functionality. I hope

this has been a useful read and resource for you. Please leave a comment

below, if you need any help. Thanks for reading.

how to create your first joomla template

Documents