Tweaking h1 in Vigilance CSS
-
Hey,
I’ve been trying to tweak h1s in my Vigilance CSS, but have had some strange results.
The goal was to give my h1s a lot of room above and below in order to give the posts breathing room. However, the second I did that, only on my home page, it added a huge space between the header image and the nav bar/gray line.
It made me suspect that for some reason, there is an h1 in that part of the coding, but I can’t imagine why. I told the CSS to not display the blog description, but that didn’t work.
Any recommendations?
It’s for my blog at http://swungover.wordpress.com/
The blog I need help with is: (visible only to logged in users)
-
Also, this might be related: I’m also trying to give my post headers more room above so that people looking at the list on the front page can tell better when one post ends and another begins.
Is there a way to do this so that the top post on a page (the one right under the header) doesn’t get that space but the bottom posts do?
-
Were you working with the h1 selector, or were you working with the actual selector for the post titles, .post-header h1, .post-header h2 ?
-
Well, here is what is in my CSS regarding those things:
#description h2 {
font-size:1.8em;
}h1 {
font-size:1.6em;
padding-top:30px;
padding-bottom:15px;
}h2 {
font-size:1.3em;
padding-top:30px;
padding-bottom:15px;
}Otherwise, I don’t currently have anything on postheader. I forgot when I toyed with that, But I guess I took it back out of the CSS customizer.
-
Targeting h1 and h2 changes all occurrences of h1 and h2 in the entire site, including the site title and tagline. That is why everything blew up on you.
You want to target only the ones you want to change. Remove those above from your CSS and then we will go about targeting and getting the results you want without affecting other things.
-
-
Ok, now let’s get to work.
You want more space between posts on the main page, correct? In this theme, do that by adding more margin to the bottom of the post footer (30px is the original).
.post-footer { margin-bottom: 30px; }For space below the post title, do you want more space between it and the date/double line, or between the date/double line and the post content?
-
Actually, I’m fine with the space between all of those.
Ah, I think I can express my problem better.
When I’m writing a post, and use <h1> in HTML coding, I expect it to be large and have space above it and below it. However, in Vigilance when I do that, it comes out no different than words. So, I was hoping to tell the website that I wanted <h1> to mean big and with a nice amount of space above it, and a little bit of space below it.
Should I not use <h1> for that and just rely on <h2> for that? I rather like having two different sixes of header fonts for my posts.
-
Though, your post footer thing solved that “space above posts” problem perfectly, thanks.
-
Have you got an example you can point to on the h1 in a post?
And just FYI, the h1 should be reserved pretty much for the most important things in a web page, so it is better to use h2 in a post or page body. Once I see an example, what we can do is create h2 declarations just for post and page content areas so that it doesn’t mess with anything else.
-
Never mind, I found the h1 in the post body. What we are going to do is create declarations that will only affect the h2 in post and page content and then you can use the h2 header.
.entry h2 { font-size: 150%; margin: 30px 0 15px 0; }On the margin, the 4 values are top, right, bottom, left so I put 30px on top and 15px on bottom. You can edit those as you see fit. Same with the font size.
-
Okay, that makes sense.
So, in this post:
Swungover Under Construction (and Junk Drawer, November 2011)
Above those first two paragraphs are words that look like they were simply bolded. But those are in <h1> in the HTML coding.
Is that what you mean by an example?
-
That’s fantastic. I went ahead and tweaked an h3 too in the exact same way, so that I could have two sizes (I work a lot with headings and sub headings.) Is there any problems with that?
-
Absolutely no problem at all, in fact you can do the same thing with h4 and h5 if you wished or needed them. You can even declare a color for them that is different from the body text if you wish.
-
Excellent. So now I guess the last question I have is:
Is it possible to raise the post up a little bit into that white space below the gray line, even though the nav bar is on the right (I guess something in the original site’s coding is making the post start below all that.)
-
That’s perfect.
Again, thank you so much! Do you even sleep? Thanks for saving me hours on the internet trying to hunt this stuff down. I really, really appreciate it.
-
I spoke to soon. A new question just popped up, but I think it’s because of the previous tweak I made.
My Vigilance optional alert box is now out of proportion: It puts the text low in the box.
-
It appears I don’t sleep since I’m in the middle of the Pacific ocean and it’s only 11pm at the moment. Still another hour before I go all pumpkin.
Ah, they tripped us up and the h declarations for the alert box are the same as for the post content. Give this a try.
.alert-box h2 { margin-top: 0 !important; } -
yup, that did it!
Well, I think I’m CCSed out. Off to bed.
Thanks so much, again. Is there a boss I can praise you to? I’d be happy to.
- The topic ‘Tweaking h1 in Vigilance CSS’ is closed to new replies.
WordPress.com Forums 