Display Different Site Logo Based on Body Class

[pkazmercyk]

Adding "notebook" as a Custom Body Class to certain posts.
Platinum theme default logo placement is here in CSS:

.header-image #header #title-area {
	background: url(images/My-Header-2014-04.png) left top no-repeat;
	}

I've added custom body class css below:

body.notebook .header-image #header #title-area {
	background: url(images/Notebook-Header.png) left top no-repeat;
	}

but the logo stays at the sitewide default.
I'm able to get other elements such asbody.notebook #content h2 to change accordingly, but can't get the logo to change to url(images/Notebook-Header.png)

[Brad Dalton]

Your classes or path to image might be wrong but you also just can't add more CSS with a body class to change an image.

What about the default image?

Can't text because you haven't linked to your site.

What you can do is install a plugin like WP Display Header

Or use conditional tags with PHP.

You're also using both i.d and selector classes so i assume you're still running the old XHTML markup?

---

Tutorials for StudioPress Themes.

[pkazmercyk]

Hi Brad.
Default image is as supplied with the Platinum theme, except I've moved in my image and added it's code:

.header-image #header #title-area {
	background: url(images/GBDCT-Header-2014-04.png) left top no-repeat;
	}

WP Header isn't compatible with Genesis, at least not this version of Platinum.
My PHP is way beyond rusty as is my CSS so I may be missing something obvious.
Here's my site:
http://www.granitebaydesign.com
and a working draft of a page where I've added "notebook" as a custom body class to the post:
http://www.granitebaydesign.com/?p=3178&preview=true
Note that the gold gif along the top left and right replaces the default black gif used in the rest of the site and the H2 header:
body.notebook #content h2
is #000000, rather than #009900 as on other pages in the Notebook section:
http://www.granitebaydesign.com/2602/photoshop-layers-fluid-motion/
where I haven't added a custom body class.
Thanks for your help.
(Sorry if this posted more than once, but it's not appearing when I hit SUBMIT).

[pkazmercyk]

Hi Brad.
Default image is as supplied with the Platinum theme, except I've moved in my image and added it's code:

.header-image #header #title-area {
	background: url(images/GBDCT-Header-2014-04.png) left top no-repeat;
	}

WP Header isn't compatible with Genesis, at least not this version of Platinum.
My PHP is way beyond rusty as is my CSS so I may be missing something obvious.
Here's my site:
http://www.granitebaydesign.com
and a working draft of a page where I've added "notebook" as a custom body class to the post:
http://www.granitebaydesign.com/?p=3178&preview=true
Note that the gold gif along the top left and right replaces the default black gif used in the rest of the site and the H2 header:
body.notebook #content h2
is #000000, rather than #009900 as on other pages in the Notebook section:
http://www.granitebaydesign.com/2602/photoshop-layers-fluid-motion/
where I haven't added a custom body class.
Thanks for your help.

[Tom]

Hi Paul,

Please try this CSS:

.notebook.header-image #header #title-area {
 background: url(http://www.granitebaydesign.com/wp-content/themes/platinum/images/Notebook-Header.png) left top no-repeat;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[pkazmercyk]

Hi Brad.
Default image is as supplied with the Platinum theme, except I've moved in my image and added it's code:

.header-image #header #title-area {
	background: url(images/GBDCT-Header-2014-04.png) left top no-repeat;
	}

WP Header isn't compatible with Genesis, at least not this version of Platinum.
My PHP is way beyond rusty as is my CSS so I may be missing something obvious.
Here's my site:
http://www.granitebaydesign.com
and a working draft of a page where I've added "notebook" as a custom body class to the post:
http://www.granitebaydesign.com/?p=3178&preview=true
Note that the gold gif along the top left and right replaces the default black gif used in the rest of the site and the H2 header:
body.notebook #content h2
is #000000, rather than #009900 as on other pages in the Notebook section:
http://www.granitebaydesign.com/2602/photoshop-layers-fluid-motion/
where I haven't added a custom body class.
Thanks for your help.

[pkazmercyk]

Thanks Tom! That did the trick. Just so I understand: The body class doesn't matter here (your css still works if I add body before .notebook, but it's superfluous), only the notebook class matters? Then with the full path to the desired image, am I sort of removing the page instructions from the WP theme and making a more literal link to the image? (Maybe not well-explained, but want to grasp what's happening). Thanks again.

[pkazmercyk]

If possible, can a moderator remove two of my triplicate posts? They weren't showing up when I posted them each time. Thank you.

[Tom]

The body class isn't required because the selector is specific enough to target the correct element (and no others) without it. (You aren't applying the rule to the body.)

What I do find curious is that the .notebook class selector must not be separated with a space from the .header-image class selector (at least from my testing), making it almost like an HTML tag selector. There must be a rule about this somewhere, I just haven't found it yet.

As for the image declaration, you would assume that giving a rule more weight by placing it lower in the CSS document or adding a more specific selector would be enough to make it dominant, but that doesn't appear to apply. The specificity of declaring the full path must be the added weight required.

I'd be happy to learn more of the why's, too.

(I think your posts are duped because of the number of links included and the resulting antispambot action. You repost, then the spam hold is cleared, now you have dupes.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts