Change position of post info

Author

Posts
August 2, 2011 at 11:16 am #670517

calamityphysics
Member

Hey!

I’m trying to change the position of the post info (section that shows date, author, category, etc in a post). At the moment it’s just under the post title, but I want it to appear at the very bottom of the post instead….any ideas?

The blog I need help with is calamity-physics.com.

August 2, 2011 at 3:26 pm #670632
designsimply
Staff
Sure. In the Clean Home theme, try using this to re-position the post meta data:
```
.post {
position: relative;
}

.post-meta {
position: absolute;
bottom: 2em;
margin-right: 55px;
}
```
The background images look awesome btw. :)
August 2, 2011 at 3:34 pm #670637

calamityphysics
Member

Brilliant! I’ll give it a shot when I get home and let you know! And awh thanks, you’re really sweet! :)

August 2, 2011 at 4:56 pm #670675

calamityphysics
Member

That worked perfectly! Thank you so much, hun!

August 10, 2011 at 3:45 am #670873

pstrapp
Member

I tried something similar to the above, and found that it appeared in different positions on different browsers. Is there a way to position the metadata above the post title?

August 10, 2011 at 7:00 am #670874

thesacredpath
Staff

We can’t really help without a link to the site.

Just my opinion, but putting the metadata above the post title will make it seem that that data goes with the previous post rather than the one below unless you were to add a bottom border line or separator between posts.

August 13, 2011 at 4:34 am #670875

pstrapp
Member

Thanks for that tip. I like the idea of a line separator, and it seems from http://embraceyoursexuality.wordpress.com/2011/08/ there already is one there.

August 13, 2011 at 6:40 am #670876
thesacredpath
Staff
Give this a try and see what you think.
```
.post {
position: relative;
}

.post-meta {
position: absolute;
top: 0;
}
.post h1 {
padding-top: 40px;
}
```
August 13, 2011 at 12:46 pm #670877

pstrapp
Member

That’s great! Thanks!

Now, a bit of fine-tuning: Is there a way to increase the space between the metadata and the heading? I fiddled with adding padding and margin where it made sense, but my changes were ineffectual.

Also, on the single-post display, there’s a lot of white space between “Like This” and the line below it. Is there an easy way to tighten that up? I’m guessing the large space displayed at the bottom of each post in the archive list has the same origin.

August 13, 2011 at 5:09 pm #670878
thesacredpath
Staff
Increase the padding-top in .post h1 to get more space between the meta and post title.

On the space below the “like” you end up having to change things in two places. The div.sharedaddy was 2em and the .post hr was 35px. Start with these and see how it looks and adjust as you see fit.
```
div.sharedaddy {
margin-bottom: 1em !important;
}

.post hr {
margin-top: 20px !important;
}
```
August 14, 2011 at 1:34 am #670879

pstrapp
Member

Thanks! You’re the best! :-)

August 14, 2011 at 1:55 am #670880

pstrapp
Member

One more nice-to-do, if you’re willing… is there a way to suppress the empty region between the “Like This” and “Leave A Reply” sections?

August 14, 2011 at 2:52 am #670881
thesacredpath
Staff
Give this a try. It gets rid of the lower horizontal rule above “leave a reply.”
```
#comments hr {
display: none;
}
```
August 14, 2011 at 3:31 am #670882

pstrapp
Member

Nice! You’re spoiling me. :-)

What would bring the “Leave a Reply” up a bit, so it’s tight under the line?

August 14, 2011 at 4:33 am #670883
thesacredpath
Staff
This is about as tight as it can get.
```
#respond {
padding-top: 0;
}

.post hr {
margin-bottom: 0;
}
```
August 14, 2011 at 2:06 pm #670884

pstrapp
Member

Thanks so much. :-)

August 14, 2011 at 5:24 pm #670885

thesacredpath
Staff

You are welcome.
Author

Posts