WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven Theme - Space Between Banner and Post (23 posts)

  1. BigBirdy
    Member
    Posted 2 years ago #

    Running WP 3.2.1 and Twenty-Eleven 1.2. Trying to reduce the space between the Navigation Bar/Menu (black) and the title/start of a blog posting. Can someone steer by to the correct setting in the style sheet to reduce this space?

    Here is what I mean:

    http://www.philosopherscafe.ca/2011/06/universalglobal-ethics-is-there-such-a-thing-what-would-they-look-like/

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  3. BigBirdy
    Member
    Posted 2 years ago #

    Of course, already did that. But thanks for the reminder. :)

    Have various other css changes already in the style.css for the child-theme, just stuck on that spacing and then of course the messed up tables which seems to be more related to image handling. I just created a sample post without a table, just an image and with the text to the right. But once again, almost the same behavior, the text (after first line) gets pushed below the image for some reason, although it looks fine in the editor.

    That sample post is on the home page.

    http://www.philosopherscafe.ca/

    Thanks for your help :)

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Try changing padding: 4.875em 0 0; to padding: 0;:

    .singular .hentry {
        border-bottom: medium none;
        padding: 4.875em 0 0;
        position: relative;
    }
  5. BigBirdy
    Member
    Posted 2 years ago #

    Thanks kindly! That certainly moved it up a bit, but not all the way. Can there be something else, like padding around the topic titles which is still pushing it down?

  6. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    The page navigation at the top of single posts also has some padding which could be reduced to padding:0;.

    #content nav {
        clear: both;
        overflow: hidden;
        padding: 0 0 1.625em;
    }
  7. BigBirdy
    Member
    Posted 2 years ago #

    Thank again! Unfortunately it did not make any difference. But now that I have you here, any chance you might have an idea as to how to get a table correctly formatted?

    I am trying to create a nice, simple tight block of text next to an image, but no matter what I have tried, even though the table looks fine in the editor, its messed up on the page. Even when I dont use a table, and just insert an image, only the first line of text remains next to the image and all the rest gets pushed below?

    Ideally I would like to create something that looks like this

    http://www.philosopherscafe.ca/Capture.PNG

  8. rkblack
    Member
    Posted 2 years ago #

    Hey guys I am having the same issue as the OP, with WP v.3.2.1 & 2011 v.1.2. For the life of me I can't significantly reduce the whitespace between the navigation bar and the page title.

    I know my way around CSS fairly well, but I've only been able to reduce the space by about 10px so far, with another 70px or so more to go. Nothing I've tried has worked, and I've been through the entire style sheet several times, tweaking dozens of settings in Dreamweaver and viewing locally, as well as trying to identify the problem attributes in dev-mode in Safari to no avail.

    Any other ideas as to how to reduce the whitespace? In the attached image the red line represents the gap I want to significantly reduce.

    http://marketvisionmedia.com/bigspace.jpg

  9. BigBirdy
    Member
    Posted 2 years ago #

    Hi there rkblack. Actually our issues are slightly different. I have been able to reduce the spacing between the nav-bar and the PAGE titles (about, home, contact etc) with this (in a custom style.css child-theme)

    .singular.page .hentry {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    }

    .singular .hentry {
    border-bottom: medium none;
    padding: 0;
    position: relative;
    }

    Where I am having a problem is with the space between the nav-bar and a POST title, like on this page:

    http://www.philosopherscafe.ca/2011/06/universalglobal-ethics-is-there-such-a-thing-what-would-they-look-like/

    Have you been able to reduce the space between the nav-bar and POST titles?

  10. rkblack
    Member
    Posted 2 years ago #

    Thanks for the tip BigBirdy. Your code reduced the space significantly, down to about 60px. I then added the value

    margin-top: -30px;

    onto both entries, which gave me the perfect spacing I was looking for by moving it up even a little higher. Thanks for the help!

    As far as spacing on post titles I can't help you there, since this site I am making is only static pages, I am not doing a blog component on it, thus no post pages, only page pages.

  11. BigBirdy
    Member
    Posted 2 years ago #

    Glad to hear it worked rkblack! I also added your suggestion, but as -15px and now I have used up a bit more of that space as well! Together looks like we both solved that part of the problem! :) Thanks.

    Now I just need to figure out:

    1: How to remove "Featured" from the sticky post on the home page.

    2: Those darned table issues! Just cant seem to figure this one out and it really messes up the posts. They look fine in the editor and even trying to create them without a table, just an image/text, everything past the first line gets pushed below a head-shot!

    3: White space between nav-bar and POST titles

  12. neyv
    Member
    Posted 2 years ago #

    Great info, exactly what I am trying to do! My only question is that I can't seem to find where I would go to make the change.

  13. rkblack
    Member
    Posted 2 years ago #

    @neyv Look in the /wp-content/themes/twentyeleven/style.css file. You can edit it with any basic text editor. If you're not familiar with CSS you may want to save a backup copy of the CSS file before you make any changes, so you can restore the default code if you accidentally mess something up.

  14. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    please - don't edit Twenty Eleven directly - read again: http://wordpress.org/support/topic/twenty-eleven-theme-space-between-banner-and-post?replies=13#post-2218056

    a fully functional default theme is needed in case of problems.

  15. neyv
    Member
    Posted 2 years ago #

    @rkblack I am working in a child-twentyeleven them. I am pretty familiar with CSS. Maybe I am blind, but I cannot find anything, anywhere that resembles:

    ".singular.page .hentry {"

    or

    .singular .hentry {

    Is this because it needs to be added? If so, where exactly?

  16. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

  17. rkblack
    Member
    Posted 2 years ago #

    @neyv: Just locate the stylesheet that your child theme is using, and append the code at the bottom.

  18. simi_id
    Member
    Posted 2 years ago #

    I've made a lot of test and to remove the space between the menu and the title page is just enough to add this code in a child style.css

    .singular.page .hentry {
    padding: 0;
    margin-top: -30px;
    }

  19. BigBirdy
    Member
    Posted 2 years ago #

    Can someone remind me which css code deals with showing the post/page author/date etc? After all my custom edits to a child theme, I must have forgoten to comment that code so cant find the right one

  20. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of work.

  21. Alex2240
    Member
    Posted 2 years ago #

    simi_id has got it. Thanks!

  22. ilyasou
    Member
    Posted 2 years ago #

    Thanks for this, very helpful.

  23. gernman
    Member
    Posted 2 years ago #

    HI, I'm having the same issue with the spacing and it all seems simple enough, however I've tried to follow the directions to create a child style theme and don't understand how to create a directory and all that. Is this something I do in windows explorer? I don't know and could use some assistance.

    Where do I get the files to do all this?

    Thanks a million!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.