Archived

This topic is now archived and is closed to further replies.

  • 0

Header and Footer to fit whole Webpage


Question

Posted · Report post

Hi to all,

 

I've been busy learning basic CSS / HTML / Wordpress and Pagelines etc for only a couple of weeks so forgive me if these are simple questions. I have created a 'Home Page' using the 'Base Theme' and I'm at a basic level now where I'm adding simple CSS to change the look of my site. However, what I really want is a 'Header' and 'Footer' at the top of the page that fits the entire width of the page.

 

For the background of the 'Header' & 'Footer' I wanted to use an image which will be created using P'shop (j-peg file).

 

I'm going to be taking a look into this soon but I wanted to ask here first incase someone has any advice or tips in achieving this? I don't want to complicate things too much as it's a clients site I am working on so hopefully I can keep the coding simple until I'm more familular with editing/adding CSS.

 

Thanks for any help on this. I have also mocked up a rough example that demonstrates what I mean in-case I am unclear?

 

Kind regards,

 

James W

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Hi James

If you want something like

http://arte-baires.com.ar

 

First I use in Layout editor 

Layout Handling > Responsive with Pixel Width

Site Design Mode > Full-Width Sections

 

 

Then you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

header.container-group 
{background-image: 
url(http://YOUR IMAGE.jpg);}


#footer 
{background-image: 
url(http://YOUR IMAGE.jpg);}

My exemplary code is not necessarily applicable as written, to your site, so please adjust accordingly.

 

It is advisable to learn how to do this on your own too.  

 

Check out 

http://support.pagel...ion/custom-css/

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

http://www.w3schools.com/

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hey James, let us know if the above works for you.

 

Thanks Batman :-)

Share this post


Link to post
Share on other sites

Posted · Report post

That's great and thanks very much for all the help with this! I'll take a look today and I'll see what I'm able to come up with?

 

Cheers,

 

James

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Batman,

 

Your code has worked but I'll need to do a few tweaks to get things looking right. One thing is the '#page .content' is convering the image that I appalied as the header so I am at present trying to add some sort of padding/margin to fix this issue. I am just gonna continue playing for now to see if I can get things looking right...

 

Cheers, James

Share this post


Link to post
Share on other sites