The Protostar template has default settings for its layout. There is the center column for the content and a column set up on the left and the right. If modules are placed into position-7 and position-8 then the ratio is 3:6:3. If only one of the side columns has modules, the ratio becomes 9:3 which is the same as 3:1. 

What if you want the right column to be wider and you NEVER plan to use the left column?

Protostar template layout with 2:1 ratio for columns

We are approaching this situation with the idea that this template will NEVER use position-8. We are going to remove position-8 as a possibility, so that it can not be selected in Module Manager and no modules can be assigned to this position which could break the layout.

This can be accomplished with a few small edits to index.php and templateDetails.xml in the protostar directory under templates. Always make a safety backup of these files before editing the original.

Open up the templateDetails.xml file and remove the line:

<position>position-8</position>

This will make it so there is no position-8 available in the dropdown list of positions in Module Manager. If there is already a module assigned to that position, it will not appear on the site until it is reassigned to another position.

Now, we will edit the Bootstrap 2 span designations for the content area and the #aside column.

Open up index.php in a text editor.

Look for this group of lines in the <?php..?> section and remove them:

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

Now add the following lines:

// Adjusting content width
if ($this->countModules('position-7'))
{
$span = "span8";
}
else
{
$span = "span12";
}

What we just did was make it so if there is a module assigned to position-7, the content area become more narrow and takes up 8/12 or 2/3rds of the page.

Also in the index.php we need to change the span class for position-7 from span3 to to span4. This means that if position-7 is used by a module it will take up 4/12 or 1/3rd of the page. With Protostar, position-7 is placed into <div id="aside">.

Look for the following line:

<div id="aside" class="span3">

and change it to

<div id="aside" class="span4">

Because we used the span classes that are already set up to be responsive, this layout will work if the screen becomes narrower. The modules in position-7 will stack below the content area for narrow screens.

Add comment lines to these edits

When you run the update for your Joomla installation, the index.php and templateDetails.xml could be written over and you will lose these edits.

You should always create a backup of your folders, files and database before running a upgrade to Joomla.

If you add comments to these changes, it makes it easier to replace these lines in the new index.php and templateDetails.xml. You could also keep a log of all the changes you made.

You also have the choice of making a copy of your Protostar template in Template Manager. Click on Protostar in the template column in Template Manager. There is a button that reads Copy Template. This will make a duplicate copy of  the template files and folders. Rename this copy to something other than Protostar. When you upgrade, this template will not be written over.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.