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 – Conticreative
This article is also available on conticreative.com
conticreative 
Thanks Marco
Needed to know a simplier way to style with Joomla and found it! spent years using and loving Dreamweaver.
Nice One!
When building Joomla templates, a good place to start is with a compliant CSS layout. I use an extension in DW that makes creating CSS layouts way easy. You can read about it at http://webrehash.com/css-sculptor.html
I make a commercial web extension for Dreamweaver and Joomla.
I have a free manual available for Joomla Template Kit but the extension is commercial you check it out.
http://www.joomlatemplatekit.com/articles-products-the-joomla-template-kit-dreamweaver-joomla-template-kit-1.html
CHECK it out
http://www.forexoptical.com
how to edit e107 cms with Dreamweaver ?
Not bad ;-)
I have used a very similar workflow to edit E107, magento, and other scripts. I am actually writing a book about it because each time I tried to expand on the method I use I found there was a lot of other stuff I had to explain in order for it to work.
The basic idea is to reduce the dynamic pages to static pages linked to the local CSS files. So it can work with any dynamic script.
If you’d like to read the book, write Packt Publishing and ask them for a book on Joomla-Dreamweaver. They are evaluating it now.
One more note: My present workflow for designing with Joomla template and pretty much every otehr dynamic script similar to Joomla is far more advanced than the one I wrote about here. With some Firefox plugins and some slightly different settings the process is far faster and you can even have the “sucked” page work live inside Dreamweaver CS4 in case you want to troubleshoot things like Javascript and drop down menus.
Hopefully, Packt Publishing will accept my book, in which case I’ll be happy to send a free PDF copy to everyone that commented on this blog article so far. Just to thank you.
If Packt refuses the book, I will self publish and I’ll offer the book at cost to anyone here that asks. (I’ll publish it with Lulu probably)
So is your book about joomla and virtuemart and dreamweaver or just joomla/dreamweaver . And I would like more info on your book.
Thanks
Hi. your article is quite interesting. I first started experimenting with using DW to edit CMSs with XOOPS about 5 yrs ago but dropped it (& CMSs in general) ‘cos XOOPS was 2 unstable @ d time 4 the project I rrquired it for. I discovered Joomla last year but just recently thought of using DW to edit it’s templates. Hence the google search which led me to your article. I’ll be glad if the peblishers agree to publish it. I believe it can help a lot of web developers out there. Good luck.
not bad..
sometimes, in my site (joomla), we need css to modify the layout..
There must be a video tutorial for creating a plain css for any template (e.g. bee or rhuk_milkyway). It would help a lot.
You can find the Dreamweaver Joomla Template Kit.
At http://dumbitdown.com we have changed address.
New version for Joomla 1.6 is coming out soon.
Best Regards,
Brian Diaz
Joomla Template Developer
Hey. V dreamweaver sem naredil prvo stran za joomlo. Zanima me kako jo lahko uporabim v joomli. V katero mapo moram prekopirati in kako točno moram shraniti oziroma izvoziti. Za odgovor se že v naprej zahvaljujem.
Greetings
Hey. In Dreamweaver, I did the first page of Joomla. I wonder how I can use in Joomla. In which folder do I copy and how exactly do I save or export. To respond, thank you in advance.
Greetings
If some one needs to be updated with most up-to-date technologies after that he must
be go to see this site and be up to date daily.
Hello excellent website! Does running a blog such as this take a great
deal of work? I have absolutely no knowledge of programming
however I was hoping to start my own blog in the near future.
Anyhow, should you have any ideas or techniques for new blog owners please share.
I know this is off subject but I just had to ask. Cheers!
Hi there, after reading this awesome article i am too happy to share my knowledge here with friends.
Hello! Do you know if they make any plugins to assist with SEO?
I’m trying to get my blog to rank for some targeted keywords but I’m not seeing
very good gains. If you know of any please share. Many thanks!