Jump to content


Photo
- - - - -

Header and Footer to fit whole Webpage

Header Footer Wholepage width

Best Answer batman , 30 April 2013 - 09:22 PM

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/

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 JamesW

JamesW

    Super Member

  • Members

  • 189 posts
  • LocationNewbury
  • Framework Version:Developer Plus Membership
  • Country: Country Flag

Posted 30 April 2013 - 08:56 PM

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



#2 batman

batman

    Bat Learning

  • Members

  • 2111 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 30 April 2013 - 09:22 PM   Best Answer

Hi James

If you want something like

Please Login or Register to see this Hidden Content

 

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)

 

Please Login or Register to see this Hidden Content

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 

Please Login or Register to see this Hidden Content

 

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

and check out W3 Schools for more info. 

Please Login or Register to see this Hidden Content


  • suzyo likes this

#3 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 April 2013 - 10:29 PM

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

 

Thanks Batman :-)



#4 JamesW

JamesW

    Super Member

  • Members

  • 189 posts
  • LocationNewbury
  • Framework Version:Developer Plus Membership
  • Country: Country Flag

Posted 01 May 2013 - 08:11 AM

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



#5 JamesW

JamesW

    Super Member

  • Members

  • 189 posts
  • LocationNewbury
  • Framework Version:Developer Plus Membership
  • Country: Country Flag

Posted 01 May 2013 - 10:46 AM

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







Also tagged with one or more of these keywords: Header, Footer, Wholepage, width