Support » Theme: Twenty Eleven » Change space below header on Pages (Twenty Eleven)

  • Hello, I’m new to WordPress. Using twenty eleven, I’ve got a basic site up and have been reading the codex and following tutorials to make simple modifications. I know just a tiny bit of CSS and no PHP.

    What I’d like to do now is reduce (or remove) the space *below the header* and *above the content* on my pages. If you visit my site:
    http://www.gregorygainsborough.com
    … you can see that on most pages there is about an inch of extra blank space there. The exception is the ‘sketchbook’, which is where my posts are – but I’m happy to leave that alone for the moment.

    One thing I did was look at what was going on with firebug. Using the element inspector, I found blue rectangles in about four different locations. But I really don’t know how to functionally use that information to change what is going on…

    Anyway – any help would be appreciated! Thanks for your time,
    Greg

Viewing 14 replies - 1 through 14 (of 14 total)
  • Since you’re new with WordPress. I suggest that first of all you install the plugin called Jetpack for WordPress – http://jetpack.me/

    Then, activate the Custom CSS features – http://jetpack.me/support/custom-css/

    Add this CSS to reduce the size of the padding:

    .singular.page .hentry {
    	padding-top: 0px !important;
    }
    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    Thanks! I had not noticed the jetpack CSS feature. That gives me something good to play with.

    I added that code in my child theme’s style.css … it took of a lot of padding. Cool. I noticed that you can add extra padding pixels… but is there any way to get it all the way flush against the header?

    That probably wouldn’t look good, but it’d be nice to know how to do it.

    Hi there,

    There could few other things that result the spacing, e.g. padding and margin. Padding and margin can be set for every elements for example the header.

    Case: Since header is available across the site, if I want a gap of 20px below the header, I can set header to have margin-bottom: 20px;

    If you want to learn more, we have an article called CSS Troubleshooting.

    But if you’re more of a visual person you can watch this video on using Chrome to “Inspect Element” and edit the CSS code.

    But you have to copy the CSS you add or remove on to your website ie the style.css or the Jetpack custom css.

    Let me know if it works and if all is good, it would be awesome if you can mark this as resolved for the benefit of others 🙂

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    Ok, thanks. I will see if I can find the section in the header that applies to that…

    I’m at the stage right now where I can’t figure out how to connect the information in Firebug to what’s going on in the actual files. From a newbie perspective, there’s just a lot of info and even though TwentyEleven is supposed to be a basic theme, it’s pretty darn complicated.

    One thing that might help would be if you know me file and line numbers (for example, which line numbers in the twentyeleven’s default header.php or style.css file apply to this… ?)

    I realize that that is what firebug tells me, but I just haven’t figured out how to connect the dots yet.

    Thanks,
    Greg

    Hi there,

    I think you miss this part:

    But you have to copy the CSS you add or remove on to your website ie the style.css or the Jetpack custom css.

    You have to copy the CSS changes you made and paste it on your style.css for it to happen.

    What Firebug and Inspect element provide is for you to edit the CSS live, but it is only to guide you to debug. It doesn’t change the CSS file, you still have to edit your style.css yourself.

    In the “header” section of style.css, I played with “padding-bottom” and “margin-bottom”. I successfully changed the distance or negative distance between the header (my banner.jpg) and the horizontal black navigation bar.

    However, I was unsuccessful in changing the vertical distance (decrease the white space) between the navigation bar and the content of my static pages.

    My URL is http://jamiepoindexter.net/WP2/ in case it helps anyone to see what I am describing. That’s a lot of white space between the navigation and the content.

    What do I need to change in style.css to reduce this space?

    P.S. I am using Dreamweaver to edit the css file.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    My question exactly Jamie! Please let me know if you figure something out.

    Greg

    Add this to the CSS:

    .singular.page .hentry {
        padding: 0;
    }
    
    #main {
       padding: 0;
    }

    The best tool for working with CSS is Firebug — shows you exactly the CSS that is affecting an element on the page.

    Both of you be very sure that you are not changing theme files directly — use the Custom CSS plug-in or a child Theme.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    Thanks Yogi! That cut off about half the padding below the menu bar for me.

    I found I could get rid of *almost* all the rest of it with this line:

    .entry-content, .entry-summary {
    padding: 0em 0 0;
    }

    … but chose not to use it because a little padding is nice after all.

    little padding is nice after all.

    Hmm, that could apply to a number of things :)! But good job on the sleuthing.

    Thanks WPyogi! My pages now look better, exactly how I wanted them.

    I’m modifying theme files directly. What is the problem with that?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Change space below header on Pages (Twenty Eleven)’ is closed to new replies.