Need help? Check out our Support site, then


Edit space between title and header with CSS

  1. I'd like to make the space between my blog title and the header image smaller on http://samboyd.co.uk

    Using my theme's original stylesheet as a reference, I've added this code to my stylesheet editor:

    #header {
    min-height:180px;
    padding-top:40px;
    padding-bottom:5px;
    width:800px;
    }

    If I increase the 'padding-bottom' value it increases the space in question with no problem. But if I enter a small value - like 5px as above - it won't go any smaller than how it looks at the moment. Is it something to do with the space for the tagline, which I don't need?

    Thanks for any help, I'm brand new to all of this!

    The blog I need help with is samboyd.co.uk.

  2. Try setting the height explicitly, even smaller and set the min-height value to match:

    #header {
        min-height:100px;
        height: 100px;
    }
  3. Oh, and welcome! I think your blog looks spectacular so far! I love your font choices.

  4. Fantastic, that did the trick.

    Thanks so much for the help, and the welcome. Glad you like the blog design, it's a work in progress!

    Would you perhaps know a way to get rid of that little shaded area beneath the title where my tagline would go? Not massively important, but if it was simple..

  5. Certainly. Try this:

    #site-description {
        display: none;
    }

    Consider keeping a liiitle more whitespace then you might normally (just an idea/opinion on that, but give it a try). :)

  6. You're extremely helpful, thank you very much! I'll have a play with some different spacings, thanks for the input.

  7. Cheers. :)

  8. Final thing whilst I have the attention of someone who knows a lot! - I'd like to test out slightly less space in between the lines of text in my posts. Secondly, do you know how I could edit the width of the column in which my posts appear? Many thanks again for your help.

  9. This controls the line spacing for the content on pages and posts.

    .hentry .main {
    line-height: 175%;
    }

    This can be a little tricky as the way the theme is designed, the header image will also have to get wider. Do you want to do that as well?

  10. Thanks a lot for that.

    Do you mean that changing the post column width will affect the header size? Yes I only really want to edit the column width of my posts, but if that means changing the header as well then I'll at least give it a try and see how I like it.

  11. If you just make the post column width wider, the title/tag area to the left of it has to be reduced in width (the two are constrained by an overall container div width), which means the "leave a comment" line is going to go to two lines (unless you were to reduce the font size. Same with the post title; it would have less space so it would stack more quickly to two or three lines.

    Since widening the header means that you can no longer use the header uploader, it will not link back to the main site page like it does now. The new image would be put directly into the CSS instead.

    There is a trick that can be used to do that that requires making a transparent image the size of the header (no background color) and saving it as a PNG image. You then put that image into a text widget in the bottom bar and link it to the site main page and then we would use positioning to move that image up and over the top of the header image.

    The following will increase the overall width to 1000px from the original 800px. I've changed the width to 100% for the content so that it will always maintain the maximum width no matter what width you enter into the container/header/menu width rule. Add this to the bottom of your CSS and see what you think and then if you want to continue, we can get the header stuff straightened out for you.

    #container, #header, #menu {
    width: 1000px;
    }
    
    .hentry .main {
    width: 100%;
    }
  12. I was only thinking of making the column smaller if I were to change it, so I think I'd avoid those problems with the header in that case.

    Thanks very much for your help, I'm new here and this forum seems brilliant for quick and helpful answers :)

  13. Sheesh, I'm so used to people all wanting to go wider that I just assumed, and you know what that does for me. :-)

    You can add this to the bottom of your CSS and play with the content width to see what you think:

    .hentry .main {
    width: 580px;
    }
  14. Perfect, thanks a lot!

  15. You are welcome.

  16. You could increase the left margin here by the same amount you reduce the width and it would keep things more centered.

    #contents {
    margin-left: 199px;
    }
  17. Oh, and one final thing. If you do reduce the width of the content area, decrease the "maximum video/image" width in the field down below the CSS text box by the same amount you decrease the width of the content area.

  18. Great, that's all very helpful - thanks!

  19. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic