Jump to content

How to make the header and footer wider than the #Page width?


Recommended Posts

Hi

I'm trying to modify the default theme and I'm stuck with trying to create a header and footer that are wider than the #page width. I.e. Trying to make the page width 980px and the header and footer 1100px.

What I thought was to keep the header and footer separate from the page section.

This is what I tried:

I changed the #header and #footer widths to 1100px and I left the #page width at 980px.

I then changed Header.tpl from:

><body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
   {if !$content_only}
</pre>
<ul>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</ul>
<br><div>

           <!-- Header -->

               <!--  -->

                   {$HOOK_TOP}





           <!-- Left -->

               {$HOOK_LEFT_COLUMN}


           <!-- Center -->

   {/if}
<



i.e. I moved the closing

tag (for the #page div) up so that it is before the footer.

My reason for doing this is so that the Header and Footer are not restricted by the #Page Div but when I do this I loose the #Page style settings. I.e. there's no background etc for the #Page div / block.

I'm new to Prestashop - can anyone help me with this please?

Thanks

Mr B
Link to comment
Share on other sites

  • 2 months later...

I am also new to prestashop maybe 2 days ago i found that system.

but the point is that, if you ever worked with Joomla you will come to the tag in most of the template what indicates the size etc. for your page.

I was thinking about your post and the answer is quite simple.( i didnt try it and i may be wrong)

you leave the page on top

and then you need to create inside the pages again pages or however you want to call it but you got to take other div ids than already in the CMS is used

for example you put the page width to 1100px

and then you need to configure your subpages in this page with the CSS

it would look then like this (only an example)



Inside your header with Css formated to width 1100 / 100%
Inside your content with for example 80 % width and centered
your footer with 100 % or 1100px width

Link to comment
Share on other sites

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...