monitor-w-sideareas

With responsive web design we often focus on how to set up the framework and styling so that the site works well on smaller devices with narrow screens.

What about large monitor screens?

Many people have very wide monitors for their work or home computers. And now the move has been going to people surfing the internet on their jumbotron-size flat screen televisions.

If your website has the default 960 pixel wide area for the container, then you are wasting a lot of real estate with the blank areas to the right and to the left of the container <div>. Keep in mind, that the content that you put in this area maybe should not be shown on smaller devices. You may want to put advertisements, promotions, links to other sections of your site, or some enhancing graphics in these areas, but you won't want to put crucial information in the side areas as they won't be shown on devices with narrow screens.

If you are using a 3rd party template, there may already be module positions for these side areas.

If you are using a responsive template, you may have already stretched the site to fit the width of the entire screen, no matter the size.


For this article, we will be using the default Protostar template, in static mode, to:

  • add new module positions
  • add elements to the index.php file in the root of the template
  • add specific styling for these new positions
  • use @media calls to turn off display of these areas for smaller screens

Add new module positions to the Protostar template

When you create new modules from the Module Manager, you must assign a position for that module in order for Joomla to place it in the correct location on the page.

Module positions are listed in a file named templateDetails.xml. Module positions are placed on the web page with the index.php file. Both of these files sit on the root of your template folder. You should ALWAYS make a backup copy of these files before editing the original file.

Open up the templateDetails.xml in a text editor and add two new position names for the right and left areas in the list of positions. Give these two new positions descriptive names.

<positions>
    <position>farleftcol</position>
    <position>farrightcol</position>
    ...
</positions>


Edit the index.php to add <div> elements for these positions

Open up the index.php (after making a backup copy) in a text editor to create locations for these new positions. These positions are going to be positioned absolutely and lie outside of the main container and footer container. We are going to add them near the end of the <body> section so they will load last. This is better for SEO, as you want your main content to load first for the web crawlers that index your site.

Scroll to the bottom of the document and look for the closing </footer> tag. After this tag we will insert two PHP is statements that will only create these <div>s IF there are modules that have been assigned to these positions.

<?php if ($this->countModules('farleftcol')) : ?>
    <div class="farleftcontent">
<jdoc:include type="modules" name="farleftcol" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('farrightcol')) : ?>
<div class="farrightcontent">
<jdoc:include type="modules" name="farrightcol" style="xhtml" />
</div>
<?php endif; ?>

What these lines are doing is using PHP to test if there are any modules with the position name of farleftcol or farrightcol. If this test returns true, then it creates this <div>. If this tests false, it does not create the <div>.


Style the new <div>s so they are located in the correct place.

These new positions need to be positioned so that they always stay to the left or the right of the main content area. For this example, we are going to assume the main container is 960 pixels wide when viewed on a wide screen. For this example, we are going assign a fixed pixel width. With the fixed pixel width, you will know how wide to make any graphics, advertisements, etc. 

We need to add some styles for these new elements in the custom stylesheet that we created for our Joomla site. If you don't have a custom style sheet set up, read this article on how to create one: Adding your own Custom Style Sheet to the Protostar Template

When something is has a property of position:absolute, the browser places is in the top left corner of the page, unless a top, left, right or bottom property is stated.  The challenge here is to always have this <div> sitting just left of the main container. If we just assigned a left property, the <div> would be located in different places relative to the main container depending on the monitor width. In order to have these <div>s placed relative to the main container, we will bring them in 50% of the width of the screen (which is halfway into the container) then push them out a fixed pixel width for the 960px wide container.

If you wish for the two side areas to stay fixed on the screen while the center content scrolls, you can use the property of position:fixed.

We also need to consider what sort of monitors would be viewing this website in its full width, so we don't want to have the width of the div to be too wide, or it may extend beyond the limits of the monitor screen. We will assign a width of 250px wide for this example. Later we will add @media styling so that any screens that are less than 1500 pixels wide will not see these <div>s. A 15" laptop or wider will likely see these areas, but a tablet would not.

.farleftcontent {
    position: absolute;
    width: 250px;
    left: 50%;
    top: 160px;
    margin-left: -745px;
}
.farrightcontent {
    position: absolute;
    width: 250px;
    left: 50%;
    top: 160px;
    margin-right: 500px;
}


Create @media styles for more narrow screens

Now let us set up the @media styles in the custom style sheet.

@media (max-width: 1500px) {
    .farleftcontent, .farrightcontent {display: none};
}


Test your site

Test this in your browser window. Be sure the two new <div>s appear when you have your browser window maximized. We are assuming that you are using a large monitor screen for this example.

Reduce the browser window and test that the two <div>s disappear when the window is narrowed.