Jump to content


Photo
- - - - -

Header and Footer expansion customizations

Header Footer Customization Full Width Responsive Expanded

  • Please log in to reply
3 replies to this topic

#1 casseysdesigns

casseysdesigns

    Newbie

  • Members

  • 4 posts
  • LocationTexas
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 18 May 2013 - 05:50 PM

Hi All,

 

I currently have a portfolio website that I am rebuilding with wordpress+pagelines. I want to keep the overall design and just upgrade my graphics and capabilities. 

 

This is my current site :

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  121.02KB   7 downloads

 

This is my wordpress site :

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  156.75KB   6 downloads

 

I want to have the header and footer background expand across the entire page no matter what size... I would like the content of the header and footer to remain within the content area (This is how I have it set up on my current website via css)

 

The problem is that even using developer tools and updating my style.css in my child theme the parent theme (pagelines) is overriding my styles and I can't get the header and footer bgs to extend. I tried a bg img that has a black bar across the top as a "fix" but it doesn't solve the problem for the footer and it doesn't respond the way I want it to on different sized screens. 

 

Any help would be greatly appreciated! If you need more information to assist me please let me know!

 

Thanks,

Cassey



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2013 - 06:47 PM

Cassey,

 

This couldn't be easier.

 

For a header background area, create an image more than 1980px wide, by the height you want the background to appear.

 

Go to Dashboard > PageLines > Site Options > Color Control.  Upload the image. Set the vertical alignment to 0 and the horizontal to 50 and repeat to no repeat. Save the settings.  Your background will now be full width.  If you have a narrower image you want tiled, set the background to repeat horizontally.

 

For the footer, you need to use CSS. You can see an example of that by using Firebug for Firefox or Chrome's Inspection Tool and visiting the footer at www.epicurus.com.



#3 casseysdesigns

casseysdesigns

    Newbie

  • Members

  • 4 posts
  • LocationTexas
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 18 May 2013 - 07:02 PM

Hi Rob, 

 

Thank you for your response. I am aware that I can technically use the background image to create my header section. However, I do intend to use a background image for the whole site. I want to use my image specifically for the header area. 

 

I have visited 

Please Login or Register to see this Hidden Content

 and looked over the stylings used to create the effect (which is what I am looking for) and I think I will be able to use this approach (or my alteration of it) for both the header and footer.  

 

Thank you very much for your help!

Cassey



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2013 - 07:38 PM

You're very welcome.

 

While you're there, grab a recipe! Make a cocktail! Join the Discussion forums! (BTW, that's my site).







Also tagged with one or more of these keywords: Header, Footer, Customization, Full Width, Responsive, Expanded