Construct Framework

It is possible to center the content (i.e. logo, modules, etc.) contained within full width elements such as the header and footer. To do so, you will need to create an layout override and add an extra centering division to contain the content that you wish to center.

For example, to have a full width header, while constraining the content within it to a fixed with, you could change the header from:

<div id="header" class="clear clearfix">
	<div class="gutter clearfix">
		<h1 id="logo"><a href="/<?php echo $this->baseurl ?>/" title="<?php echo $app->getCfg('sitename');?>"><?php echo $app->getCfg('sitename');?></a></h1>
		
		<?php if ($this->countModules('header')) : ?>
			<jdoc:include type="modules" name="header" style="jexhtml" />	
		<?php endif; ?>
						
	</div><!--end gutter -->
</div><!-- end header-->

to:

<div id="header" class="clear clearfix">
	<div class="gutter clearfix">
		<div class="centered">
			<h1 id="logo"><a href="/<?php echo $this->baseurl ?>/" title="<?php echo $app->getCfg('sitename');?>"><?php echo $app->getCfg('sitename');?></a></h1>
			
			<?php if ($this->countModules('header')) : ?>
				<jdoc:include type="modules" name="header" style="jexhtml" />	
			<?php endif; ?>
							
		</div><!--end centered-->
	</div><!--end gutter -->
</div><!-- end header-->

And then add a SS declarartion, like the following, to your custom style sheet:

#header .centered {
max-width: 80.5em;
margin: 0 auto;
}

• < Prev
• Next >