[solved]1.5.6 full width header with centered content

rialni · November 19, 2013

Hi,

Hoping you can help me. I've studied a bunch of old files and tried several solutions, but I can't seem to fix this.

I managed to get a full width header and top menu bar, but I want to keep the logo and menu-links centered over the page in the middle - with the 980px Width and equal margins of header and top bar background on each side. Let me know if you don't understand what I mean

The site is this: philippejse.nu

As you can see the content of the footer is centered - this is what I wish for the header too.

Thanks in advance for helping me out

Edited November 19, 2013 by rialni (see edit history)

Nishith Nesdiya · November 19, 2013

yes add the this ....

</div>

and all the header part is under the this div

<div class="container_9 clearfix" id="page">
</div>

and out put like as this image

rialni · November 19, 2013

yes add the this ....

<div class="container_9 clearfix" id="page">

<div id="header" class=" grid_9 alpha omega">

</div>

</div>

and all the header part is under the this div
<div class="container_9 clearfix" id="page">
</div>
and out put like as this image

2013-11-19_131057.png

Thanks for your reply Just one issue - I still want the header and menu to stretch full Width, so exactly like in your image, except that the White and Black color of the header and menu should stretch across, but all 'content' stay fixed in the 980px spot

Is there a way to accomplish this?

Nishith Nesdiya · November 19, 2013

yes you can put the one div like as..

<div style="background: #FFFFFF; height: 84px;">
 <div id="page" class="container_9 clearfix">
here is your header div
</div>
</div>

rialni · November 19, 2013

yes you can put the one div like as..
<div style="background: #FFFFFF; height: 84px;">
 <div id="page" class="container_9 clearfix">
here is your header div
</div>
</div>
2013-11-19_133552.png

Great, thanks. That solved part of the problem Please take a look now and you will understand what I need with the menu bar. I have added the code for a 50px heigh bar behind the logo. But where can I stretch the menu bar?

Nishith Nesdiya · November 19, 2013

most welcomes...please modify the frist post and mark the topic is soved..

...

rialni · November 19, 2013

most welcomes...please modify the frist post and mark the topic is soved..

...

I will, except it's not all solved I still need the menubar to stretch also - like the headerfix, just with the Black transparent background and without moving the menuitems please check the page and you will see what I mean Thanks

rialni · November 19, 2013

Anyone?

If you look at: philippejse.nu you can see that the header and footer stretches to full width, but with content centered in the 980px page. I wish to do the same with the top menu bar - have it stretch across, without moving the links in the bar. I can make it 100% width, but this moves the links too.

Nishith Nesdiya · November 19, 2013

hello...

you can put the your header.tpl file code...

Edited November 19, 2013 by Nishith Nesdiya (see edit history)

rialni · November 19, 2013

Sure

Right now, I'm trying to work around it by adding header color and making a completely transparent menu. It's not what I'd prefer though.

Here's my header.tpl file, as it is right now:

  <div style="background-color:rgba(0, 0, 0, 0.7); height: 83px;">

        
        <div id="page" class="container_9 clearfix">
				
        <!-- Header -->	
    
    	<div id="header" class=" grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}"style="width:980px; height:50px;""/>
				</a>
				<div id="header_right" class="grid_9 omega" style="width:100%">
					{$HOOK_TOP}
				</div>
			</div>


			<div id="columns" class="grid_9 alpha omega beta clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">
	{/if}

Nishith Nesdiya · November 19, 2013

back-up your header.tpl file

after put new code your header.tpl file

and after tell me ...i help you

<div style="background:#FFFFFF;height:50px;">
    <div id="page" class="container_9 clearfix">
     <!-- Header -->    
        <div id="header" class=" grid_9 alpha omega">
            <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" style="width:980px;height:50px;"/>
            </a>
        </div>
  </div>
</div>
<div style="background:#000000;height:24px;">
    <div id="page" class="container_9 clearfix">
                <div id="header_right" class="grid_9 omega" style="width:100%">
                    {$HOOK_TOP}
                </div>
    </div>
</div>
<div id="page" class="container_9 clearfix">
<div id="columns" class="grid_9 alpha omega beta clearfix">
    <!-- Left -->
            <div id="left_column" class="column grid_2 alpha">
                    {$HOOK_LEFT_COLUMN}
                </div>

                <!-- Center -->
                <div id="center_column" class=" grid_5">
    {/if}

Edited November 19, 2013 by Nishith Nesdiya (see edit history)

rialni · November 19, 2013

GREAT!!! That could work. I just need to play around with it as there seems to be some other code pushing the menu down now.

I'll get back to you as soon as I solve this and mark the topic as solved You're the best. Thanks for helping me out

rialni · November 19, 2013

It works - I needed to set some topmargins to 0 in superfish.css (blocktopmenu) to move the menu on top of the added bar and set the background-color of the menu to transparent.

Thank you Nishith Nesdiya

wilson113311 · November 23, 2013

Hi Do you have the header.tpl and other files final code needed to have full width header and top menu with everything else centred at 980px? Thank You Jack

rialni · November 24, 2013

The solution Nishith provided me with is what worked best for me. That is as simple as putting a new div behind the logo and another behind the menubar and coloring that div the same as the logo and menu and then making sure height is the same as the two.

Here's my full header tlp. where both new divs are coded. You shouldn't need to alter other files to do this. Just remember to adjust the size of the two divs to the size of your own logofile and menu You find here that my logo-background-div is 50px and my menu-background-div is 34px.

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir|addslashes}';
			var baseUri = '{$base_uri|addslashes}';
			var static_token = '{$static_token|addslashes}';
			var token = '{$token|addslashes}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		
      <div style="background:#FFFFFF;height:50px;">
    <div id="page" class="container_9 clearfix">
     <!-- Header -->    
        <div id="header" class=" grid_9 alpha omega">
            <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" style="width:980px;height:50px;"/>
            </a>
        </div>
  </div>
</div>
<div style="background-color:rgba(0, 0, 0, 0.6); height:34px;">
    <div id="page" class="container_9 clearfix">
                <div id="header_right" class="grid_9 omega" style="width:100%">
                    {$HOOK_TOP}
                </div>
    </div>
</div>
<div id="page" class="container_9 clearfix">
<div id="columns" class="grid_9 alpha omega beta clearfix">
    <!-- Left -->
            <div id="left_column" class="column grid_2 alpha">
                    {$HOOK_LEFT_COLUMN}
                </div>

                <!-- Center -->
                <div id="center_column" class=" grid_5">
    {/if}

wilson113311 · November 24, 2013

Hi, Unfortunately I have to say this didn't work this did put the 100% banner in but then sent the logo the full width of the 980 and also pushed the topmenu down out of the way. Thanks

[solved]1.5.6 full width header with centered content

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in