WordPress.org

Ready to get started?Download WordPress

Forums

How do I change the header padding without changing the footer padding (10 posts)

  1. Tweenman
    Member
    Posted 7 months ago #

    Hello,
    I found a forum link which partially solves my problem using this code:

    #wrapper {
    background: #FCFCFC;
    margin-top: 0px;
    padding: 0 20px;
    }

    How do I change the header padding without changing the footer padding?

  2. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    No way to answer CSS questions without seeing your site.

  3. Tweenman
    Member
    Posted 7 months ago #

  4. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    What are you trying to do? You can't change the #wrapper padding on only one contained element.

  5. Tweenman
    Member
    Posted 7 months ago #

    I want to remove the white space to the left and right of the header. This works:
    http://www.throwingabrick.com/wordpress/customizing-the-wordpress-twenty-ten-theme.html

    #branding img {
    border-top: none;
    border-bottom: none;
    }
    #header {
    padding: 0 0 0;
    }

    But when the white space on either side of the banner is gone the text in the outer footer widgets is right along the edge of the red background (no padding).

    If this isn't possible, then how to I widen the whole site by about an inch on both side?

  6. esmi
    Forum Moderator
    Posted 7 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  7. Tweenman
    Member
    Posted 7 months ago #

    I have been using Firebug for the past week, trying this and trying that. Is there a link that explains the basics of
    manipulating the layout?

    Also, Firebug is annoying it's like trying to drive a car while looking through a keyhole. Is there someplace specific I should be looking at through this keyhole?

  8. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    Try:

    #wrapper {
        padding: 0 !important;
    }
    
    #footer-widget-area {
       padding: 0 20px;
    }
    
    #footer-widget-area .widget-area {
        width: 210px;
    }
    
    #site-info {
        margin-left: 20px;
    }
  9. Tweenman
    Member
    Posted 7 months ago #

    Thank you. I tried this, but somehow I mangled it:

    #footer-widget-area .widget-area {
    width: 210px;

    Thanks again, this really helps my bearing.

  10. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    Looks good to me - what doesn't look right to you? Try clearing your browser cache.

Reply

You must log in to post.

About this Topic