Div that extends across entire screen

If you want to have a graphic or a bar or any continuous area that extends all the way across the screen on a wide monitoras in the site monetize.zemplate.com this can be accomplished with a few steps.

You need to edit the style sheet, the index.php document and possibly the templateDetails.xml at the root of the protostar template folder. These instructions walk you through creating and additional <div> element for this purpose.

This <div> will be placed outside the area that holds the content and the side columns. You can add new positions to this <div> or move existing elements into to this <div> to hold navigation, logo, advertisements or other elements.


Step 1: Create a <div> that lies outside of the <div class="container"> area.

Open up the index.php file that resides just under the templates -> protostar directory with a text editor.

Create a backup of index.php and name it something like index-2-6-14.php and set it aside.

In the original index.php file, add a new <div></div> below the <div class="body"> tag and above <div class="container"> 

<div class="body">
    <div id="top-bar">
        <div id="top-bar-contents"><p>This is the stuff I want to say in the top bar</p></div>
    </div>
<div class="container">
...

Save this index.php file and upload it back to your sites files in the same place in the directory structure. You can also edit these files in Template Manager which makes it so you do not have to download and upload the file.


Step 2: Open up your customized CSS stylesheet and add styling for this area. Don't have a custom stylesheet set up just yet? Read this article: Add a Custom Stylesheet to the Protostar Template

#top-bar {
    width: 100%;
    height: 50px;
    background: #999999;
}

You will now see that you have a bar that goes all the way across the screen. If you are seeing that this top-bar doesn't quite reach the edges of the screen, it may be because there is padding applied to the <body> tag. Research this with a program like Firebug and create some CSS statement in your custom stylesheet that overrides this padding. Something like:

body.site {
    padding: 0px;
}

Add a custom position to the <div> that goes all the way across your page

If you want to add content to this top bar, like a menu, advertising, other links, etc, you likely want to create a custom position inside this top-bar. You need to create a custom position in Joomla so that you can assign modules to the position. You need to take a couple more steps to add this position.


Step 3: Create a custom position in your Protostar template.

Open up templateDetails.xml under templates -> protostar in your site directory with a text editor.

Create a backup of this file, name it something like templateDetails-2-6-14.xml and set it aside.

In the original templateDetails.xml file, within the <position> ... </position> tags, add a new line.

<positions>
    <position>top-bar-content</position>
    ...

Save and close this file and upload it back to your sites files in the same place.


Step 4: Create a place for this position within the index.php file.

With a text editor open up the index.php file that you used in Step 1.

Add these lines within the <div id="top-bar"></div>

<div id="top-bar">
    <div id="top-bar-content">
        <jdoc:include type="modules" name="top-bar-content" style="xhtml" />
    </div>
</div>

Save and close this file and upload it back to your site directory in the same place. Remember that you already created a backup of it in Step 1.


Step 5: Within your Joomla 3 Administration menu, you can now assign modules, such as a your Logo, a Search box or your navigation to this position.

Open up an existing module or create a new one under Extensions -> Modules that you want placed in this position. If you click on the Position drop-down you should see your new name position in the list with the other Protostar positions.


Step 6: Style the top-bar-content div to remain in the center of its parent <div>

#top-bar-content {
    width: 960px;
    margin: 0 auto;
}

Make note that with the Zemplate Monetize site, the entire <header> section was moved above the <div class="container">. The header spreads across the entire screen. The content within the header remains on the center of the screen because it is contained inside an addition <div> within the header area and styled with a width: and a margin: 0 auto;.


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.