Jump to content
Sign in to follow this  
abunge

Changing the canvas and footer

Recommended Posts

abunge

Hi, I'm not even sure if my request is possible, but it's worth a shot! I'm using full-width design with canvas, and would like to make the footer the same width as the canvas; allowing for the page color to fill those new sides. Also, I'd like the canvas to start just below the navigation, but above the feature slider. This way the page color fills behind the logo and navigation. Here's a screenshot to help describe what I'm looking for... Screenshot.png My website is at new.aaronbunge.com Any help is much appreciated, thanks!

Share this post


Link to post
Share on other sites
catrina

This way the page color fills behind the logo and navigation. Here's a screenshot to help describe what I'm looking for... <- Just to make sure I'm understanding correctly: you would like the header to be the same light grey used for the page background?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catrina

Add this CSS:

#branding div.texture, #primary-nav div.texture {background: none;}

It will make the header background transparent.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
abunge

Added CSS, with no effect. This is all of the custom CSS I have so far: body {padding-top: 0px;} #nav_row.main_nav {border-bottom: 0px;} #header #branding .content-pad {padding: 0px;} #header #branding .content-pad {padding-bottom: 10px;} #branding div.texture, #primary-nav div.texture {background: none;}

Share this post


Link to post
Share on other sites
abunge

Still no effect. Added below "start your custom css here"

Share this post


Link to post
Share on other sites
kastelic

Try setting it to

#F6F6F6
instead of
 none

.

Share this post


Link to post
Share on other sites
catrina

Your website is currently password protected. Can you make the website public again?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
abunge

It's available again. Header is working perfectly now, must have just needed some time. Any suggestions on the footer?

Share this post


Link to post
Share on other sites
catrina

Set the page background color to none in Design Control. Add this CSS to your base.css file:

#footer {background-color: #xxx;}

Replace the hex code with the brown color you want to use for the footer.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
abunge

It's still coloring in the entire footer. Is there a way to set width restrictions?

Share this post


Link to post
Share on other sites
kastelic

Now that you know how to set the background of an element, you should be able to use the Firebug inspector to find which elements you need to apply the background color to. I think if you set the

#footer
to
#F6F6F6
and then set
#footcols
to
white

, you should be good.

Share this post


Link to post
Share on other sites
abunge

Thanks, I was able to apply a background color to the footer. However, the text rests right up against the color box. I was able to change it by inputing: #site .content, .wcontent, #primary-nav ul.main-nav.nosearch {width: 980px;}, instead of 960. But, because it is dynamic it change back to the original 960. I can't seem to be able to find a solution, any ideas?

Share this post


Link to post
Share on other sites
cmunns

apply a padding to the #footer instead. `#footer .copy-pad {padding:10px;}` Something like that, might have to play with it a little.

Share this post


Link to post
Share on other sites
abunge

Hmm, nothing seemed to change. Better give it a day and see if it takes??¦

Share this post


Link to post
Share on other sites
Kate

Hey Aaron, Something like this should work:

#footer .content-pad{float:left;width:980px;padding:10px !important;margin-left:-10px;}
	
	#footer #fcolumns_container{float:left;width:980px;}

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

Sign in to follow this  

×