WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Eleven: Editing Headers and Footers (15 posts)

  1. ryanvantuyl
    Member
    Posted 2 years ago #

    I have probably spent two hours on here now trying to do things on my site: http://www.suppercluboc.com

    1 - Remove the large amount of white space below my header image, so the top paragraph is more like a header or site description.

    2- Remove the thin gray line above my footer.

    I feel like I've tried all the solutions listed on here and none of them have made anything work or change.

    Thanks!

  2. waterworks2
    Member
    Posted 2 years ago #

    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;
    }
  3. waterworks2
    Member
    Posted 2 years ago #

    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;
    }
  4. ryanvantuyl
    Member
    Posted 2 years ago #

    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?

  5. waterworks2
    Member
    Posted 2 years ago #

    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.

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

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

  7. waterworks2
    Member
    Posted 2 years ago #

    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.

  8. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  9. ryanvantuyl
    Member
    Posted 2 years ago #

    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!

  10. waterworks2
    Member
    Posted 2 years ago #

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

  11. WPyogi
    Forum Moderator
    Posted 2 years ago #

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

  12. waterworks2
    Member
    Posted 2 years ago #

    You should read up on CSS a little to understand things a bit more:
    http://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."

  13. ryanvantuyl
    Member
    Posted 2 years ago #

    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!

  14. waterworks2
    Member
    Posted 2 years ago #

    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: http://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.

  15. ryanvantuyl
    Member
    Posted 2 years ago #

    awesome. Thank you so much. Will do.

Topic Closed

This topic has been closed to new replies.

About this Topic