Blogs - The Conticreative Joomla Blog

How to edit a Joomla template with Firefox

Written by Marco Conti Sunday, 29 October 2006 18:36

When I first discovered Joomla! when it was still Mambo, my first question was: "How the heck am I going to edit the template?"

I think this is pretty much the first question any traditional web designer has when they first try to work with a CMS. It's natural. We are used to a Top down style of designing the page and then inserting the content, Joomla is the opposite. The content is there, but the design, even the excellently designed Ruck Solarflare, is the first thing we must change if we want to make an original website.

I came up with two distinctive systems for dealing with Joomla templates, one uses the excellent Firefox Web Developer plug in and the other is a more traditional approach using Macromedia Dreamweaver as a css editor. Both assume that the web designer reading this article is interested in having some sort of visual feedback when editing CSS files.

This article is about using Firefox and how it can be edit many aspects of a Joomla template. Using the Firefox Web Developer extension is, to me, a bit more laborious and confusing than using Dreamweaver, but it is more immediate and less convoluted at times. Let's get going.

First you'll need to install Firefox if you don't have it. At the time of this writing version 2 has just been released. There is a "Developer Version" of Firefox available here. Next, if your Firefox version doesn't come with the developer plug-in you should download it here.

A Joomla template is usually made up, at the very least, of a Folder containing an index.php file, a css file inside the css folder called template_css.css, a XML file and an images folder. If the template has any js files or any additional css file they will be respectively in the script and the css folders.

As much as possible, Joomla templates try to separate the content from the presentation and use DIVs and CSS files. Since Joomla pages are created dynamically and they don't "exist" as separate HTML pages using css for style is a necessity, not a choice. Nevertheless, many Joomla templates use a fair amount of tables in the layout and Joomla itself uses quite a bit in the generation of the page elements.

Most of the changes in a Joomla template can be done using the css file. Because of the way that Joomla works, the index.php file, in its raw format before is processed by Joomla may look quite messy and often template designers use a fair amount of conditional PHP code to allow Joomla to place page elements in a certain position. This is not a difficult proposition as the following example illustrates.

<?php if ( mosCountModules ('banner') ) { ?> <div class="classname"> Content or PHP module call</div> <?php } ?> <div class="classname2"> Content2 </div>

What this says in essence is: IF (the module is present in this position) THEN (display this <div> here) ELSE (Display this content)

A good Joomla template, such as the ones offered by Joomlart.com, will have many conditional statements as well as several Javascript elements to facilitate the use of CSS menus and other features. They will also use CSS to style most of the containing <div> and other XHTML elements making the developer's plug in in Firefox an ideal tool for CSS styling.

Once the plug in is active, load the home page of your site (or any other page you want to work on and got to Tools > Web Developer > CSS > Edit CSS (Ctrl-Shift-E) and the CSS file(s) for the web page will display in the left column.

A Joomla template can have multiple CSS files attached to it, but the main file is template_css.css. In the edit CSS column of Firefox each CSS file has it's own tab allowing you to edit any file you wish.

Any changes to the CSS file are immediately reflected in the actual window, making the process very fluid and natural. An intimate knowledge of CSS syntax is necessary, since there aren't yet any advanced tools such as the ones offered by Macromedia Dreamweaver or other CSS editing tools. Every change has to be made by hand, including Hex color values. One other drawback, one that hopefully will change in the future, is the lack of any color coding of the syntax.

Any change made in the CSS file is limited to the local copy of the page, and until the CSS file is saved, going to a new page in the site may clear any change made so far. It is easy to click on a link by mistake and lose an entire session. The CSS file should be saved often as a precaution.

While this is a very nice way to edit the CSS file of your Joomla site, it has its drawbacks: It is hard to find the tag both on the page and in the CSS file. For this, the developer plug-in can come to the rescue once again. There are several tools that help greatly in identifying the various HTML elements in the page. Under the Information menu (Tools > Web Developer > Information) there are a number of useful tools such as:

Display Block Size
Display Element Information
Display ID and Class details
and more.

These are invaluable in identifying the block elements. Finding them in the CSS file is another story and again this is the weaker point of this system.

UPDATE: Since I wrote this article, the Developer toolbar hs been updated with various new features. One of the most important and useful is the search feature. Now instead of having to look over the entire CSS file it's easy to just search for the ID or Class name.

Ultimately, we will want to save these changes to our Joomla Website, we can do that easily by simply uploading the CSS file on the server. The changes should reflect nicely and the file can be edited again and again.

Firefox has a number of plug-ins, beside the Web Developer toolbar that are useful for working with Joomla. There is a competent FTP plug-in, called FIRE FTP, DOM Inspector, a variety of CSS editors, notable among which is CSSViewer (it shows an element attributes by mouse over), X-Ray , a useful extension that tags every page element right in the browser window and other plug-ins that perform similar functions to the Web Developer Plug-in but with subtle differences that in same cases may be useful. One Plug-in I find very useful in conjunction with the WDT is Firebug . It is 2.0 compliant and it shows a hierarchical view of the page structure with collapsible elements in a pane below the main window. In version 1.5 there were more useful plug-ins I used, but some of them are not compatible any longer. As they are upgraded I will list them in this article.

With the launch of IE7, Microsoft is hoping to recapture the loyalties of developers by bundling their very own Web Developer Toolbar. While this effort is laudable, their version is weaker than the combined Firefox offerings. It does have a very nice DOM inspector built in, but as in Firefox the workflow for actually making your edits is not immediately apparent. I haven't been using it long enough to give it a fair critique but I'll make sure to devote a future article on the subject.

I hope you found this article useful and that you'll let me know how I can improve it.

Happy coding.

Set as favorite

Bookmark

Email this