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!
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.
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
Hey guys, removing padding from #header will work. there's no need to remove the title et...
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:
(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.
@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
@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
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!
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
srf-pth
Member
Chris -
That did the trick! Thanks.
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
You can try
#branding {
padding:44px 0;
}
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.
You can add this line in your style.css
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?
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.
.. the code wasn't for you .. will check your page later today
Chris
Use:
#blog-title a {
text-indent:-9000px;
}.. and you could play with:
#branding {padding-top: __px;)Chris
You must log in to post.