Different CSS on posts and archive page

[[email protected]]

Hi, I am making a theme for a client on my test domain at
http://test4.e9designs.com
It is a custom child theme based on the Genesis theme.

I asked the following question on the forum at WordPress.org, and they said that since I'm using Genesis, I shouldn't be doing this kind of hack. Genesis probably provides hooks for this kind of thing already. They said to ask here, and that you would tell me to put the image(s) via this whatever_before_post_title hook. I do not understand what to do, so here is my original question, as I posted it over there:

---

The client wants TWO headers on each page. The top header has the blog's title, but the background images rotate depending on the category the visitor is viewing. With the use of the "Unique Headers" plugin, I've got that working.

The second header is visible on all pages except index. It will have the category title, and again, the background images should rotate depending on which category it is.

I have NOT been able to figure this out, so I cheated and just uploaded a background image into the code, like this:
/* Category Headers
------------------------------------------------------------ */

body.single-business div.post {
background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/business-large.png') no-repeat center top;
padding: 0px 0px 164px 0px;
}

body.single-wisdom div.post {
background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/wisdom-large.png') no-repeat center top;
padding: 0px 0px 164px 0px;
}

body.single-nature div.post {
background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/nature-large.png') no-repeat center top;
padding: 0px 0px 164px 0px;
}
On the posts, I used the "Ambrosite Body Class Enhanced" plugin to help me define classes for each category in the CSS. Maybe I didn't need it, but I'm still learning, and this seemed to work.

On the category archives pages, I went into the Category section of the dashboard and just added an image to the Archive Intro Text of the Category Archive Settings.

The problem, which you can see an example of at
http://test4.e9designs.com/category/business/
is that there is a huge white space under the 2nd header, before the post content begins.

It looks just fine on the post pages, as you can see at
http://test4.e9designs.com/sample-post-with-headlines/

Here is the offending code:
#content .post {
border-bottom: 1px solid #DFDFDF;
margin: 0;
overflow: hidden;
padding: 174px 20px 15px;
}
I am *sure* there is a better way to do this, but I just can't figure it out.

Even worse, I don't like that all these images are coded into the CSS style sheet, because my client was really hoping to be able to make these changes himself, through the media library. However, I think it's getting beyond my skills, unless I could find a plugin to solve the problem.

Can anyone advise? Thank you *so* much!
~Anne

[Brad Dalton]

This will work if you use the same header height wp display header plugin

---

Tutorials for StudioPress Themes.

[[email protected]]

That is FABULOUS! Thank you, thank you!

[Author]

Posts