5

How can I hide a div (which contains an image) for a specific WordPress page?

I believe my page id is 46:

enter image description here

Here is the div I am trying to change:

<div id="static-footer-image" style="position:absolute; bottom: -15px; z-index: 501;">
    <img src="images/background-bottom.png"/>
</div>

And the associated CSS code in my main CSS file:

#static-footer-image body.page-id-46 { 
     display: none; 
}

It is still showing. What do I do to fix this?

3
  • 2
    Your CSS rule is backwards, body is not a child of #static-footer-image, it should be body.page-id-46 #static-footer-image
    – Milo
    Jul 23, 2013 at 15:21
  • thanks, but it is still showing. Jul 23, 2013 at 15:27
  • are you sure about the page id? inspect the body tag on rendered html code for that page and confirm please. Jul 31, 2013 at 5:58

6 Answers 6

2

Guess from the URL structure, your %postname% permalink structure is active. So, a bit of internal CSS can help alternatively, and the syntax is in_page('page_slug'):

<?php // Do action only on specific page in WP ?>
<?php if( in_page('resourses') ) { ?>
<style>
  #static-footer-image{
      display: none;
  }
</style>
<?php } ?>
2
  • 3
    this is adding unnecesary load to the server, I would go for M-R's answer Jul 31, 2013 at 5:54
  • I do agree. Sure, he's right. Jul 31, 2013 at 10:04
11

Use following CSS

body.page-id-46 #static-footer-image { 
     display: none; 
}

and make sure "page-id-46" class is applied to body tag and Clear the cache. May be try on another browser or a incognito window.

2

If that's the page ID, the selector should be

body#page-id-46 #static-footer-image

not

body.page-id-46 #static-footer-image
1
  • 1
    nope, WP renders <body class="page page-id-28 page-template ..."> for me, so that's a class Jul 31, 2013 at 5:53
1

You may have a display in CSS so you may try:

body.page-id-46 #static-footer-image { 
     display: none !important; 
}
1

This works for me:

body .page-id-46 #static-footer-image { 
     display: none; 
}

not this:

body.page-id-46 #static-footer-image { 
     display: none; 
}

After body give a space and type .page-id-46 #static-footer-image{display: none;} Once again check whether it's a class or id. in my case, it's an id, here is my code for your reference:

body #post-448 .entry-meta-bar
{
    display:none;
}

Hope this will help you.

0

How would the code look if you wanted to exclude a widget?

The CSS:

body.page-id-60748,
.widget_its-single-post { 
     display: none !important; 
}
2
  • This is confusing because it looks as though you're asking another question but you appear to be answering a question. Feb 27 at 16:44
  • Mine was more widget orientated then div, I got it working anyway, thanks! Feb 28 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.