protostar-upperleft

A visitor to bj.zemplate.com wrote in asking if you could modify the banner position so it sits on top of #sidebar (position-8) and #content (position-3), but then #sidebar (position-7) would line up with the top of the new position.

The problem with using the banner position for this is that it doesn't reside in <div class="row-fluid">. Also, in the index.php for Protostar it isn't contained inside any set <div> and doesn't have any span classes applied. If you simply applied a more narrow width to the banner, the #aside column would still not rise up so the tops lined up as it is contained in .row-fluid.

These settings for the banner position could be changed of course, but we thought it would be best to just add a new custom position.

In the illustration this new position is the off-white area labeled upperleft.

There are some issues that you need to address when adding this so the other <div>s sit in the correct location.

You also have to address what will happen with narrow screens less than 768px wide. This is the threshold where the Protostar template takes these <div>s and removes the floats and makes them as wide as the containing element.

With this tutorial we will take several steps:

Step 1: Backup our Protostar files in the case that we need to refer to or revert back to the original files. Keep the backed up folder where you can get to it, but separate from the site's files.

Step 2: Add a new position name to templateDetails.xml

Step 3: Edit the index.php to add a spot for the new position.

Step 4: Add styling to the style sheet that allows the different positions to line up properly.

Keep in mind that you will need to repeat these steps if you upgrade the Joomla and the Protostar template. The index.php file will be replaced with a new file. Comment the areas where you make the edits, so you can easily see where you have edited the file.

You can edit the files in a text editor, such as Notepad++ or through your hosting company's control panel. You can also edit these file through Extensions -> Template Manager in your Joomla Admin screen. Click on Protostar in the template column and when you click on the name of the file, it will appear in the text editor.

Step 1: Backup the Protostar files

Make a safety backup of index.php and templateDetails.php. If you have a custom style sheet, you may want to back that up as well. To backup the files, use an FTP program or your hosting company's file manager. Put the copied files aside in a folder on your own computer where you can refer to them or revert to them if you need to.

Step 2: Add a new position name in templateDetails.xml

In the root of you Protostar files, there is a file called templateDetails.xml.

Locate the section with all of the position names. Add the new position name.

<positions>
<position>banner</position>
<position>debug</position>
<position>position-0</position>
...
<position>upperleft</position> <!-- CUSTOM POSITION -->
</positions>

Save this file to the Protostar files for your Joomla site.

Step 3: Edit the index.php to add the new position

Open up the index.php file.

We need to add some PHP so that the content div is assigned the proper span class so it expands to the proper width.

In the upper PHP portion of index.php, locate the line that reads // Adjusting content width. This set of if and elseif statements determine which span class will be assigned to the content area. It all depends on if one or both of the side colums are added. We will be replacing all of the if elseif statements.

We are going to replace the set of if and elseif statements with the set shown below that includes the new position of upperleft. Having this new position in combination with the others changes which span class will be assigned to the content.

<!-- CUSTOM -->
// Adjusting content width
if (!$this->countModules('upperleft') && $this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('upperleft') && $this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
elseif ($this->countModules('upperleft') && $this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span12";
}
elseif (!$this->countModules('upperleft') && $this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('upperleft') && !$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
<!-- END CUSTOM -->

 

Locate the section where <div class="row-fluid"> is located. Add the following lines:

<div class="row-fluid">
<!-- CUSTOM CONTENT --->

    <?php if ($this->countModules('upperleft')) : ?>
        <div id="leftblock" class="span9">      
        <div id="upperleft" class="span9" >
            <jdoc:include type="modules" name="upperleft" style="xhtml" />
        </div>
    <?php endif; ?>
<!-- END CUSTOM CONTENT -->

Let's explain what we have done with these lines:

<!-- CUSTOM CONTENT --->

Add a comment line so we can pick out our custom edits at a later date

<?php if ($this->countModules('upperleft')) : ?>

Create a PHP if statement so the index.php only adds this section if there is a module assigned to the position of upperleft

<div id="leftblock" class="span9">

Create a new <div> that will hold the <div>s of #upperleft, #sidebar and #content, float this containing <div> so the <div> of #sidebar can float to the top. The class of span9 will make in 9/12 of the containing div, which is .row-fluid.

<div id="upperleft" class="span9" >

create a <div> to hold the contents of the module/ The span9 class will make it so it is 9/12 of the containing div of leftblock.

<jdoc:include type="modules" name="upperleft" style="xhtml" />

Use Joomla API to include the contents of the modules assigned to upperleft position. The style of "xhtml" allows the module title to be displayed

</div>

Close the upperleft div

<?php endif; ?>

End the PHP if statement

<!-- END CUSTOM CONTENT -->

Add a comment line so we can pick out our custom edits at a later date

We are not done yet. We need to close the <div id="leftblock">, but add this line only if there is a module in the upperleft position. This additional line needs to be surrounded by another PHP if statement and it needs to be placed after the content div but before the #aside div.

Scroll down in index.php, look for the </main> line. Add the lines shown below just before the line that reads <?php if ($this->countModules('position-7')) : ?>

</main>
<?php if ($this->countModules('upperleft')) : ?>
    </div>
<?php endif; ?>
<?php if ($this->countModules('position-7')) : ?>

What this does is add the </div> only if there is a module assigned to the upperleft position.

Step 4: Add the styling for the new position

In the style sheet add the following lines:

.row-fluid {
    position: relative;
}
#leftblock {
    float: left;
    background: #ffeeee;
}
.row-fluid #leftblock #content.span12 {
    margin-left: 0;
}
.row-fluid #leftblock #sidebar {
    margin-left: 0;
    clear: left;
}

We don't need to add @media styles. It seems to work when reduced to the narrow screen width.

There is one problem with this layout. It doesn't work well if you don't have a module in position-7.


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.