This article walks you through creating three side-by-side modules to the footer section of Protostar. 

You can easily accomplish this without adding module positions, by adding a Module Class Suffix to each module, but you may wish to make new positions so that you won't have to always remember to add the class suffix names. This may be the case for when you have other contributors creating content or just for convenience sake.

We will need to edit the index.php, templateDetails and a custom stylesheet for the Protostar template. Always make safety backups of the original files before editing the original files. You can download these files from your Joomla installation via FTP, edit them with a text editor like Notepad++ then upload them back to the same place. You can also edit these files through Template Manager in the Administrative side of Joomla. Click on Protostar in the template column then click on the name of the file in the left hand column. This opens up a text editor in the large panel.

Keep in mind that you will need to duplicate these steps when you upgrade your Joomla installation as index.php and templateDetails.php may be overwritten. You can either copy back the files after upgrading, or redo all the steps, or rename your Protostar template (this takes a special procedure). By renaming the template, it will not be overwritten, but it will not get any upgrades either.

Current settings for the footer in Protostar

This is the current code for the footer area of the Protostar template for a Joomla 3.3.6 installation:

<footer class="footer" role="contentinfo">
    <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
        <hr />
        <jdoc:include type="modules" name="footer" style="none" />
        <p class="pull-right">
            <a href="#top" id="back-top">
                <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
            </a>
        </p>
        <p>
            &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
        </p>
    </div>
</footer>

With the standard settings, if you add a module to the footer position in Module Manager, it will be placed above the line with the copyright information and under the <hr/> tag. The module will extend across the entire <footer> div which extends across the width of the container. For the standard static layout, this has a style of width: 940px for large monitors and width: auto; for more narrow screens.

We will leave the footer module position in the footer and add our three new module positions above the footer position and above the <hr/> tag. You can choose to remove the <hr/>, horizontal rule, tag if it doesn't please you.

Add position names to templateDetails.xml

When you create a new position name, you need to add it to the templateDetails.xml file that resides in the root of your Protostar template, templates/protostar/templateDetails.xml.

We will call the three new positions footer-left, footer-middle and footer-right. Open up templateDetails.xml in a text editor. Find the section where the position names are created and add the three new position names at the end. When you add the position names to templateDetails.xml, it automatically adds them to the module positions on the dropdown list in Module Manager: Module Custom HTML. 

<positions>
    <position>banner</position>
    <position>debug</position>
    <position>position-0</position>
    <position>position-1</position>
    ...
    <position>footer-left</position>
    <position>footer-middle</position>
    <position>footer-right</position>
</positions>

Add the positions to index.php

You need to tell Joomla where to place these new positions. Since these positions are going to be side-by-side for large screens, we need to consider that we want placeholders for all three, even if only one had content placed into it. Otherwise you would just have a narrow module by itself.

We want to write a PHP if statement to test if any of these three modules have content. If so, then create a containing <div> for all three and individual <div>s for each of the three positions. If there are no modules for any of the three positions, do not create any divs.

For each of the individual positions, we include the <jdoc:include... ?> line that includes the content for that module. Having a style="xhtml" means that there is the option of displaying the title of the module. If there is not module for that position, the <div> is still created as a placeholder. Note how we added a new <div> to contain the existing footer position. This is so that we can clear the float of the three above.

Keep in mind that position names and <div> id's are two different things. The position names are used by the PHP and do not appear in the HTML that is generated for the page.

<footer class="footer" role="contentinfo">
    <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">   
    <!-- CUSTOM POSITIONS ADDED HERE -->
    <?php if (($this->countModules('footer-left')) || ($this->countModules('footer-middle')) || ($this->countModules('footer-right'))) : ?>
        <div id="footerThreeMods" >
            <!-- Begin Three Footer Mods -->
            <div id="footerleft">
                <jdoc:include type="modules" name="footer-left" style="xhtml" />
            </div>
            <div id="footermiddle">
                <jdoc:include type="modules" name="footer-middle" style="xhtml" />
            </div>
            <div id="footerright">
                <jdoc:include type="modules" name="footer-right" style="xhtml" />
            </div>
            <!-- End Three Footer Mods -->
        </div>
    <?php endif; ?>
    <!-- END CUSTOM POSITIONS -->
    <hr/>
        <div id="footerfull"> <!-- CUSTOM add this outer div to clear the floats -->
            <jdoc:include type="modules" name="footer" style="none" />
        </div>
        <p class="pull-right">
            <a href="#top" id="back-top">
                <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
            </a>
        </p>
        <p>
            &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
        </p>
    </div>
</footer>

 

 Add styling for the new modules in the footer

We will include some very simple styling for these modules for this article. These styles should go in your custom style sheet.

You may find that you wish to tweak the styling to fit your needs. If you are going to have an graphic, you want to be sure to add some styling so that the image does not exceed the width of the containing <div>. You may also wish to add a set height to each module so that all three have the same appearance.

With this styling, we have added @media styles for the positions to become narrower in relation to the containing div and  to stack on top of each other for screens that are narrower than 767px. You may wish to change this.

#footerfull {clear: both;}
#footerThreeMods {width: 100%; }
#footerleft, #footermiddle, #footerright {width: 32%;float: left; }
#footerleft {}
#footermiddle {margin-left: 2%}
#footerright {margin-left: 2%}

@media (max-width: 960px) {
    #footerThreeMods {width: auto; }
}

@media (max-width: 767px) {
    #footerleft, #footermiddle, #footerright {width: auto; float: none; }
}

Other things to note

If you have more than one module for any of these individual position names, it will break the layout. You will need to keep that in mind when creating the modules.

You can of course assign different modules to different pages with the Menu Assignment tab.

Note that adding padding to these <div>s increases their outside widths and may alter the layout. There may be other styling steps that you need to make.


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.