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 '13 at 15:21
  • thanks, but it is still showing. Jul 23 '13 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 '13 at 5:58
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 '13 at 5:54
  • I do agree. Sure, he's right. Jul 31 '13 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 '13 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.

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.