Style First Post Differently

[CreativeKristi]

Hello! I am working on a test site:

http://blogtest.creativekristi.com

This is a current wordpress and Genesis install but the client only wants the Vintage Child Theme to be used so that's what is on there.

I am trying to use php & css to style the most recent (or first depending on who you ask) post differently than the rest. It's a 3 part issue:

1. I want to include the measuring tape illustration ONLY on the first post on the home page.
2. I want to include a post divider image below the post date and above the post content ONLY on the first post on the home page.
3. I believe I will need to adjust the margins/padding of the Post Title, Post Date/Author line AND the post content but will only need to adjust on that first post only.

Would love to use the Genesis Simple Hooks plugin for this and add some css into the style.css but so far I'm at a loss as to the php to JUST change that first post on the home page only.

To get it to show up at all (the illustration and the above post content divider) I have done the following: (and it shows on each post at the moment)
1. Added the image url of the illustration to the #content .post h2 section and added/increased the height of that to 75px
2. Because of the height of the #content .post h2 I had to add a negative margin to the post-info line AND because of #3 I increased the bottom margin to 25px.
3. To add the post divider image to the top of the post content I added the image url as a background to the .entry-content area and increased the top padding to 45px.

^^^I tell you all of the above because all those pieces need to be addressed so that ONLY that first post gets those changes and everything else doesn't have those increased margins/padding and backgrounds.

I've looked at the wordpress forum and saw something similar but was unsure how to apply it to Genesis since the codes all look different.

Thank you for all of your help in advance!

---

I work at Creative Kristi Designs
I play at Creative Kristi
Affordable. Beautiful. Personal. Custom. Design for everyone.

http://blogtest.creativekristi.com

[Porter]

I'm horrid at CSS, so I can't help much, but I can teach you something you may not know, that will solve your "only on the home page" issue.

body.home .someclass {
    font-size: 16px;
}

body.home will target just your home page, so hopefully you can use that with whatever CSS you know to accomplish this.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[CreativeKristi]

Porter,
I need something that targets only the first post on the home page only, not the entire home page. If that makes sense?

---

I work at Creative Kristi Designs
I play at Creative Kristi
Affordable. Beautiful. Personal. Custom. Design for everyone.

[Brad Dalton]

This works for the featured image http://wpsites.net/web-design/customize-the-first-featured-image-in-the-home-page-loop/

---

Tutorials for StudioPress Themes.

[TulioKCardozo]

Hi Kristi!

Have you thought about using the CSS:first-child pseudo-element?
http://www.w3schools.com/cssref/sel_firstchild.asp

A combination of Porter's suggestion and this should help you target a rule to "hit" the first blog post.

You may also have to use !important to force the override but check out this article if you haven't already about general guidelines of it's usage.

When Using !important is The Right Choice

Hope this helps! Cheers,
-Tulio

Edit: Brad's answers is definitely a cleaner way to go!

[CreativeKristi]

Brad,
that looks good but I'm at a loss as to change it to add a post title image (and keep the featured image of the post in tact) and add the divider image?

---

I work at Creative Kristi Designs
I play at Creative Kristi
Affordable. Beautiful. Personal. Custom. Design for everyone.

[Brad Dalton]

Please ask one question per topic.

This code also generates a custom body class and custom post class for the 1st post in the home page loop.

---

Tutorials for StudioPress Themes.

[CreativeKristi]

Brad,
I'm sorry I believe I did only ask one question per topic. My original question had nothing to do with the featured image and your post you linked dealt with changing featured images---I was asking for clarification on how to apply that to what I had asked. Did I misinterpret your answer?

Tulio,
Thanks I'll check those out!

-Kristi

---

I work at Creative Kristi Designs
I play at Creative Kristi
Affordable. Beautiful. Personal. Custom. Design for everyone.

[CreativeKristi]

Brad--
That second post you linked to sounds exactly like what I am looking for! Like I said I had figured it out for other wordpress sites but was having trouble translating to Genesis sites! Yahoo!

I'll let you know if it works the way I'm thinking!

Thanks for your help all,
Kristi

---

I work at Creative Kristi Designs
I play at Creative Kristi
Affordable. Beautiful. Personal. Custom. Design for everyone.

[Author]

Posts