8 Tips and Techniques for Modifying Joomla! Templates

Just starting out creating a Joomla! template and confused about how to really get a handle on modifying it? Check out these simple tips and tricks which will give you better control when designing your Joomla website.

When I first started creating Joomla templates there were a few things I was confused about. How should I modify only one page without affecting others? How do I change the structure of a module so that it’s easier to style? In this article we will go over how to remedy these problems as well as looking at other quick solutions you can use to speed up your Joomla template development work.

Lesson Outline:

1. Setting up a localhost Joomla installation.
2. Choosing a good template framework to work with (so you’re not reinventing the wheel).
3. Using URL data from the browser to style individual pages in Joomla.
4. Collapsing module positions.
5. Logged in styling.
6. Using module class suffixes to make modules unique.
7. Modify module templates so they’re easier to style.
8. Add in regular old IE conditionals to fix Internet Explorer bugs

Tip 1: Localhost Joomla Installation

Before you can modify and develop your template, you need to have a Joomla installation to work with. Using WAMP for windows or MAMP for Mac (I’ll be using WAMP for this example), we are going to create a simple Joomla installation hosted right on your computer so you can get started with template modifications.

First off, go to www.wampserver.com/en. On the home page click on “Download the latest release of Wampserver 2″.

Now click on the download link for either the 32-bit version or 64-bit version of WAMP (depending on which Windows version you have). If you don’t know which version you have, click on the start orb and type “dxdiag” into the search field. Inside the DirectX diagnostic tool it will tell you which version you’re running next to operating system. Download WAMP and run the .exe to install the program using the default directory of C:\wamp. It will also ask which browser you want to use for the default preview, but I never use this so just choose explorer.exe. We’re not going to be using SMTP or email so just leave those as the default values and then launch WAMP.

An icon will show up in the tray of your taskbar for WAMP and it should be orange. This means the localhost server is offline. To turn it online (so you can start working with it) left-click on the icon and select “Start All Services”. Then left-click on the icon again and select “Put Online”. This will start the localhost server on your machine.

Note: If you have things like Skype or Teamviewer running on your computer, this will prevent WAMP from going online so make sure you turn these programs off before you try to start the localhost.

Now that we have the localhost server set up, we can proceed to download the latest Joomla installation to work with. The latest version of Joomla currently is 1.7 but we’re going to be using Joomla 1.5 for this tutorial; it’s more stable and has the most extensions and templates available for it.

Go to www.joomla.org. Once there click on the “Download Joomla” button in the middle right of the page. Scroll down and look for the latest version of Joomla 1.5. At the time of this writing it is 1.5.23 and we want the full package, so click the link titled “ZIP” to download it. Now go to the C:\wamp\www directory and create a new folder called “joomla”. Copy the Joomla zip file you just downloaded into this folder and extract it with a tool like 7zip or WinRAR which are both available to download from download.com. This will extract the entire Joomla package into that directory and allow you to install it.

To install Joomla, go into your browser and type “localhost/joomla/installation”. If everything went well, it will show you the “Choose Language” page. Choose your language and click the “next” button in the top right corner. For the pre-installation check, you shouldn’t need to modify anything, so click “next”. Again, click “next” to accept the GNU public license.

Here comes the most important part of the installation: creating the database and user. We currently don’t have one set up yet so we’ll create that now.

To create the database and database user, we are going to use PHPmyadmin for WAMP. Left-click on the WAMP icon in your taskbar and select “PHYmyadmin” at the top of the popup. This will bring up PHPmyadmin in your browser. The first screen is where we’ll create the database for Joomla.

In the “Create New Database” field, type in the database name of your choice. Something like “template” will be sufficient. The database is now created and will show you that there are no tables currently in it. The next step is to create a user with all permissions so the database can be accessed by Joomla. Go to the “Privileges” tab at the top and click “Add new user”.

On this new screen, type in the username you want to use. I chose “template_user” as my username and “1234″ for my password. Obviously on a real server you would want to use something way more secure than this for your user and password, but for localhost it’s not very relevant. For the host field fill in “localhost”. Now underneath that, where it says database for user, the default should be the last radio button. If it isn’t click on the last radio button that says something like “Grant all privileges on database ‘template’”. Right underneath that, next to Global Privileges, click the link “Check All” and then click the “Go” button in the bottom right corner.

Below is an example showing what it should look like.

Now that your user and database are created, you can go back to your Joomla installation screen and put these items into the fields for the database: first off, database type is “mysql”, and then you type in “localhost” for the host name. Type in the username you created and the password. To finish it off type in the database name which was “template” and click next. On the FTP configuration screen just leave everything as is and click “next” without enabling the FTP file system layer.

