Twenty Eleven: Editing Headers and Footers

Use Firefox. Then download FireBug to troubleshoot things. It will help you determine what is going on with the code.

Look at this line of code in your CSS

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

It means you have a padding-top of 1.625em which is adding that extra white space, a padding-right of 0px, a padding-bottom of 0px and then the padding-left is not defined but assigned 0px in this case. Try

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

For CSS regarding that horizontal grey line you want to remove, it’s actually a ‘border-top’ defined in CSS for your #site-generator div.

#site-generator {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #DDDDDD;
    color: #666666;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
}

Forget all the rest of the stuff besides the border-top line. Just change the border-top line to:

border-top: 0;

Or you can remove the line all together, so you have:

#site-generator {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #666666;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
}

Thank you! The solution for the footer definitely worked… unfortunately the header issue did not, unless I didn’t do it correctly… One thing I was unclear on was WHERE in the CSS do I make that adjustment?

Whoops, sorry, my bad.

#main {
    clear: both;
    padding: 1.625em 0 0;
}

Try editing that.

And then more whitespace is created by this line:

.singular.page .hentry {
    padding: 3.5em 0 0;
}

I’ll reiterate, get the FireBug plugin for Firefox. It will help you quickly identify what CSS you need to edit to adjust these things.

@ryanvantuyl – you should not be making any changes to the theme files directly — as your changes will be overwritten and lost when WP is updated. Instead you should be using a Child Theme or custom CSS plugin such as jetpack.

He’s right. If your theme allows an area for ‘custom css’ to be entered, enter the lines above in this area. This will override the main style sheet. Otherwise, yes, your changes will be overridden when you update things.

I’m not a he, thank you :). Twentyeleven does not have built-in custom CSS, but it is easy to install a plugin to add that. But it’s definitely not a good idea to change theme files, especially in a default theme.

Thank you both.
@waterworks would you mind defining for me where in the CSS that I can find those specific lines. And also, editing them each to what exactly? I’m not experienced at this at all, so thanks for the extra guidance. Thank you.
@wpyogi – Thank you, was going to create that child theme next. Will do it!

Whoops! My bad WPyogi. I should not have assumed he or she. It was unwise of me and I apologize. Lesson learned ??

Creating a child theme should be done BEFORE you make changes to theme files — otherwise you will have to manually find and redo all the changes you have made. You should not copy the entire style.css into the child theme — only the changes go in there. You are making a ton more work for yourself doing it backwards ?? .

You should read up on CSS a little to understand things a bit more:
https://www.w3schools.com/css/css_intro.asp

Then read up on jet pack.

Go to back-end.
PLUGINS > …
Click on SETTINGS for JETPACK plugin.
Scroll down until you find CUSTOM CSS.
Click on LEARN MORE.
Click on EDIT CSS.

Before you can do this though, you need: “To enable all of the Jetpack features you’ll need to connect your website to WordPress.com using the button to the right. Once you’ve made the connection you’ll activate all the delightful features below.”

Woah… this all just went way over my head. I really appreciate all of your help. But I’m really just hoping to find out how to change those two issues on this single page site. On a bit of a timeframe, so hoping to just get some quick instruction on what exactly to change, then I’m really looking forward to reading up about all this stuff, as I have two other sites that I pay people to manage, and would rather do it myself. For this one though, any possibility of just telling me what I can do? I did connect/authorize the jetpack custom css feature. Can you tell me what to type in there? Or paste?

Thank you so much! Help much appreciated!

We gave you the instructions above. Use the JETPACK plugin to accomplish this.

Add this CSS and it should override the default style sheet.

#main {
    clear: both;
    padding: 1.625em 0 0;
}

.singular.page .hentry {
    padding: 3.5em 0 0;
}

You need to change the [ 1.625em ] and the [ 3.5em ] to your liking. Smaller numbers mean smaller whitespace. For understanding what ’em’ means vs. px (pixels), see here: https://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/

Then hit refresh on the front-end so you can see your changes.

If you’re on an extreme time constraint and this is really over your head, you might consider hiring one of your existing guys to make the edit. Would take them 4 minutes at the most.

awesome. Thank you so much. Will do.