ThemeShaper Forums » Thematic

Reducing white space in header

(18 posts)
  • Started 10 years ago by chrisf
  • Latest reply from Chris
  • This topic is not resolved
  1. chrisf
    Member

    Is there a way to make the header and the accompanying white space not take up so much vertical space on the top of the page. By default it's almost 300 pixels from the top of the frame until you get to the first post. If possible, I'd like the first post to be higher up so the user doesn't have to scroll down right away.

    Thanks!

    Posted 10 years ago #
  2. srf-pth
    Member

    I'd like to know this too. I've gone through the CSS and tried reducing the padding on virtually everything... but nothing seems to work.

    Posted 10 years ago #
  3. chrisf
    Member

    I ended up just deleting the content in the header.php that was between this:

    <?php thematic_aboveheader(); ?>

    <?php thematic_belowheader(); ?>

    This just got rid of the title and the description all together, which I am find with. Now my site looks like this: http://www.newfocalmedia.com/blog

    Posted 10 years ago #
  4. Hey guys, removing padding from #header will work. there's no need to remove the title et...

    Posted 10 years ago #
  5. srf-pth
    Member

    Removing padding from #header doesn't seem to work for me. Am I editing the right file?

    I'm using the "Thematic Power Blog" template and editing my "3c-r-fixed-primary-988px.css" file.

    I'm trying to eliminate the white space above and below each page's content. That is, in the link below, I'm trying to substantially reduce the white space above "about" and below the line "Click on the links above to learn more..."

    Here's a link so you can see the website:

    www.lovellfilms.com/about

    (It's a work in progress so not going to the "about" page will lead you to the old site that most people are seeing now.)

    Thanks to anyone that can help.

    Posted 10 years ago #
  6. @srf-pth:

    Hi,

    try to play with:

    .page .hentry {padding-bottom: __px;}
    .page #footer {margin-top: __px;}
    .page #main {padding-top: __px;}

    Don't know if this is only for a page .. if not, remove the .page

    Chris

    Posted 10 years ago #
  7. @chrisf

    Hi,

    I don't use the word SEO very often .. but in your case: SEO-wise I would say: Very bad idea!

    Restore your header.php .. follow the instructions how to use a graphic instead of the title / description but don't use the image replacement for the link. And then start to reduce the white space.

    Chris

    Posted 10 years ago #
  8. srf-pth
    Member

    Chris -

    Your suggestion doesn't seem to work.

    Since I don't want these changes only for a page, but globally, I didn't include the .page element.

    Then I tried to make the changes you suggested. I looked at Stylesheet.css and "3c-r-fixed-primary-988px.css"

    Neither had all three of the elements (.hentry, #footer, and #main) you suggested modifying.

    "3c-r-fixed-primary-988px.css" had the #main and #footer elements (without the .page element). Made the changes you suggested. Nothing.

    "Stylesheet.css" had #footer and .hentry (minus the .page element). Again, made the changes you suggested and again, nothing changed at all.

    For what it's worth, I didn't even see any .page elements in either file. Should I have?

    I'm pretty new to this stuff, so it could definitely be something I'm doing/not doing. I did modify the 3 column template so that all you're seeing on the site is the crown. Could this have done it?

    Thanks for your help so far. And thanks in advance for any other help you can provide!

    Posted 10 years ago #
  9. Don't know what you're doing .. I tested your site with these changes (Firefox / FireBug) and these changes are definitely working!

    Just add these changes at the end of your child theme's style.css and use 0px.

    Chris

    Posted 10 years ago #
  10. srf-pth
    Member

    Chris -

    That did the trick! Thanks.

    Posted 10 years ago #
  11. chrisf
    Member

    @Chris -

    Good advice about SEO. I've added the title and the description back, but have no clue how to hide it and reduce the space. I've checked my files (stylesheet.css, etc.) and can't find any of the code you have described-

    .page .hentry {padding-bottom: __px;}
    .page #footer {margin-top: __px;}
    .page #main {padding-top: __px;}.

    etc. I'm pretty new at this so where should I be looking? Ideally I'd like to have just the tabbed links at the very top with little to no space and then right underneath it my first post. Here are screengrabs I made in Photoshop that better illustrate what I'm trying to do:

    http://newfocalmedia.com/before.gif
    http://newfocalmedia.com/after.gif

    Posted 10 years ago #
  12. You can try


    #branding {
    padding:44px 0;
    }

    Posted 10 years ago #
  13. chrisf
    Member

    @zanguanga

    Which file would I put that line of code in? My CSS/Wordpress skills are very elementary so treat me like I don't know anything, ha.

    Posted 10 years ago #
  14. You can add this line in your style.css

    Posted 10 years ago #
  15. cotinus
    Member

    @chrisf

    To reduce white space in my header, I added the following code:

    #branding {
    padding: 55px 0 33px;
    }

    to the style.css file in my Thematic child theme.

    Did you create a child theme to use with Thematic?

    Posted 10 years ago #
  16. chrisf
    Member

    @continus

    I didn't create a child theme, would that help? (nor have I researched what one is, ha.... I guess I better get on that).

    So far I've added the following to my style.css:

    #branding {
    padding:44px 0;
    height:0px;
    }
    #blog-title {
    padding:0px 0;
    height:0px;
    text-decoration:none;
    font-size:0px;
    /* color:#FFF; */
    }
    #blog-description {
    padding:0px 0;
    height:0px;
    text-decoration:none;
    font-size:0px;
    /* color:#FFF; */
    }

    It's not exactly pretty, but it's reduced the header space a decent amount. There's still some weird little lines from the hidden text and I'd still like to tighten things up.

    http://www.newfocalmedia.com/blog

    Posted 10 years ago #
  17. .. the code wasn't for you .. will check your page later today

    Chris

    Posted 10 years ago #
  18. Use:

    #blog-title a {
    text-indent:-9000px;
    }

    .. and you could play with:

    #branding {padding-top: __px;)

    Chris

    Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.