Two Column Responsive Template

To edit the Protostar template to have two equal columns in the main area you can edit the index.php file to make this happen.

You will edit the index.php so that the span class is changed for the content area and the right column and remove the left column. This will allow the two remaining columns to be responsive and stack on top of each other when the site is viewed on a small screen.

We will also remove the unused module position that creates the third column so that it is not accidently selected and then breaks the layout.

This article will walk you through the steps of editing the template so the content area is on the left and <div id="aside"> is on the right. Each area will take up 50% of the width of the container for wider screens. You will no longer be able to assign modules to position-8.

Edit the index.php and templateDetails.xml for Protostar

Always make a safety backup of the index.php file before editing the original. This file is located in Joomla installation at templates/protostar/index.php. If you renamed your Protostar template, look in the new template folder for these files.

Keep in mind that if you did not choose to rename the Protostar template and take the proper steps to do so through Template Manager, these edits will be overwritten if you upgrade Joomla. Take notes about what edits you have made and add comment lines to the edits in the index.php file.

Open up index.php in a text editor.

Look for the line that reads:

// Adjusting content width

This is somewhere around line 48 up in the PHP section of the file.

There are several PHP if elseif statements below this line. What these lines do is test if modules have been assigned to position-8 and or position-7 and adjust the span class for the content area accordingly. The variable $span holds the information for the span class and is used later on in the <html> portion of the document.

Since this template will no longer use position-8, we will remove it from these statements. 

Replace the if elseif statements with the following lines: 

// Adjusting content width
/* CUSTOM EDITS */
if ($this->countModules('position-7'))
{
    $span = "span6";
} else
{
    $span = "span12";
}
/* END CUSTOM EDITS */

with these new if else statements, if no module is assigned to position-7, the content area will take up the entire width of the screen.

Now we need to remove the portion that would make a column for position-8 and change the span class for position-7 down in the <html> portion.

Scroll down in the document to the following lines and delete them from the file:

<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>
<!-- End Sidebar -->
<?php endif; ?>

Be careful to remove all the lines shown above and no more.

Scroll down farther to the line that reads:

<?php if ($this->countModules('position-7')) : ?>

In the next line down change it to read:

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

Save the index.php file and upload it to your files on the server if necessary.

Now in a text editor open up templateDetails.xml in your template's directory.

Remove the line that reads:

<position>position-8</position>

We are removing this line so that this position is no longer available in the dropdown list of positions in Module Manager.

Launch your Joomla 3+ site on the front end. If you have a module assigned to position-7, then it should be taking up the right half of the screen and the content should be taking up the left half. Reduce the size of the monitor and you should see that the content area stacks above the other area.

If there were modules already assigned to position-8, you will need to change the position for those modules, or they will not appear on the site.

 


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.