Jump to content
audaciouscreate

Footer width in Full-Width Design Framework

Recommended Posts

audaciouscreate

Hi, This is my site: http://www.buyfloatationtank.com/ I want the twitter bar and the footer to sit neatly underneath the content area (960px wide) and not spread out across the whole width. I'm using the Full Width Design Framework so I can have no background on the content area. Please help as it's driving me nuts trying to figure it out. The only custom code I have in here is: body #page{background:transparent url(http://www.buyfloatationtank.com/wp-content/uploads/2011/11/newbackground5.png)} Thanks as always, Stu

Share this post


Link to post
Share on other sites
Kate
Hi Stu, Here's the code for the Twitter bar: [code]#twitterbar{margin-left:-1px;;width:979px;} #morefoot_area{width:980px;margin:0 auto;}[/code] For the footer: You can adjust the width of the footer "#footer{width:980px;margin:0 auto;}", but the black will remain because it's the background of the body. So, you'll have to decide if you want that image above to be on #page, or on the whole body.

Share this post


Link to post
Share on other sites
audaciouscreate
Brilliant. Thanks Kate. I sorted the footer out by deleting #page from the custom code and it worked a treat. Thank you. One final question (and if this isn't the done thing let me know and I'll post it separately): how can I now make the twitter bar and navbar transparent? Thanks again... Stu

Share this post


Link to post
Share on other sites
Kate
Hi Stu, For the Twitter bar, I believe it's just something like: [code]#twitterbar{background:none !important;}[/code] For the nav: Please try doing a search of the forum. There's been lots of posts on it. If you have trouble finding them, post back and we can go from there ;)

Share this post


Link to post
Share on other sites
kense
I have a slight variation on this request... I'd still like the footer to be a different colour to the background rather than transparent and showing the background, but only be as wide as the body of the site. I'm using the 'fixed width with canvas' option, as neither the 'full width' or 'fixed width' design options allow me to do this or have the rest of the site looking as I'd like it to. Can anyone assist? The site is: http://www.fleurdelys-lowsonford.com/

Share this post


Link to post
Share on other sites
Rob
Try this: [code]body, body.fixed_width { background-image: url('http://www.fleurdelys-lowsonford.com/wp-content/uploads/2011/10/background_fleur11.gif') !important; } .canvas #page, .full_width #page, body.fixed_width { background-image: none !important; } #footer { background: #1F1F1F !important; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kense
Beautiful! Thanks rangelone. #Edit > Any idea why I can't translate this across to my other PlatformPro site? Having changed the background url to the relevant background, it still won't quite work... The canvas background seems to be now going the full width of the screen rather than just the canvas width... Works fine on the first site though. http://kense.co.uk

Share this post


Link to post
Share on other sites
kense
Scrap that, I forgot to include the original work-around from Kate... It's all working now.

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


×