Header Image

[eediva]

I've searched pretty much the whole day for an answer to my question, so please help!
I'm trying to create a custom template for http://www.one3snapshot.com/shop that looks pretty much like this http://snoelleskincare.com I figured out how to edit the logo image but for some reason header_bg is not showing up. Is there a setting in admin i need to change or something? please help

[Kim]

What have you done to add the header_bg?

[ideadirect]

I used the CSS style sheet to add a background image. I found an example in the forums and basically have a header split into three sections.
The first section is the left side of the header.
The second section is the center and proportional (fluid and changes with screen size)
The third section is the right section of the header.

You can do the same with just a single header if you like.
Anyway, here is the CSS code contributed from someone else on these boards.

	#logoWrapper { }

.peace-logo img {
display: none;
}
.peace-logo {
display: block;
  }
#logo1 {
position: absolute;
left:0px;
top:0px;
width:187px;
height:97px;
background: url(/shop/includes/templates/custom/images/drug_treatment_center_colorado_logo.jpg);
z-index:99;
  }
#logo2 {
background: url(/shop/includes/templates/custom/images/drug_treatment_center_colorado_middle.jpg);
height:97px;
margin-left:187px;
margin-right:20px;
  }
#logo3 {
position: absolute;
right:0px;
top:0px;
width:700px;
height:97px;
background: url(/shop/includes/templates/custom/images/colorado_drug_treatment_center_top.jpg);
  }

to see this header, you can visit:
http://www.innerbalancehealthcenter.com/shop

[ideadirect]

Just to follow up...
Once you make the change in your CSS file, you also need to update the tpl_header.php file in templates/youroverridefolder/common directory.

The section to look for is branding display. You can move this entire section above the navigation display if you want the header above the navigation links. Be sure to move the entire section including the <!-- bof...---> through to <!--eof...--> Think of these as modular components that you can move around to your liking.

My code also includes navigation for other sections of the site which it sounds like you don't need so you can ignore those.

Here is the code for the tpl_header.php file:

<!--bof-branding display-->

<div id="logo1">&nbsp;</div>
<div id="logo2">&nbsp;</div>
<div id="logo3">&nbsp;</div>
<a href="../index.htm"><div id="nav_home">&nbsp;</div></a>
<a href="..//drug_alcohol_treatment_approach.htm"><div id="nav_differentapproach">&nbsp;</div></a>
<a href="..//drug_alcohol_treatment_program_overview.htm"><div id="nav_programoverview">&nbsp;</div></a>
<a href="..//recover_from_drugs_and_alcohol.htm"><div id="nav_recovery">&nbsp;</div></a>
<a href="..//gallery.php"><div id="nav_photogallery">&nbsp;</div></a>
<a href="..//video.htm"><div id="nav_video">&nbsp;</div></a>
<a href="./index.php"><div id="nav_shop">&nbsp;</div></a>
<a href="..//contact_us_for_addiction_help.htm"><div id="nav_contactus">&nbsp;</div></a>
<div id="nav_spacer">&nbsp;</div><div id="nav_endcap">&nbsp;</div>
</div>

<!--eof-branding display-->

For your needs, you could just define a single header logo (such as 'headerlogo' in the CSS file and then use the <div id="headerlogo">&nbsp;</div>

[eediva]

thank you very much ideadirect! i'm going to make the changes you suggested.

[eediva]

thank you!!! it's working now...one hurdle crossed :)

[Ajeh]

What size monitor do you work from?

While the header looks nice ... that is all you really see of your site the whole time you are there without constantly scrolling up and down ...

I think you might wear out your customers' mouse ... or patience ...

[eediva]

thanks for the feedback it's 875 x 300 currently.
i think i may have to shrink it

[eediva]

I have another questions, I've found templates for header, footer and side colums that i can edit, is there a template for the center where most of the content should typicall be or is that in define_main_page.
I'd like to use CSS to position where the links to the categories would be placed for instance.

[SodaJim]

Hello,

Is this the best technique to include an image at the top of the page...?
Additonally, will the logo image file still display using this technique...?

Thank you,
Jim