Blogs - The Conticreative Joomla Blog

Designing CSS layouts for Joomla with Dreamweaver

Written by Marco Conti Friday, 03 November 2006 12:35

Many web designers are used to and like to use Macromedia Dreamweaver (DW) to work on their HTML and CSS. The latter in particular is very well supported in DW8 and it allows for very visual work on CSS files.

However, because of the way Joomla templates are structured it is often impossible, or at least unpractical, to work on a Joomla template from within DW in any satisfactory fashion.

I think I might have found a workable solution that with some adjustment allows a designer to customize a Joomla template in fine detail.

First of all, we have to distinguish between the actual index.php file and the related CSS (template_css.css). The reason working on the index.php file is difficult in DW is that, aside from the simplest of table based layout, the index.php file must contain some conditional statement of some sort to accommodate more advanced Joomla features and it's completely devoid of any content, even in menus and such . That makes the graphical rendering of the page a nightmare and even just working on the CSS a frustrating process.

The solution I have found is simple and requires the designer to have already a very basic template to work from. There are some great free templates from Joomlart.com that will serve the purpose just fine. I love the Joomlart.com templates and I think they are among some of the best on the web, bar none. Plus they are very easily configurable.

Before I explain the workflow there is a bit of preliminary setup that will help down the road:

Install Firefox 2.x with the developer extension. This alone can give you a very good editing environment (which I'll touch in a future article), but for the DW designer is often not very intuitive and requires knowing CSS syntax intimately.
Set the "View Source" in Firefox to display the code in Dreamweaver. Not completely necessary, but very fast.
Create a new Dreamweaver Site in a local folder. The site should be connected via ftp to the actual directory where your Joomla installation files reside.
Replicate the "include/templates/yourTemplate" Directory structure in the DW site by downloading the complete template filesystem on your drive.

Once we have the template in the DW site we are ready to begin:

Hit "View Source" in Firefox (or "view source with..." depending on what plug in you are using) and save the template in the local site. I prefer to use the CSS folder but any will do.
Go into the DW CSS panel and delete the references to the CSS files. They won't work because the Joomla code is not direct to those files.
Instead reattach the CSS files by clicking on the "Attach CSS" in the lower part of the CSS pane. If you have saved the html of the template in the CSS folder it should be fairly easy.
Once the CSS is attached, the page should reacquire the layout and colors.
Alternately, the link to the CSS can easily be changed in the <head> code manually either way works.

At this point, if the site is configured properly, working on the CSS in the usual DW manner should produce the desired results on the page of changing and adjusting the layout.

Back up the original CSS file on the server and upload the local one to see the results on the site, continuing to adjust the code for the desired effect.

Clearly, a strong and flexible CSS based layout is important for this process to work well. Table based layouts are inflexible and would require constant back and forth between the CSS and the index.php file.

This method can also be employed, with care, to make changes to the original index.php file. If index.php has well marked comments at the beginning and end of each element, such as container DIVs, they can be easily recognized and the changes performed on the HTML file to test the output and then on the index.php file.

I hope this short tutorial will be helpful and I will edit it in the future with more detailed information and more step by step instructions. For the moment it should help anyone even passingly familiar with DW and Joomla. If there are requests I will make it more detailed.

One important note on Dreamweaver: version 8 has some very nice CSS editing features that make work such as choosing colors and adjusting margins very easy. However, DW visual rendering of some CSS that shows up perfectly on the major browsers is atrocious, often distorting the original page beyond recognition. I find that even with these limitations working with DW speeds up my design work, but I wish there was a better visual editor that represented CSS layouts with more fidelity.

I have been trying the Beta version of the new Microsoft offering Expression, and I found that it renders pages with much more accuracy. While itr is very similar to DW (in the usual Microsoft fashion of stealing rather than inventing) I am not yet so used to it and it still has some Frontpage like features when it comes to the UI.

The ideal solution would be a Firefox plugin that allowed for more visual CSS editing, or that had some sort of advanced menu system for inserting the more difficult to remember CSS tags. Currently, it works quite well but, as mentioned earlier, it requires an encyclopedic knowledge of CSS that many designers lack. I will keep you posted.

Good luck

Marco