Full Width Header and Footer

[roosteromg.com]

I was wondering if anyone had a straight forward way of creating a full-width footer similar to the method used for the header from this blog post http://blog.whmcs.com/?t=46403 ,which is by commenting out a portion of the whmcs.css file?

 

Thank you for your time.

[roosteromg.com]

I just thought I would post the solved full-width footer here for everyone's benefit. Having full width capabilities will help customizing your template to match your site...so here it is.

 

1. Go to http://blog.whmcs.com/?t=46403 and comment out the line shown if you want full-width headers...not necessary for full-width footer, but why not have the flexibility of both...just my opinion.

2. Open footer.tpl and move <div class="footer"> outside of the <div class="whmcscontainer"> - what this does is keep the footer copy inside the 960px centered div, while the .footer class is now outside and defaulted to full-width.

3. If you followed step one for the full-width header, you'll need to add .whmcscontainer {background-color: #fff;} back in since it was commented out. This insure that if you add a color to the body or .footer class's the 960px container will always be white.

 

Where's the "easy button" when you need it...

 

- - - Updated - - -

 

One more addition. If you add .whmcscontainer {background-color: #fff;} back in, it will change all the .whmcscontainer backgrounds, but if you want to just target the footer container, do this .footer .whmcscontainer {background-color: #fff;} - this will target the container inside the footer div only. Likewise if you just wanted to target the header background container, it would look like this #whmcsheader .whmcscontainer {background-color: #fff;}

 

Have fun!!

Edited July 31, 2013 by roosteromg.com

[roosteromg.com]

OK, another tweak update.

 

So you've done the steps above and you added a background color to your .footer class, but you have this footer area that has color, but the body background color is below it (white by default)...well here is a fix to separate all the areas so you can style them separately....this assumes you've done the steps listed above the thread.

 

1. give the body class a background color; it's white by default so just change it to something else so you can visually see the changes and can confirm your changes are taking affect. as you can see..if the background is different than your .footer color, that it blends everything together and even makes the main content area color the same...step 2...

2. change the .contentpadded class to #fff. Now your main content area is defined but what about the body are below the footer...step 3

3. Open your header.tpl file and right above <div class="whmcscontainer"> on line 158 add <div class="contentouterwrapper">...step 4

4. Open footer.tpl and add a </div> anywhere between lines 4-7 with the existing two closing divs...step 5

5. In your whmcs.css file, add a new class for the wrapper div .contentouterwrapper and give the background a completely different color...step6

6. save and refresh your page...you should see all the areas individualized and able to be targeted individually.

 

Just remember, the body background you specify in step one, becomes the bottom of the footer are, thus giving the impression of a full sticky footer; the contentwrapper div you created allows you to add a different background above the body.