WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
Change space below header on Pages (Twenty Eleven) (15 posts)

  1. Gregory Gainsborough
    Member
    Posted 1 year ago #

    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

  2. Mohd Rafie
    Member
    Posted 1 year ago #

    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;
    }
  3. Gregory Gainsborough
    Member
    Posted 1 year ago #

    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.

  4. Mohd Rafie
    Member
    Posted 1 year ago #

    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 :)

  5. Gregory Gainsborough
    Member
    Posted 1 year ago #

    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

  6. Mohd Rafie
    Member
    Posted 1 year ago #

    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.

  7. jamiepoindexter
    Member
    Posted 1 year ago #

    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?

  8. jamiepoindexter
    Member
    Posted 1 year ago #

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

  9. Gregory Gainsborough
    Member
    Posted 1 year ago #

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

    Greg

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  12. Gregory Gainsborough
    Member
    Posted 1 year ago #

    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.

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    little padding is nice after all.

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

  14. jamiepoindexter
    Member
    Posted 1 year ago #

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

  15. Eve Alexander
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.