I'm trying for Joomla Protostar template to create 3 custom module positions above and below the content area.

I have added the positions to the templateDetails.xml. And I figured that I then have to add the positions into the index.php.

Around line 180 I have this section:

        <main id="content" role="main" class="<?php echo $span; ?>">
            <!-- Begin Content -->
            <jdoc:include type="modules" name="position-3" style="xhtml" />
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            <jdoc:include type="modules" name="position-2" style="none" />
            <!-- End Content -->

And then if I'm right, my code for my Top positions will go before "message" and bottom after "component", using?

<jdoc:include type="modules" name="position-4" style="xhtml" />

but not sure how to do this correctly?

My custom positions Bottom A-B-C and Top A-B-C needs to be horizontally in 3 columns and fill 100% of the main sections width.

For example, if I place a module only on Bottom-A, then that module will fill 100% of the width (same width as position-2). If I place a module on e.g. Bottom A and B they are to be 50/50. If I place a module on Bottom A, B and C they will be 1/3 of the width each (like on position image below)

Had a look at this thread: how to make custom positions stack horizontally rather than vertically

With a little modification by the code given in that thread, did give me 3 horizontal positions, but they weren't correctly aligned with e.g position-2 and didn't function according to my wishes.

<div class="row">
    <div class="bottom-a">
        <?php if ($this->countModules('position-9')) : ?>
             <!--custom position 9 'Bottom-A' -->
            <div id="top-2a" class="span3">
                <jdoc:include type="modules" name="position-9" style="xhtml" />
             <!-- End Sidebar -->
            <?php endif; ?>
    <div class="bottom-b">
        <?php if ($this->countModules('position-10')) : ?>
        <!--custom position 10 'Bottom-B' -->
            <div id="top-2b" class="span3">
                <jdoc:include type="modules" name="position-10" style="xhtml" />
        <!-- End Sidebar -->
        <?php endif; ?>
    <div class="bottom-c">
        <?php if ($this->countModules('position-11')) : ?>
        <!--custom position 11 'Bottom-C' -->
            <div id="top-2c" class="span3">
                <jdoc:include type="modules" name="position-11" style="xhtml" />
        <!-- End Sidebar -->
        <?php endif; ?>

enter image description here

enter image description here

Any help appreciated :)

  • but they weren't correctly aligned with e.g position-2 and didn't function according to my wishes. >>> How were they not correctly aligned? How did they not function?
    – Lodder
    Nov 13, 2015 at 20:23
  • Have added a screenshot of my code's results. The Bottom raw is slightly offset to the left and don't fill the entire width. and if I unpublish one of them, the 2 remaining don't expand filling 50/50 of the width.
    – Hammur
    Nov 13, 2015 at 20:54
  • 2
    I've been looking at this the wrong way. Maths question for you...what's 12 ÷ 3 ?
    – Lodder
    Nov 13, 2015 at 21:31

1 Answer 1



Lets looks at what we know:

  • Bootstrap is a 12 column grid framework
  • You're trying to implement 3 boxes, divided equally in a row


12 ÷ 3 = 4


Use span4 instead of span3

  • Right thanks, that worked fine for using 3 boxes. But my code doesn't seem to make the row flexible. Like if you should happen to only use 2 boxes, those two boxes would be devided 50/50. If only 1, then 100%. But that might be a little more complicated to do i guess?
    – Hammur
    Nov 14, 2015 at 12:29
  • Not all all. Have a look at the default Protostar template index.php file. There are some if ... else conditions for $span sizes
    – Lodder
    Nov 14, 2015 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.