WordPress.org

1. ElninoM715
   Member
   Posted 2 years ago #

   Hello,

   Can anyone help me to crop the Pyrmont V2 footer so that it is centered like the rest of the theme? Here's a link to a page on my dev site so you can see what I'm talking about:

   http://hurricanecomp.com/dev/?p=8

2. Gerald
   Member
   Posted 2 years ago #

   Just add this to your style.css

   #footer{text-align: center;}

3. nsathees
   Member
   Posted 2 years ago #

   .footer_wrapper {text-align: center;}
   place this line in your style.css file

4. ElninoM715
   Member
   Posted 2 years ago #

   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.

5. Gerald
   Member
   Posted 2 years ago #

   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;}

6. ElninoM715
   Member
   Posted 2 years ago #

   Thanks... that did the trick! :)

   Now is there any way to round the corners so it looks more like the main navigation bar?

7. ElninoM715
   Member
   Posted 2 years ago #

   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?

8. ElninoM715
   Member
   Posted 2 years ago #

   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 */

9. Gerald
   Member
   Posted 2 years ago #

   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..

10. ElninoM715
    Member
    Posted 2 years ago #

    Nice! Thanks again for all the help. I think we can call this thread resolved. :)

Topic Closed

This topic has been closed to new replies.