Jump to content

[SOLVED] How to create full width header background


Recommended Posts

I am wanting to make my header to be full width to put in a background image. I want the contents of the header: logo, cart, user login, and horizontal link menu to stay centered at the 980px default.

My shop is at www.arcnart.com/Shop   

I basically want the top to look the same as the one on www.arcnart.com

 

If I can get that done, I also want to find out how to move the user login and cart to be aligned next to each other at the top of the page.

 

Thanks in advanced for any help.

Edited by vekia (see edit history)
Link to comment
Share on other sites

Well I managed to get the header to be full with a background image. Although the logo went to the left and the cart and user login to the right. I think I need to put them in a div that has a margin:auto with a set width of 980px. I just can't seem to figure it out yet. If anyone could lend some help, I would appreciate it.

Link to comment
Share on other sites

Well I finally figured out the full header after reading many posts and trying several things. For anyone else trying to achieve the same thing, this is what I did.
 
Edit your header.tpl which is located at    YourStoreName/themes/Yourtheme/header.tpl

      Scroll to the bottom and find the top line of this code and replace that section.

			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
			<div id="customheader" class="nostylesdefined">
<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'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_9 omega">
{$HOOK_TOP}
</div>
</div> 
			<div id="columns" class="grid_9 alpha omega clearfix">

Now edit the global.css, located at YourStoreName/themes/Yourtheme/css/global.css

Add this line to global.css preferably in the HEADER area located at line 556

#customheader {
background-image: url("http://www.YourWebsite.com/YourImage.jpg");
left: 0px;
top: 0px;
width: 100%;
z-index: 10;}

That is all. You should now have a full header with everything else at the default 980px center.

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...