HOWTO: have one header image on one page, and another image on another page

juggledad · #1 Apr 9, 2011, 06:01 AM

If you want one header on one page (or even per single post page) and a different one on another page, you can use this CSS trick to do it.

First visit the page where you want post number 1 and view the source code of the page. Now do a 'find' on '<body' and you will see something like this

HTML Code:

<body class="page page-id-7 page-template page-template-default">

for a single post page it would look like

HTML Code:

<body class="single single-post postid-1976 single-format-standard">

for a category it would look like

HTML Code:

<body class="archive tag tag-soups tag-55">

in all cases we are looking for something unique to use in the CSS Selector.

From the 'page' page you see page-id-7
From the 'post' page you see postid-1976
From the 'category' page you see tag-soups
(the items in red will vary on your site)

These are the unique items you will use in your CSS Selector. Now you just build the CSS Selector and CSS rules to use the image you want and place it in the CSS Inserts section of ATO>Add HTML/CSS Inserts.

HTML Code:

body.page-id-7 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/uploads/page-id-7.jpg) !important;}

HTML Code:

body.postid-1976 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/uploads/postid-1976.jpg) !important;}

HTML Code:

body.tag-soups div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/uploads/tag-soups.jpg) !important;}

There are many variations on this theme, lets say you didn't want a header at all for page-id-7, you could use

HTML Code:

body.page-id-7 div#imagecontainer {
display:none;}

Hopefully this will be a guide to using CSS to display a single image per page