The last screen is the Main Configuration for the installation. Type in your site name which I’m going to call “Template Tips”. Type in your email, your admin password (we can just use 1234 again for this example) and then confirm the admin password. When you are first starting out creating templates, I would recommend installing the sample data because it gives the site a “complete” feel when you’re trying to design, rather than starting out with a blank slate. If you didn’t install sample data, when you go to your Joomla site after we are done here it will be pretty much blank with no content at all to style with.

Note: Once you become more advanced with template modification, you won’t want to install sample data anymore. It will take more time for you to uninstall all of that dummy content than it will save you in helping visualize the way the template looks.

So click on the “Install Sample Data” button and then click the “next” button.

The last and final step for installing Joomla (I promise) is to remove the “installation” directory from the “joomla” folder you created in WAMP. Go to C:\wamp\joomla and delete the installation directory entirely. Now go to localhost/joomla and you’ll see that Joomla has been installed and we’re ready to go with installing the template we’re going to work with.

Tip 2: Choosing a Template Framework

Lately in Joomla template frameworks have been all the rave because they allow you to complete a template faster and a lot of the work has already been done on the template itself. Some of the most popular frameworks include the YooTheme Warp framework and the Rockettheme Gantry framework. Both of these frameworks were built from the ground up to remedy having to complete tedious repetitive tasks on each template and they also include great features like a built-in mobile template and backend features that allow you to change the way the template looks without even modifying anything using backend parameters. For the rest of these tips and examples, I will be using a YooTheme template that utilizes the Warp 6 framework.

Note: You have to buy a YooTheme template subscription to utilize a template on your site and modify it, but it is worth the extra money spent to save you lots of time in the long run.

Some framework and theme providers include:

• Themeforest
• YooTheme
• Rockettheme
• Joomlart
• Joomlashack
• Construct Unified

Feel free to look around each of their sites and see which templates you like the best and which framework will work better for you. Each template provider has their own standards that they have set up for their framework so it’s of personal taste and the feature list of which one you want to go with. Since I’ve chosen to go with YooTheme’s Warp 6 framework, I’ll start by installing a Warp 6 template on my localhost server.

After downloading the template, go to localhost/joomla/administrator. Type in “admin” for your username and “1234″ for the password to log into the backend. On the top bar hover over extensions and then click “Install/Uninstall”. On the upload package file field click “Browse” and find the template package that you downloaded to your computer. Now click the “Upload File amp; Install” button. Your template is now installed, but to actually activate it as the template you have to complete one more step.

Go to “Extensions” on the top bar of the Joomla backend and then click “Template Manager”. The template I installed is titled “yoo_nano” so look for your template in the list of templates and then click the radio button to the left of it. Then click the star icon which is the “Default” button in the top right corner. Now your new template is set as the one Joomla will use. Refresh your homepage and you should see the changes!

Tip 3: Styling Individual Pages

This is probably the most useful tip I’ve ever learned in Joomla, and it works by using the URL parameters in the browser address to specify styles for certain pages. First off, we have to insert the code that pulls the variables in from the URL. Below is the PHP code necessary to use the most common variables in Joomla, such as itemid, id, view, option, etc. Copy and paste the code below into the <head> of your document.

<?php
$itemid = (isset($_GET['Itemid'])) ? $_GET['Itemid'] : null;
$view = (isset($_GET['view'])) ? $_GET['view'] : null;
$catid = (isset($_GET['catid'])) ? $_GET['catid'] : null;
$task = (isset($_GET['task'])) ? $_GET['task'] : null;
$id = (isset($_GET['id'])) ? $_GET['id'] : null;
$option = (isset($_GET['option'])) ? $_GET['option'] : null;
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : null;
?>

Now, the second part of this is actually putting these variables to work as CSS classes on the <body> tag so you can take advantage of them. Copy and paste the code below into the class="" of the body element in your template.

cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>

The final result should look like this:

<body class="cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>">

Now let’s take a look at the URL parameters of our Joomla site. To get started, click on one of the links on the frontpage that goes to another page on the site. For instance, on my page I clicked on “Continue Reading” as shown below. Some of the links may be hardcoded so just look for a link that has the variables showing that isn’t search engine friendly.

Now if you look at the address bar of your browser you will see the parameters associated with this particular URL as shown here:

http://localhost/joomla/index.php?option=com_content&view=article&id=44:joomla-security-strike-team&catid=1:latest-news&Itemid=50

As you can see above, the option for this page is “com_content”. The view for this page is “article” and the itemid for this page is “50″. Itemid is in reference to which individual menu item this article is associated with. Remember, in Joomla everything has to have a menu itemid associated with it otherwise you can’t assign modules to it. So using this information from the URL, that information is now available to use through the variables that were created in the <head> of the document.

Let’s take a look at the page we’re on now. Below is a graphic showing which parts I want to modify exclusively for this page, and no others.

The easiest way to figure out where the CSS code is for these two elements is to use a developer tool like Firebug (for Firefox) or Webkit Developer tools (for Chrome). Using Firebug, I’m going to hover over these elements and look to see where the CSS is for each individual element.

As you can see, we are working with an H1 tag with the class of “title”. Let’s say we want to change this text color to red. Looking on the right side of the Firebug panel I can see that there are styles associated with this element in system.css, trebuchet.css, base.css, etc. You usually want to use the main template CSS for your template to make modifications like this so for this template it’s called layout.css. For your template it could be called something like template_css. or template.css or even base.css. Regardless of that, go into one of these CSS files by navigating to C:\wamp\joomla\templates\[template name]\css\layout.css. (This path could be different for your template). Once inside, scroll all the way to the bottom (to make sure it’s the most specific style in this file) and add some code like this.

.itemid-50 #system .title {
	color: red;
}

Save the CSS file and refresh the page. If you’ve done it correctly it should change the title on this page to red. If you navigate to another page though you’ll notice it hasn’t changed on the rest of them. If you were to just change this style globally it would affect the entire site. Below is what the outcome is of that style change:

To make the second change to the “Written by” text, I would just highlight the element with Firebug the same way, figure out what the name of it is and where it is being styled in the CSS files, and then use the PHP variables from the URL again to style it. So to style the “written by” only for this page, I’m going to make it larger and color it blue.

.itemid-50.view-article #system .meta {
	color: blue;
	font-size: 15px;
}

Notice above I used an interesting combination of both the $itemid variable and the $view variable. You can use CSS to concatenate two classes together to make it more specific. What this above code is saying is: The itemid must be 50 for this page and it must be the view of article otherwise this CSS doesn’t apply. It allows you target elements even more specifically.

Using the same idea but with PHP if statements instead: Using this same idea we can also run PHP if statements in the index.php or template.php of your site’s template to make changes based on these URL variables. For instance, let’s say we have a module position set up with a div class called “slideshow”. Here is an example:

	<div class="slideshow">
		here is my slideshow position
	</div>

I only want this slideshow to appear on the page with an itemid of 50 – nowhere else. This will even overwrite the settings you specify for the module in the backend where you tell it on which menu items you want it to appear. So to do this we wrap an if statement around the div block as shown below:

	<?php if($itemid == '50') : ?>
		<div class="slideshow">
			here is my slideshow position
		</div>
	<?php endif; ?>

Now this div will only show up on this page and will be removed from the code if we’re not on itemid 50. I use these techniques all the time with templates, and they are extremely handy, so I recommend getting very accustomed to using them.

Tip 4: Collapsing Module Positions

Using collapsible module positions in Joomla is pretty much a necessity unless you want positions to show up even for empty modules. For example, let’s say you have a module in the right column of your site in a div called “right_col”. On a certain page you don’t want the right column to show up if there is nothing in it. If you don’t have a collapse if statement around that particular module position, even if there is nothing enabled on that page for that position it will still show. You will end up with a blank right column with nothing in it.

To make sure the right column collapses when empty, you can either locate an existing module position or create your own. Different templates have varying ways of creating the count modules if statement (countModules is the collapsing if statement). For the Warp 6 template, it is written out like this:

//this is the warp 6 framework style of displaying a module position and wrapping a countModules if statement around it
<?php if ($this['modules']->count('breadcrumbs')) : ?>
	<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

But for other templates, it could be more simplistic like this: (the code below is the more common way of writing the countModules if statement)

//this is the warp 5 framework style of displaying a module position and wrapping a countModules if statement around it
<?php if($this->countModules('right')) : ?>
		<div class="right_column">
				<jdoc:include type="yoomodules" name="right" style="yoo" />
		</div>
<?php endif; ?>

Note: In order for the countModules to work, there must be a module position in between the if statement so it can see if anything is published in that position or not. So for instance, in the above code the countModules is looking to see if anything is published in the “right” position. If not, the entire div class right_column won’t be displayed. If there is something published in this position, it will show everything between the beginning of the if statement and the closing endif.

In essence, it’s a simple concept that allows your page to be more dynamic, so if you wanted varying pages to have different layouts this is what allows you to do that. Try combining the countModules if statement with the URL variable tips above to make the template even more flexible. Since Joomla is a content management system, the whole idea behind it is to be dynamic and flexible.

Tip 5: Logged in Styling

Let’s say you want to show a specific element on the page only if the user is logged in. This could be useful if you want people to register for your site before they can gain access to content. There are much more robust ways of using access controls in Joomla besides this, but as a quick way to change something based on if the user is logged in this tip works perfectly. Below is the code you will need:

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "<div id=\"members\">";}else{}
?>
<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "</div>";}else{}
?>

Both pieces of code are identical, except one opens the div id of members and then the second piece of code closes that div. What you do is take the first piece of code and put it right below your opening <body> tag. Take the second piece of code and put it right before your closing </body> tag. Save the page and refresh. Now if you go to your site, look at firebug and scroll through the DOM (document object module) in the left pane you’ll notice that the div id of “members” is now wrapping the entire site. This div will only show up if the person has logged in.

Let’s look at a simple example of what you could do with this code. Let’s say for some reason I want the header background color on my page different for registered users. This is very easy to do now since I can use the id #members to specify it.

#members #header {
	background:blue;
}

That is pretty much all there is to it. This could be useful for changing a background on a module, or other positions throughout your site (to reflect a promotion or whatever you can think of).

Tip 6: Module Class Suffixes

There may come a time when you’re developing a template where you want to make a specific module have look at feel that no others share. For instance, let’s say you have a forum posts module that somebody wants to sponsor and they would like their logo next to the module title saying “Powered by XYZ” or something to that effect. These are made possible by what are called module class suffixes. A module class suffix is an additional class added in through the backend parameters of the module itself. For example, let’s first take a look at how to add in a module class suffix.

Again, different frameworks work in various ways but in this case the way to add a module class suffix is by putting style-[whatever the suffix is going to be]. Other templates may just need -[the suffix name] without the style in front of it. I recommend looking at the documentation of your particular framework to clarify.

Go into the backend of the localhost Joomla install at localhost/joomla/administrator. Then navigate to the top bar, go to “Extensions” and then click on Module Manager. Find the specific module you want to work with, or even create a new one if you’d like. For this example I created a module called “Module Class Suffix” and put it in the right column of my template. Below is a graphic of what the page looks like:

Notice on the right hand side there is a field called “Module class suffix” and I put in style-water as my suffix since this is a Warp template. Apply these changes to the module and then go to the frontend. If you use firebug and hover over the module you’ve created, it should show that your class suffix is now a CSS class on the module itself.

You can now use this to style the module however you want and it will only affect this module (or any other that you assign this module class suffix to). Here is an example of code I used to create simple styling of this module:

.style-water h3.module-title {
	color: blue;
}
.style-water {
	background: #ecf9ff;
	padding: 10px;
}

And here’s a before and after screenshot of the changes:

If I don’t want this module to look like this anymore, I just remove the module class suffix from the parameter in the module manager and it goes back to default. Next we’ll look at how to modify the actual template of the module so you have better control of it’s output and styling.

Tip 7: Easier Module Templates

Module class suffixes are great for styling individual modules, but what happens when you want to change the actual template for the module? Whenever I make a template, one of the things I like to do is make the module easier to style by creating a div structure like this:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
		</div>
		<div class="module_middle">
		</div>
		<div class="module_bottom">
		</div>
		<div style="clear: both;"></div>
	</div>

This is so good to have as a module template because you can achieve a ton of different looks for a module just with these three divs. Slicing from Photoshop and converting it to the template is much easier this way. Take a look at the original module layout in the template I’m using:

We have an h3 tag, a paragraph tag, and that’s it. Can’t do much styling to this module with only these two elements, so in order to make it easier to style this we have to modify the actual module template itself. Again, this varies per template, but in general you’re looking for the same files – they might just be in different spots.

For this particular template I’m looking for these files:

1. [template name]\warp\layouts\modules\templates\default-1.php
2. [template name]\layouts\module.php

default-1.php is the actual module template file and module.php controls which module templates are associated with which positions. How did I know that default-1.php was the module template being used for the right column? By using module.php I can see which template is associated with the right column by this code:

// set default module types
if ($style == '') {
	if ($module->position == 'top-a') $style = 'line';
	if ($module->position == 'top-b') $style = 'line';
	if ($module->position == 'bottom-a') $style = 'line';
	if ($module->position == 'bottom-b') $style = 'line';
	if ($module->position == 'innertop') $style = 'line';
	if ($module->position == 'innerbottom') $style = 'line';
	if ($module->position == 'sidebar-a') $style = 'line';
	if ($module->position == 'sidebar-b') $style = 'line';
}

