Editing Joomla Templates and Components

b_server02This following entry is designed for intermediate to advanced website designers and developers, therefore is not an extremely intricately detailed step by step tutorial, and will require a certain level of experience to understand. Before any attempts are made to edit your template, make sure to back up your site or individual files first. I use a combination of firebug (an add-on for Mozilla Firefox), Adobe Dreamweaver (website code editor) and cpanel. I will explain my process though I am sure that there are variations within each process.

My initial process is setting up the website through Joomla. This is very important and results in the core design of your cms website. Once setup, I then address the elements that need adjusting that could not be made within Joomla’s backend interface e.g editing DOCman’s layout from the example of my last post. These edits need to be made to the files within the Joomla site, though first you must find the correct file to edit.

This is where Firefox’s Firebug is used. Open firebug within the screen you want to edit and use the pointer tool to find the correct div to edit. For instance, I discovered the DOCman section that I needed to edit was located within the div class titled ‘com_docman’. I then opened Dreamweaver to search through my offline version of the site. I created this earlier by downloading the Joomla site through cpanel, and then opened it within dreamweaver.

Having an offline version of the site allows you to search for keywords like com_docman and will locate all the files which relate to that search. It will also tell you the directory location e.g > com_docman > views > documents > tmpl > list.php. Once you have found the file you need to edit, locate it within your cpanel, download it to ensure you have a working backup, then use the code editor to manipulate the code. This can be a process of trial and error to find exactly which lines of code controls what… So yeah, hope that helps!

Download Mozilla Firefox’s firebug add-on here: Firebug add-on

Thanks for visiting Moon Cube Design

* Update September 30, 2104

The next edit I needed to do with docman was the actual headers stating ‘Documents’. It was displaying far too large in comparison with other headers on the site. Using Firebug and my offline version of the site in Dreamweaver, I discovered the css file I needed to change was located in media > com_docman > bootstrap > css > bootstrap.css. I then edited the h1 and h3 classes to the size that I needed. Any questions feel free to leave a comment below