Side social icons

If you want to have social icons, or other boxes for links, that stick to the side of your screen, you can add a new module position that will hold each icon separately and stack them properly. These modules could hold your Facebook link, LinkedIn link, Twitter link, etc. The icons will stay in place, even if the user scrolls through the content.

Adding new positions to Protostar takes 3 steps, you need to add the position into templateDetails.xml. You need to create a place for that position in the HTML in index.php. Then you need to style that position in the stylesheet. We will also add an @media style so that the icons disappear for narrow screens and don't overlap the content.

Backup your files before editing the originals. As always, these changes will be overwritten if you upgrade you  Joomla installation, so it is best to copy the Protostar template, set the new template as the default and make the changes to the new template.

Add a new module position in templateDetails.xml

Go to your Joomla installation files using an ftp editor or the file manager at your hosting company. Open up templateDetails.xml in your protostar directory under the templates directory with a text editor. Add a new position in with the existing positions.

<positions>   
    <position>sideicon</position>
    <position>banner</position>
    ....
<positions>

Save this file and upload it back to your Joomla installation. If you edited the file through the Joomla Template Manager interface, you do not need to upload it back to your hosting server.

Create a spot for the icons in your index.php

Now open up the index.php in the protostar directory with a text editor. We will add a <div> for this module position near the bottom of the html section. The styling for this <div> will have it at a fixed position, so it can be anywhere in the HTML for the page.

Add these lines below the </footer> tag near the end of the index.php file.

<?php if ($this->countModules('sideicon')) : ?>
        <div id="sideicons">
            <jdoc:include type="modules" name="sideicon" style="none" />
        </div>
<?php endif; ?>

Add styles for the social icons

 Add the following to your stylesheet. If you have created a custom stylesheet, you can add the styles to that. Otherwise add these to the end of template.css.

#sideicons {width: 70px; position: fixed; top: 200px; left: 0px;}

@media (max-width: 1100px) {
    #sideicons {display: none;}
}

Save your stylesheet to your Joomla installation. You of course can edit the top: style so that the icons sit where you wish on the page.

Create modules for the icons

Now log into your Joomla administrative side and go to Extensions -> Modules. Create a new Custom HTML module. Add the image for the icon and add the link to your Facebook or other social site. Select the position of sideicon from the position dropdown. It should be in the list with the other positions if you edited templateDetails.xml properly.

Save the module and open up your website in a browser. The icons should show up on the left side of your screen on a wide monitor. Test that they go away for narrow screens by reducing the size of the browser window or by looking at your site on a tablet or phone. Adjust the styles as desired.


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.