Just add this to your style.css
#footer{text-align: center;}
.footer_wrapper {text-align: center;}
place this line in your style.css file
Thanks but all those did was center the text. What I want is to crop the width of the footer image so it doesn’t fill the whole screen. I would like the footer to be the same width as the main navigation bar.
I’ve tried changing
div#footer div.footer_wrapper{
width: 960px;
to
div#footer div.footer_wrapper{
width: 660px;
But that didn’t do anything either.
Change the style of your footer div to:
div#footer{width: 960px; margin: 0 auto;}
if you want to center the text, add text-align: center as well.
If the above doesn’t work, add a !important to the margin.
i.e.
div#footer{width: 960px; margin: 0 auto !important;}
Thanks… that did the trick! 🙂
Now is there any way to round the corners so it looks more like the main navigation bar?
Also, I like the text aligned to the right so I used your suggestion above and did
#footer{text-align: right;}
instead of centering it, but how do you add some padding to the right of the text to keep it away from the edge a little bit?
Here’s what the CSS for the footer currently looks like if this helps at all:
div#footer{
color: #666;
font-size: 12px;
text-align: right;
background: url(images/footer_bg.gif) repeat-x;
width: 960px;
margin: 0 auto;
}
div#footer div.footer_wrapper{
width: 960px;
margin: 0 auto;
padding: 12px 0;
position: relative;
}
div#footer div.footer_wrapper a{
color: #ff5a00;
text-decoration: none;
}
div#footer div.footer_wrapper a:hover{
color: #ccc;
}
/* END div#footer */
As for the background and padding:
div#footer{padding-right: 30px !important; background: url(http://hurricanecomp.com/dev/wp-content/themes/pyrmontv2/images/navi.gif) 30px 0 no-repeat !important;}
I used the background image in use for the header as the footer as well..
Nice! Thanks again for all the help. I think we can call this thread resolved. 🙂
