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.
#all
{
margin: 0 auto;
max-width:1280px;
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.
#footer-inner
{
max-width:1255px;
margin:0 auto;
font-size:0.8em;
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
#footer
{
padding:15px 10px 15px 20px;
text-align:right;
margin:0 auto;
display:block;
max-width:1250px;
overflow:hidden
}
Below is the screenshot of my template:
Your comments, questions and clarifications are welcome!