widebanner

You may wish to have a large banner photo or graphic that sits below the header area and above the content, but you want the header area and the content to remain at the regular width and placed in the middle of the page.

This can be accomplished by adding a new module area to the index.php and templateDetails.xml. This new module area will sit below the header and above the content, and it will be the full width of the monitor on a large monitor.

You will need to modify the header area in index.php so that it can be styled to have same properties as the content area as far as width and placement.

You will also need to add some styles to have the header area match the style for the content area, and some styles for the wide banner area.

Always back up any files that you will edit before editing the original file.

Add the widebanner position to templateDetails.xml

Open up the templateDetails.xml file from your Protostar folder in a text editor or with the editor in the Template Manager area.

Add the following position to the list of positions.

<positions>
        <position>widebanner</position>
        <position>banner</position>
        <position>debug</position>
        <position>position-0</position>
        ...

Open up index.php for editing

 Be sure you have a backup set aside before editing the index.php in the root of your Protostar template files.

Open up index.php and make the following edits. The bold lines are new text, the other lines have been rearranged to add the widebanner module position.

Note: This code is moving the <header> section to sit above and outside of the <div class="container">

<div class="body">
            <!-- Header -->
            <div id="headercontainer" class="container">
            <header class="header" role="banner">
                <div class="header-inner clearfix">
                    <a class="brand pull-left" href="/<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                        <?php endif; ?>
                    </a>
                    <div class="header-search pull-right">
                        <jdoc:include type="modules" name="position-0" style="none" />
                    </div>
                </div>
            </header>
            <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <?php if ($this->countModules('position-1')) : ?>
                <nav class="navigation" role="navigation">
                    <div class="navbar pull-left">
                        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                    </div>
                    <div class="nav-collapse">
                        <jdoc:include type="modules" name="position-1" style="none" />
                    </div>
                </nav>
            <?php endif; ?>
            </div>
            <!--------- ADD WIDE BANNER ------------>
            <?php if ($this->countModules('widebanner')) : ?>
            <div id="widebannerholder" class="screenwide">
                <jdoc:include type="modules" name="widebanner" style="xhtml" />
            </div>
            <?php endif; ?>
            <!--------- END WIDE BANNER --------------->
            <jdoc:include type="modules" name="banner" style="xhtml" />
            <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <div class="row-fluid">

With these edits, you will notice that the <div class="container"... has been moved from above the <header> area to just above the <div class="row-fluid">. The <div id="headercontainer" class="container"> has been added so it has the same properties as the content area and so that you can style that area as needed.

Add styles to user.css to make this all work

Now we need to add styles to make this work. If you have not yet created a user.css file, do so now and place it in the css folder in your Protostar template. Protostar will automatically find this stylesheet if named user.css (Joomla 3.5 and above). Open up your user.css file and add the following lines.

body.site {padding: 0px;}
header {width: 100%}
#headercontainer {width: 940px}
#widebannerholder {height: auto; width: 100%}
#widebannerholder img {width: 100%; height: auto;}

This will remove the padding on the body.site element so the banner will fit the entire screen. The #headercontainer element will match the width of the .container element as it has the same class. You can add other styles for modifying this area as you wish.

Add @media styles for narrower screens

You may want to add other styles for narrow screen with @media styles in your user.css, in particular to the #headercontainer such that the width is 100% to fit the screen.

Create the module for the widebanner

In the administration area for your website, pull down Extensions -> Modules.

Create a new Module of the type Custom. Open up this module and you will see a text editor. Place your banner image into the text area as you would any image. Do not assign a set width or height for this image using the text editor. A set width or height applied here is using inline styling and will override the styles set in your stylesheet. This will cause problems with a responsive website.

Assign this module to the position widebanner. Be sure to place it on the proper pages in Menu Assignment if you do not want it on every page of your site.


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.