Trying to get the header larger than the rest of the pages

[AlexThibo]

Hi, I tried to find the answer in the forum but didn't so I'll try to explain what I need to do. I hope it will make since it will be hard to explain, english in not my mother tongue. Please be conciliant.

There's a website that i would like to install zencart on it. In fact, it is already installed and everything is working fine but I'm trying to modify the zencart template to looks like the website which is the problem.

The website adress is the following: http://www.fc4x4q.com. As you can see at the top there is a logo and a black line with the general menu on it. The website has his own stylesheet. I need to repeat this header over the zencart page which I'm not able to do.

I have followed the new custom tutorial (http://www.zen-cart.com/content.php?...ustom-template) and start to modified the original templates and was able to change few things but I'm blocked at this header problem.

The actual zencart page is at this adress: http://www.fc4x4q.com/boutique

I have to mention that I only have acces to the file concerning zencart, not the rest of the website files.

What I would like to do is to make it looks like this:


Note that all the logo part between the login and the categories has to be removed since the logo needs to be over that to keep the same dising has the actual website.

Is this even possible?
Can you help?

Thanks in advance.
Alex

[AlexThibo]

I was able to remove all the logo part by placing <div id="logoWrapper"> as a comment in tpl_header.php.

Still need help with the top to have it looks like the rest of the website.

[gjh42]

You say you don't have access to the main site code, but you can get it just by doing a view source. The header section has this HTML:

   <header>
       <div class="main wrap">
       		<h1><a href="index.html"><img src="images/logoFDQ.png" alt=""></a></h1> 
       </div>
       <nav>  
          <ul class="menu">
              <li class="current"><a href="index.html">Accueil</a></li>
              <li><a href="membres.html">Devenez membre</a></li>
              <li><a href="form-partenaires.html">Devenez partenaire</a></li>
              <li><a href="contact.html">Nous contacter</a></li>
          </ul>
              <ul class="reseaux"> <a href="archives.html"><img src="images/pdf.jpg" width="37" height="26"></a> <a href="https://www.facebook.com/fc4x4q?fref=ts" target="_blank"><img src="images/facebook.jpg" width="37" height="26"></a><a href="https://www.youtube.com/user/FC4X4Q" target="_blank"><img src="images/youtube.jpg" width="37" height="26"></a> <a href="chroniques/chroniques_1.html"><img src="images/baroudeur_2.jpg" width="59" height="26"></a> 
         </ul>
<div class="clear"></div>
        </nav>
   </header>

You would take everything between (not including) the <header> and </header> tags and put it in tpl_header.php in the area where the logo was. You will need to change hrefs to full web addresses, and either put the images in the ZC /images/ folder or expand those to full URLs.

<a href="archives.html"><img src="images/pdf.jpg" .../>

<a href="http://www.fc4x4q.com/archives.html"><img src="http://www.fc4x4q.com/images/pdf.jpg" .../>

You will also need to add the relevant style rules from your main site stylesheet to your Zen Cart stylesheet. You can get these, if you don't already have them, by installing Firefox and its Firebug extension, and viewing the CSS. Right-click, Inspect with Firebug will show all the rules that apply to any element you select. Other browsers also have developer tools which you may use if you know how.

[AlexThibo]

Thanks gjh42. I gave it a try and it helped but I still have some problem with the fact that even if I place the code at the top of tpl_header.php it's still in the frame. I'm used to work with old html and table from old school but I have to learn how to work with <div> tags, css and php. I can't see how to put the top of the website out of the table... And I can't figure how to import what I need from the original website stylesheet (style.css) to the zencart one (stylesheet.css)...

Here's where I am now... : http://fc4x4q.com/boutique

[gjh42]

You don't currently have any of the main site header code in your Zen Cart header. Put it in just after <div id="headerWrapper">. Don't worry about the details of backgrounds and borders yet, just get the content showing. CSS can adjust the appearance of elements.

[AlexThibo]

It's because I removed it to try something else yesterday evening. I made a new page called boutique.php and I called the index.php as an include inside of it, under the menu. It worked but I get a gap that I can't remove.Here's a printscreen of what it gaves me.



It's almost what I'm trying to get but I don't think it's the good way to do it. But I'll leave that aside and I'll try again to do it as you say.

So, I added the main site header code in the header right after <div id="headerWrapper"> as you said. http://fc4x4q.com/boutique

I tried to add some code to the stylesheet from the one from the website. Not sure I did it right or add all the code I need... And the logo is not apearing either.