Learn How to Change the Width of a Joomla Template

Many times as a Joomla developer you will encounter what seems like a very simple problem but actually it is not as easy as you may have originally thought. As an example, changing the default width of a template for your Joomla site seems simple enough, but where do you begin?

Most quality templates come with the ability to alter the width of the template as well as the width of any side columns. When you see the total width of the template, you should be aware that this includes the width of any side columns included in the template. Thus, if a template says its width is 962 pixels and the left and right columns are 210 pixels each, the middle column will be 542 pixels wide.

In this article, I will explain how to change the total width of a Joomla template as well as how to change the width of any side columns that may be in the template. In creating this article, I have assumed that you have a current version of Joomla installed and you are familiar with the administrator area.

The first step is to access the back end administration area of your Joomla site and go to the "Extensions" menu then choose "Template Manager". Next, choose your default template and either click on its name or click on the box next to its name and then click on "Edit".

You will want to make a note of the original width of the template and any side columns as they are before you make any changes in case you wish to revert back to the original settings. To change one of the columns, look for the column in the "parameters" area, make your change and click "Apply" and then view the change in the front end to see if you achieved the desired affect. If you wish to change another column, just repeat the previous procedure on the next column.

If you want to keep the side columns the same width, but want to change the overall width of the template, just change the template width parameter only. This will only change the center column width leaving any others as they were originally. When you are satisfied with the new width, click on "Save" and then go to the front end of your site, hit refresh, and view the results. Note: not all template developers offer these parameters, however any quality template should have them included in the administrator area.