Joomla Theme pt. 1

Installing Joomla is well documented, and surprisingly easy to install (at least on my good old macbook pro). Once installed, I think most people are wondering how on earth do I create a theme. I sure did, so i dug around and started picking a theme apart to figure out how to do this.

“Installing” a new theme is as simple as copying an existing theme to another folder. I shamelessly started with… well.. now I forgot, but never mind.

Pick an existing template, copy the entire folder and name it “Prescienta” (that’s what I did).

Then

Locate the index.php file, and make a copy of it too (let’s call it _index.php since underscores make you seem clever!

If you go to the management console, and pick Extensions/Template Manager, you’ll see two templates with the SAME NAME (aaargh). The devil is in the details as they say, so lets go back to the template dir, and find the file called “templateDetails.xml”. In that file you will find a bunch of things that you can edit. Some of them are pretty obvious (like the name of the template, the author and so on), but others offer some nifty functionality.

In the templateDetails.xml file, locate the section called <params>

Let’s add a new parameter to control the background color.

  <params>
    <param name="backgroundOption" type="list" default="white" label="Background Color" description="Background color to use">
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="orange">Orange</option>
      <option value="black">Black</option>
      <option value="white">White</option>
    </param>
  </params>

If you save the files, go back to the template manager, and pick your new template, you will see the new option that you just added.

Fantastic, but how do I use this? If you go back to your index.php and open it in your favorite editor (I use Coda), you can add the following code.

<div style="background-color:<?php echo $this->params->get('backgroundOption'); ?>">Wow - my new param</div>

And that, my friend, concludes part one of the Joomla template tutorial

Advertisements

Author: prescienta

Prescientas ruler

One thought on “Joomla Theme pt. 1”

  1. Pingback: Trackback

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s