Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Apr 9, 2011, 05:01 AM
juggledad's Avatar
juggledad
 
21,712 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
HOWTO: have one header image on one page, and another image on another page

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
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

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

Bookmarks

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 01:42 PM
[SOLVED] HOWTO: change header image via dashboard coldar75 Atahualpa 3 Wordpress theme 4 Dec 14, 2010 03:29 AM
Howto: Header Image on (static) frontpage ONLY (not rest of blog) RuBeQK Header configuration & styling 1 Jul 28, 2010 01: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 03:59 PM


All times are GMT -6. The time now is 06:39 PM.


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