Illustration showing a double right column

If you wish to have two columns side by side on the right side of you page, you can edit the index.php to move position-8 over to the right sitting next to position-7.

As always, make a backup of your site files before making any edits to the original files.

Refer to this article to understand more about adding a new module position:

How to add a new position to the Protostar Template

Edit the templateDetails.xml to add the module name for the double wide module

Open templateDetails.xml in a text editor. Add the following within the <positions> section:

<positions>
    <position>doublerightcoltop</position>
    ...
</positions>

You must add this position name in order for it to show up in the list of possible positions in Module Manager.

Edit the index.php to create two columns on the right

Open the index.php from your Protostar template's folder in a text editor.

Look for the section that loads position-8, highlight the entire PHP section <?php ... ?> and move it (cut it, then paste it) above the section that places postion-7 into the web page. Both positions will sit below the <main>...</main> section in the index.php file.

The end result will look like the following:

<?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; ?>
<?php if ($this->countModules('position-7')) : ?>
    <div id="aside" class="span3">
        <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
        <!-- End Right Sidebar -->
    </div>
<?php endif; ?>

It would be a good idea to save the edited index.php to your site files and test that it is working properly. Be sure you have modules assigned to both position-8 and position-7 and open up the front end of your site to see that both columns sit to the right of the main content area.

Add the new position to index.php

Copy the <?php...?> sections of position-8 and place it above the existing <?php...?> for postion-8.

Edit the text so it looks like the following:

<?php if ($this->countModules('doublerightcoltop')) : ?>
    <!-- Begin double right column -->
    <div id="doublerighttop" class="span6">
        <div class="doublecol">
            <jdoc:include type="modules" name="doublerightcoltop" style="xhtml" />
        </div>
    </div>
    <!-- End double right column -->
<?php endif; ?>
<?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; ?>
<?php if ($this->countModules('position-7')) : ?>
    <div id="aside" class="span3">
        <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
        <!-- End Right Sidebar -->
    </div>
<?php endif; ?>

Note that the edits replace position-8 with doublerightcoltop. We editied the comments so it explains whet is occurring. We gave it unique id and a class of "doublecol". You can give it whatever id and class name that makes sense to you. Remember this id and class name is what you use to style this module in your stylesheet.

We also gave it class="span6". This will use the existing styles that template.css has for the Bootstrap2 responsive styling.

Open up the back end of your Joomla site. Create a module for this new position. Select the new position name from the dropdown list for your template. Save the module.

Open your site in a browser and be sure that it is working. There should be a module sitting on top of the two columns when viewed on a large monitor. Reduce the browser window to see what happens for narrow screens. the example used span6 for the class, so it should assume a with of the entire window when viewed on narrow screens.

Add styling for your new position

You may want to add styles within your stylesheet for padding, margins, borders, etc. Be sure to target the id and/or class name that you assigned to the new position.


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.