Jump to content


Photo
- - - - -

Full Width Branding, Nav And Footer


Best Answer James B , 08 December 2012 - 03:34 AM

Hi, the code to put the site too full width at 100% is below, paste that into Pagelines>site options>custom code. The way you've used the css to apply negative margins to the areas you want to bring out is the correct way.

 

 
#site .content, #footer .content {
    width: 100%;
}

Welcome to Pagelines :-)

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 08 December 2012 - 02:52 AM

I upgraded from Platform Pro to Pagelines 2.0 because I was under the impression there was an easy drag & drop way to make just the header (branding and nav) full width, while the rest of the site is not full width. I thought that's what "Full Width Sections" was supposed to be about, but I still am unable to get this to work. I've looked at every forum article that has tried to address this question, and nothing has worked for me. Here's what I need to be able to do:

 

Branding: 100% Width

Nav: 100% Width

Content: Approx 75% Width

Footer: 100% Width

 

 

What's the simplest way to do this?

 

Thanks for your time!

 

 



#2 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 08 December 2012 - 03:07 AM

Also, the layout dimension editor only allows 95.7% width. Is it possible to make it a full 100%? 



#3 James B

James B

    Advocate

  • Members

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

Posted 08 December 2012 - 03:16 AM

Hi there, have you got a url we can take a look at just to see what you have setup in the layout/sections etc.

 

All the sections will be full width if you've selected that in the layout editor. By full width it means the container holding the section content goes to the edge of the page, so if you applied a background color using css to that section it will go right up to the edge of the page. The content can be stretched right up to 95% as there will be padding/margins on the content, you can remove that with css and set the site to 100% width.

 

If you zap us a link to the site we'll take a look for you, let us know exactly which bits inside those sections you're looking to go full width or edit to make sure we're looking at the correct bits.



#4 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 08 December 2012 - 03:18 AM

Here's what I've come up with: 

Please Login or Register to see this Hidden Content

 

What I did was add a #content tag in the custom css with margin-left 10% and margin-right 10% to get the effect I wanted, but if there's a better or more obvious way to do this, please let me know! I'm a noob.

 

Thanks.



#5 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 08 December 2012 - 03:20 AM

Also, how _would_ I use CSS to make the site 100% width? What's the tag for that? Thanks.



#6 James B

James B

    Advocate

  • Members

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

Posted 08 December 2012 - 03:34 AM   Best Answer

Hi, the code to put the site too full width at 100% is below, paste that into Pagelines>site options>custom code. The way you've used the css to apply negative margins to the areas you want to bring out is the correct way.

 

Please Login or Register to see this Hidden Content

Welcome to Pagelines :-)


  • thomstark likes this

#7 thomstark

thomstark

    Super Member

  • Members

  • 147 posts
  • Framework Version:Pagelines 2.37
  • Country: Country Flag

Posted 08 December 2012 - 03:35 AM

Terrific! Thanks for your help.