Hide a div on one page only - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Hide a div on one page only

jcreep

11:44 pm on Mar 2, 2011 (gmt 0)

10+ Year Member

I know this will seem like a strange request but I do have a reason why I am working the way I am.

I have a div on every page at the top of my site and it is in the template header (wordpress), this div contains an affiliate banner as I needed this to show on every page.

I have one post that is related to a charity and is really a human interest post I dont want to distract from this by having my adverts or banners up on that page but I do need them up on the other 100+ pages of the site as I need to make money but I do want to really give my absolute support to the charity (Ideally I would like to swap out the banner I have for an affiliate for their banner but it would be okay if I could just remove mine).

I am quite useful with wordpress and have a basic understanding of html, I can get by with css but its not something I am good at, it scares me....

The best option I can see is to hide the div contents on the one post as having an empty space their does work well with the post content and look but I am not sure how to do this and the div shares the same id on all pages of the side and I cant change these as its in the header. Can I make the global css check the postname and hide the div only on that page or to somehow use javascript to remove it on this occasion

Can anyone help me out, i cant have a human interest post for a charity with an affiliate banner across the top of the page - it wouldnt be right.

SuzyUK

12:01 am on Mar 3, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi jcreep and Welcome!

can you write , or does your site already have, a unique page ID or class for each page - in WP it will be most likely be on the body element if it's already built in.. it usually is

if you have one or can make sure of one (it'll likely have to occur on every page not just the one you want) then yes it's very possible - and without scaring you at that :)

let us know

jcreep

1:02 am on Mar 3, 2011 (gmt 0)

10+ Year Member

Thanks for replying, I thought I would be ignored as I am new!

I have done a search and found a post

here [techtrot.com...]

Which explained how to find my page ID, their example was that the URL

------------------------------------------------------------------
[xyz.com...]
The number with which the URL ends is the Page ID (6 in this case).
------------------------------------------------------------------

Would have the page ID of 6, I have checked on mine and I have post.php?post=80 on a page that I am happy to do some testing on as its not really important.

So as far as I can tell, in answer to your question I do have a unique page ID and its a number, I am hoping you can give me a little bit more help here and tell me where to go next.

Thanks a lot, I have promised to put this live by the weekend for them and am starting to worry a little.

SuzyUK

9:13 pm on Mar 3, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi jcreep we would never ignore newcomers..

Ok that's not quite what I meant, I was looking for the CSS ID for the page.. the quickest way to find it is to view the source of the page.. then just after all the <head> code.. you're looking for

<body id="?" class="maybe some classes too">

if you can find that line and post it, I (or someone) should be able to tell you if there's a unique Identifier in there.

the post itself usually has a unique identifier, but it might be that this banner div you want removed is not inside that identifier, so I'm looking to see if there is an ID or Class on the <body> element which is related to the WP postID too.. that would be unique and is often what is built into WordPress and other CMS's.. I'm hoping ;)

alternatively you could post the HTML (from view source, not the Wordpress php code) from the opening

<body ... to where the banner closes </div>

as this may offer a way to target it

if you find that you then just put in your CSS:

#theuniqueID #thebannerDiv {display: none;}

the solution is simple it's finding the combination for the selector..

SuzyUK

9:43 am on Mar 4, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi jcreep..

you also say you are quite useful with WP.. so you might prefer to create a custom page template for just this post, which is possibly the solution for giving it a custom affiliate/ad banner/message too.. this in itself might give it another unique ID.. or you can tweak the body_class(mycustomclass another charity) function in the new template, though if the custom template is only used once, finding a unique ID would likely no longer be necessary, as the change would hardcoded into the templates

Rough and ready run through.. though do check with WP help sites for the proper naming convention if you're not alredy familiar with using templates..

copy page.php and save it with a new name and title (php comment at the top of the file) - then tweak it to your tastes .. if it's calling your standard header, then also create a new header.php (again copy/paste the existing one) and tweak to include your custom affiliate banner instead of the usual ad/banner code

then in your custom template change the header call to the new file..
change

<?php get_header(); ?>

to

<?php include("header_new.php"); ?>

or something like that..

then go to the post and somewhere in the admin panel you should be able to change from the default template to your newly created one

ackk who am I to be giving WP code hehe.. just google "How to Use a Custom Template in Wordpress".. :)

using a custom template for just this one page will give complete control over it, you will be able to change or add to any part of it which might have further uses down the line too.

Suzy