JoomlaTemplates.me by HostMonster Reviews

Joomla Beez20 tutorial-5: increase template and footer widths

Published: Thursday, 20 September 2012

joomla-Tutorial1

 

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:

image

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.

image

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:

image

 

Your comments, questions and clarifications are welcome!

Add comment


Security code
Refresh