[SOLVED] Varying how header image/menubar being displayed depends on what page

levenssfeer · #1 Apr 28, 2011, 05:06 PM

Hi all,
Does any of you know how to achieve this:
- Page1 show header image+menu bar
- Page2 show none
- Page 3 show header image only
This problem has been haunting me for a long time, love to donate. Any help is appreciated, thanks in advance.

Jam · #2 Apr 29, 2011, 03:12 AM

It might help if you are a little clearer with your question.
There is another recent thread about customising your index.php, that is probably a good place to start.

juggledad · #3 Apr 29, 2011, 05:43 AM

you can use CSS to cause different areas to display or not based on the <body> and it's classes and using the CSS rule 'display:none;'

you would use something like

HTML Code:

body.page-id-33 #menu1 {display:none;}

use firebug in firefox to find the ID/class of the element you want to hide and the page ID class and then experiment.

levenssfeer · #4 May 5, 2011, 05:24 AM

Would it be possible to use configure header area?
Now to make page 2 show nothing I use:

<?php if ((! is_page('page2'))){echo '%logo %pages %image %cats' ; } ?>

The rest, page 1 and 3 showing all of them.
How to make page 3 show %image only?

juggledad · #5 May 5, 2011, 05:36 AM

You can do this with pure CSS. in the 'Configure Header Area' put

HTML Code:

%logo %pages %image %cats

to male page 2 not display anything add this to 'CSS Inserts'

HTML Code:

body.page-id-2 #logoarea {display:none;}
body.page-id-2 #menu1 {display:none;}
body.page-id-2 #imagecontainer {display:none;}
body.page-id-2 #menu2 {display:none;}

to make page 3 just show the image use

HTML Code:

body.page-id-2 #logoarea {display:none;}
body.page-id-2 #menu1 {display:none;}
body.page-id-2 #menu2 {display:none;}

levenssfeer · #6 Jul 10, 2011, 02:49 PM

Thanks juggledad, I really appreciate it and have made a small donation. Thanks again, it really helps