Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » FAQ - Atahualpa » Header »

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

Old Apr 9, 2011, 06:01 AM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {
Hopefully this will be a guide to using CSS to display a single image per page
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Apr 12, 2011 at 03:21 PM.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
HOWTO: put your image in the header juggledad Header 71 Jan 12, 2011 02:42 PM
[SOLVED] HOWTO: change header image via dashboard coldar75 Atahualpa 3 Wordpress theme 4 Dec 14, 2010 04:29 AM
Howto: Header Image on (static) frontpage ONLY (not rest of blog) RuBeQK Header configuration & styling 1 Jul 28, 2010 02:24 PM
[SOLVED] Have one Header Image appear on Home Page and different Header Image on Page treeplant Header configuration & styling 4 Mar 27, 2010 04:59 PM

All times are GMT -6. The time now is 07:37 PM.

Powered by vBulletin® Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.