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. – David Tunnell 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. – aldo.roman.nurena 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 – aldo.roman.nurena Jul 31 '13 at 5:54
  • I do agree. Sure, he's right. – Mayeenul Islam 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 – aldo.roman.nurena 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.