theme development - Hide a div that is part of all pages on one specific page

admin管理员组

文章数量:1208155

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

I believe my page id is 46:

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?

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

I believe my page id is 46:

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?

• theme-development
• css
• html
• child-theme

Share Improve this question asked Jul 23, 2013 at 15:17 David TunnellDavid Tunnell 44122 gold badges55 silver badges99 bronze badges 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 Commented Jul 23, 2013 at 15:21
• thanks, but it is still showing. – David Tunnell Commented 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. – aldo.roman.nurena Commented Jul 31, 2013 at 5:58

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 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 } ?>

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.

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

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

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

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.

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; 
}

本文标签： theme developmentHide a div that is part of all pages on one specific page