As you can see above, each module position has a $style associated with it. In this case they are all called “line”. For this template, the right column is actually called sidebar-a so I looked for sidebar-a and found out that the $style was equal to “line”. Scrolling further down this file I can see which module template is associated with the $style of “line”.

switch ($style) {
	case 'line':
		$template		= 'default-1';
		$style			= 'mod-'.$style;
		$style			.= ($color) ? ' mod-line-'.$color : '';
		$split_color	= 1;
		$subtitle		= 1;
		$title_template = '<h3 class="module-title">%s</h3>';
		break;
	case 'dropdown':
		$template		= 'dropdown';
		$subtitle		= 1;
		break;
	case 'raw':
		$template		= 'raw';
		break;
	default:
		$template		= 'default-1';
		$style			= $suffix;
		$title_template = '<h3 class="module-title">%s</h3>';
}

In this switch case you can see that the case ‘line’ has the $template of “default-1″. The default module style for all positions is default-1 as well, unless specified otherwise. Now that I know which module template is associated with this module position, I can edit it to my needs.

Opening up default-1.php now, we can see the code looks like this:

<div class="module <?php echo $style; ?> deepest">
	<?php echo $badge; ?>
	<?php if ($showtitle) echo $title; ?>
	<?php echo $content; ?>
</div>

As you can see, it’s pretty plain. Not a lot of divs in there to style with. We want to add in the divs I showed you above to make this module easier to control. Change the code above to look like this:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
			<?php if ($showtitle) echo $title; ?>
		</div>
		<div class="module_middle">
			<?php echo $content; ?>
		</div>
		<div class="module_bottom">
		</div>
		<div style="clear: both;"></div>
	</div>

I got rid of the badge because I didn’t want it to show up in my module template, but you could keep it if you want. The badge is just a styling the Warp templates have associated with module class suffixes. Now that we have this layout in place, it is much easier to style the module. Below is an example of more flexibility:

And here is the code to achieve this style (I know these are really ugly color combinations, but they’re used for illustration purposes:

.style-water {
	background: #ecf9ff;
	padding: 10px;
}
.style-water .module_header {
	font-size: 18px;
	font-weight: bold;
	background: blue;
	color: white;
	padding: 10px;
}
.style-water .module_header h3 {
	margin: 0;
}
.style-water .module_middle {
	background: white;
	padding: 10px;
}
.style-water .module_bottom {
	height: 15px;
	background: red;
}

Tip 8: Fixing Internet Explorer Bugs

We all know that Internet Explorer is the bane of our existence, so I can’t complete this tutorial without including the basic IE conditionals that allow you to style elements on the page based on which version of IE you’re targeting. This is not a Joomla-specific tip, but I’m going to show you how to apply it in Joomla.

Note: This method is for quick fixes and shouldn’t be used to fix all IE bugs. If you have a lot of bugs that need to be fixed, you should use an IE-only stylesheet that only loads when people are using that particular browser.

It’s pretty simple to include these conditionals into your Joomla template. Leveraging the way content management systems work, you can just place the conditionals in your main template file and it will work site-wide which saves a lot of time. Below is an example of the IE conditionals:

<!--[if IE 7]>
            <div id="ie7">
<![endif]-->
<!--[if IE 7]>
            </div>
<![endif]-->

As you can see above, I’m targeting Internet Explorer 7 with these conditionals. You could also easily target other IE versions just by changing the 7 to a 6 or an 8. Put the first conditional right below your opening <body> tag and then put the second conditional right above the closing </body> tag just like we did with the member logged in conditional we used earlier. Now using CSS you can make small changes to fix bugs on your site. Let’s say you have a search bar and the text is too high in IE7. If you changed the CSS for the element directly it would affect every browser that was rendering it properly and mess those up instead. The better way is to write the css like this:

#ie7 .searchbar {
	line-height: 20px;
}

Now I’m using a specific selector that is wrapping the entire webpage to target only the bug in Internet Explorer 7 and it won’t affect the other more modern browsers that rendered it properly to begin with. Again, I wouldn’t fix every single bug for IE this way because you’ll bloat the main style sheet for the site. For quick fixes it’s an easy way to get the job done.

Conclusion

That’s it for these quick tips on Joomla templates! I hope these tips will be of good use with your adventures in Joomla template design and make it easier for you to customize your website. Thanks for reading.