In this tutorial we will show you how to set up Joomla(2.5 or 3.0 and up) in Dreamweaver CS6 so that you may edit the CSS of your layout while still making good use of Dreamweaver’s great productivity tools. One warning before we proceed though, Whilst working with Joomla in Dreamweaver CS6 do not edit any of the core Joomla files. This goes for all of Joomla’s PHP and CSS files. Only work with the CSS files directly assosciated with the template you are working on. If it isn’t a CSS file you should probably not be using Dreamweaver for this task. If you touch anything else the risks of you breaking something are significant.
Dreamweaver CS6: How to edit Joomla Templates with Dreamweaver.
First thing we need to have a few things ready before we begin.
- We must have XAMPP installed and running.
- We must have Joomla already installed and running including our databases set up.
- We must have our template that we wish to work on ready to go.
As the purpose of this article is not to show you how to do these but rather how to set Joomla up in Dreamweaver CS6 I will leave you to set these things up. Make sure that while in Joomla you set the template you wish to work on as your default template. Also have XAMPP switched on and running.
Step One: Open Dreamweaver CS6 and select Site >> New Site. On the window that comes up to establish our new site we need to give our site a name then for local site folder we need to navigate to the folder that holds our Joomla site. This is usually the htdocs folder or a folder within it if you develop multiple sites.
Step Two: Now on the left hand side of the site set up window click on servers then hit the add new server button. It should look like a plus symbol at the bottom of the server list (which should be blank at the moment).
In the basic server information area we need to give the server a name. Call it localhost and then set connect using to local/network. For the folder you need to set this the same as the folder you declared in step one of this tutorial. Now we need to set the Web url. If your folder you just declared is the htdocs folder you need to put simply http://localhost/ in here. If your folder is inside that folder you need to add the name of that folder onto the end of it. In my example I am doing the folder is joomla_1 so I need to put http://localhost/joomla_1
Step Three: Now click on Advanced server options. Down the bottom where it says Testing Server change the Server model setting to PHP/MySQL and then hit Save.
Step Four: You now need to change the server type from remote to testing and hit save. Then wait for Dreamweaver to set up all the files in its system.
Once that is completed you will see that all the files related to Joomla now appear in your files palette. Common sense would probably be telling you that you need to open the index.php file in your templates folder. THIS IS INCORRECT. You need to open index.php in the root directory of your site. At no stage should you be opening any other file. If you do you run the risk of breaking your Joomla site.
So open index.php in your root directory and click go into Design View and go into Live View mode. Up the top you should see a flashing message from Dreamweaver asking if you would like to discover dynamically related files. Click on discover then ok when the little window appears and then let Dreamweaver do its stuff.
Up top of the open file window next to all the related files across the top of your workspace is a little button that looks like a funnel called the Filter Related files button. Click on it and turn off php and javascript files. Now you should only have CSS files listed across the top of your work area.
Now from here on in only modify the CSS files relating to your Template. You should have knocked up the basic template already and have a rough idea what files there are. If you are not sure do not touch them, you don’t want to be breaking it.
Hope you all found this tutorial helpful and hope to see you again soon.
