Jump to content
JawDesigns

Header and Footer to fit whole Webpage

Recommended Posts

JawDesigns    11
JawDesigns

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


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
batman    389
batman

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/

  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B    436
James B

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

 

Thanks Batman :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
JawDesigns    11
JawDesigns

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


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
JawDesigns    11
JawDesigns

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


James Wilson

Designer & Photographer

 

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

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



×