For my present requirement, I need to increase the template width, which also mean that the width of the footer(the Joomla support boxes, and the footer itself) have to be increased.


a) increase template width: just one setting in Beez20 gets this done. The default width(max-width) is 1050px and is found in position.css, in the all-div starting from line#32. Below is my new width: copy and paste this code into override.css file.

    margin: 0 auto;
    padding: 0px;
    text-align: left;

Note: I only modified max-width.

b)  increase footer-boxes width: one of which is shown below:


The inner-boxes(contribute, books and shop) are contained in an “inner footer” div. Their original / combined width is 1025px(line#412-418 in position.css). Below is the new width with respect to the above-modified page-width. Copy and paste below code into override.css.

   margin:0 auto;
   padding:10px 15px 15px 10px;

Note: I only modified max-width. You might have to do some trial and error to make sure the footer width matches your own template width, if different from mine.

c) Increase footer width: the footer itself (visible if footer module is published) is the horizontal column containing copyright information and Powered by Joomla.


The original width of this area is 1020px(line#1406-1414 in layout.css). I modified it to 1250px considering the inner footer width.

Copy and paste this into override.css

        padding:15px 10px 15px 20px;
        margin:0 auto;

Below is the screenshot of my template:



Your comments, questions and clarifications are welcome!

Add comment

Security code