How to Edit Joomla Templates in Dreamweaver: A Beginner's Tutorial

How to Edit Joomla Templates in Dreamweaver: A Beginner's Tutorial
Page content

Modifying a Joomla Template

Being a traditional web designer used to hard coding HTML/XHTML and CSS, my first question was how to edit Joomla Templates in Dreamweaver. In this guide, we’ll look at three different methods that can be used.

Basic Steps: (Use of CSS and Image Files)

But before we get into that, we should first establish the basics of editing a Joomla template. Firstly, most of the work in modifying a Joomla template focuses on changing the CSS and image files, and not the HTML and PHP files. Secondly, any text editor or integrated design environment (IDE) can be used to edit the Joomla template or core files. Thirdly, familiarizing yourself with the file names and directory structure of your Joomla website, or any website for that matter, helps greatly in the rapid development and deployment of a web project.

The Use of Dreamweaver

After establishing the fundamental concepts of modifying a Joomla template in the conventional method, let us now discuss incorporating it with Dreamweaver. There are many ways to approach this; one is to use Dreamweaver as a text editor, however you will not be able to see the results until you have configured the web server for Joomla and uploaded the edited templates to view online.

The Use Od Dreamweaver

What Else Do You Need?

The second method is to set up your computer to run as a web server with Dreamweaver as editor and use a standard compliant web browser to view the changes.

You’ll need to have PHP, Apache and MySQL to emulate the server environment. You should be able to download and use a single executable package (known as a WAMP package) to do this – more is explained in Bright Hub’s WAMP Installation Guide.

Next, you’ll need to have Joomla installed and configured to run locally on this server. Then, have your Joomla website set up to be viewable and editable in Dreamweaver. These methods are important as you process the method on how to edit Joomla templates in Dreamweaver.

This second method is a bit more complex but would prove invaluable in the long run. Not only will it make the development easier by allowing the web designer to view the resulting template instantaneously, but also allow for rapid deployment if the proper directory structure and file naming was followed correctly. However, there is an easier way described below.


Final Method on How To Edit JoomlaTemplates in Dreamweaver

The third method is to use the Dreamweaver Joomla Template Extension kit, downloadable for a fee from the design tools page of the official Joomla website. This has a built-in wizard that will guide you in modifying your Joomla template in Dreamweaver, making a new template for Joomla or converting an existing template to a Joomla template.

You’re all set:

Now after you have chosen from the three methods stated above, you are now ready to open the files in Dreamweaver and start editing. However, if you are expecting to see your Joomla template in Design View of Dreamweaver, then let me disabuse you of that notion. Dreamweaver is currently not capable of displaying the output of Joomla, or any CMS template. It can only be used to edit the HTML/XHTML, CSS and PHP code of your Joomla templates in Code View. Results are still able to be viewed, however, using a standard compliant web browser. Just “preview” your site after making changes.