Jump to content
casseysdesigns

Header and Footer expansion customizations

Recommended Posts

casseysdesigns+    2
casseysdesigns

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 : http://casseysdesigns.com

 

post-49664-0-33350000-1368899417_thumb.p

 

This is my wordpress site : http://casseysstudioofdesigns.com

 

post-49664-0-39307200-1368899424_thumb.p

 

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
casseysdesigns+    2
casseysdesigns

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 http://www.epicurus.com/ 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

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're very welcome.

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
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


  • Similar Content

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
    • kwaoru
      By kwaoru
      Hi,
      I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. 
      I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... 
      Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app.
      Seems like not compatible?
      If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch?
      I have been searching for this for two days already...
      Could anyone wise and kind out there, please help me?
       
      Thanks,
    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
×