Monday, 30 July 2012

Creating a Joomla Template

So, I've made a few websites in Joomla now, but I've only been able to 'cobble' them together either by editing existing templates, or by deleting content from a traditional website I've made and putting the right code it.

This second way is close enough to the real thing. I've found this nice tutorial on how to do it for Joomla 1.5. But it's not too different from the latest version (2.5).

I think the easiest way is to have your own machine setup as a webserver (see this blog on setting that up) and editing the files locally, and easily seeing what Joomla makes of it by viewing the pages through the web browser.

On top of this I found this youtube video explaining how you can setup dreamweaver to interact with the website locally so you can edit all files in dreamweaver. To do it:

  1. Set up a new site in Dreamweaver
  2. edit the local folder to that of the joomla site
  3. in server enter the web URL which you need to type in the browser to access the site
  4. Make sure you tick the "testing" box

Here are some screenshots:
locate the local root folder for that particular joomla website

enter the weburl that the computer has to go to view the website

Make sure to tick the "testing" box.
If you havent got a new template in the joomla site yet, just create the folder within the templates folder, make index.php and templateDetails.xml files (found tutorial here), then go to extensions > extension Manager > Discover > press Discover button. If you're templateDetails.xml file is the correct format then you should see it in the list. Tick and click install.

To edit a template:

  1. load up its "index.php" in it's own template folder
  2. click "live view"
  3. click yes to the dialogue box
  4. you will need to change the address of the viewing page to the root of the joomla site. i.e. you are editing the main template, which changes the whole site. So you view the website like normal
I did have a few problems refreshing whatever changes I'd made. The simplist was to just go to File > Save All, which would then work.

No comments:

Post a Comment