Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Edit space between title and header with CSS

  1. smb555
    Member

    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. designsimply
    Staff

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

    #header {
    min-height:100px;
    height: 100px;
}

  3. designsimply
    Staff

    Oh, and welcome! I think your blog looks spectacular so far! I love your font choices.

  4. smb555
    Member

    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. designsimply
    Staff

    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. smb555
    Member

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

  7. designsimply
    Staff

    Cheers. :)

  8. smb555
    Member

    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. thesacredpath
    Member

    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. smb555
    Member

    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. thesacredpath
    Member

    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. smb555
    Member

    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. thesacredpath
    Member

    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. smb555
    Member

    Perfect, thanks a lot!

  15. thesacredpath
    Member

    You are welcome.

  16. thesacredpath
    Member

    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. thesacredpath
    Member

    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. smb555
    Member

    Great, that's all very helpful - thanks!

  19. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags