Hide a div that is part of all pages on one specific wordpress page

php html css wordpress

12,577

Solution 1

You don't need to use the body declaration.

try:

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

You could also hide this via PHP in the template files, but that may be more trouble that it is worth, no? Can also add code for that if you would like.

EDIT: the PHP (for wordpress)... should work. I would say go for the CSS, though. Not really necessary to go digging through the Wordpress files.

<?php if( !is_page('XXX') ):?>
    the code to display this div goes here.
<?php endif;?>

Solution 2

It'd help to have a link to the page or a more detailed example of its HTML source, but what seems probable is that the element you want to hide isn't a direct child of the body element, in which case the selector given in your CSS excerpt won't address it properly. Instead, try:

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

which will address an element of ID static-footer-image which is anywhere under the body element, instead of having to be a direct descendant (i.e., <body>...<div id="static-footer-image"></div>...</body>).

Solution 3

I`m writing an answer because I cant comment yet.

Try this:

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

Solution 4

The following CSS rule will hide all divs which have class name starting from page-id-:

div[class^="page-id-"] {
   display: none;
}

This could be a useful answer if your id changes all the time and you don't have other divs with such class names. However, it is impossible to define in CSS something like 50 < id < 67

View more solutions

12,577

Author by

David Tunnell

https://www.davidtunnell.com Seasoned IT professional with years of experience working on software projects in various capacities (Developer, Tester, Scrum Master, PM) in industries including federal consulting, real estate, industrial construction, healthcare and internet startups. Educated with a Computer Science degree from University of Maryland – University College, an MBA from University of Texas at Austin and most recently completed University of North Carolina at Chapel Hill’s Fullstack Certification. Enjoys being challenged and engaged with projects that require me to work outside my comfort zone and knowledge set, especially while collaborating with a team. Have worked on a variety of technology stacks on both greenfield and existing code bases and have managed/facilitated software teams and implemented Agile/Scrum from the ground up resulting in major successes. Looking to move back into a software development role which is my original passion. The ability to create something that is useful and provides value with my mind, colleagues, and a computer drives me.

Updated on August 01, 2022

Comments

David Tunnell over 1 year

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:

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

If I remove the body.page-id-46, it is correctly being hidden on all pages, so it must have something to do with this part of the code.

#static-footer-image{ 
     display: none; 
}

Attached is the PHP for the header.php which so it's on every page...

<body class="<?php hybrid_body_class(); ?>">

What am I doing wrong?

EDIT: because this is a wordpress page there is a lot of PHP embedded but here is the is the associated HTML/PHP:

<?php
/**
 * Header Template
 *
 * The header template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the top of the file. It is used mostly as an opening
 * wrapper, which is closed with the footer.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php hybrid_document_title(); ?></title>

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional)
<script type="text/javascript" src="/lib/jquery.mousewheel-3.0.6.pack.js"></script>
-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<!--<script type="text/javascript" src="/js/jquery.fancybox.pack.js?v=2.0.6"></script>-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<!--
<script type="text/javascript" src="/js/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/js/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<!--<script type="text/javascript" src="/js/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>-->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/helpers/jquery.fancybox-thumbs.js?v=2.0.6" type="text/javascript"></script>

<?php do_atomic( 'head' ); // @deprecated 0.9.0. Use 'wp_head'. ?>
<?php wp_head(); // wp_head ?>


</head>

<body class="<?php hybrid_body_class(); ?>">

<?php do_atomic( 'before_html' ); // hybrid_before_html ?>

<div id="body-container">

    <?php do_atomic( 'before_header' ); // hybrid_before_header ?>

    <div id="header-container">

        <div id="header">

            <?php do_atomic( 'header' ); // hybrid_header ?>

        </div><!-- #header -->

    </div><!-- #header-container -->
    <?php do_atomic( 'after_header' ); // hybrid_after_header ?>


 <div id="homepage-container"> <!--id="uway-container"> -->
 <div id="uway-container"> <!--id="homepage-container"> --> </div>
    <div id="container">

        <?php do_atomic( 'before_container' ); // hybrid_before_container ?>

<?php
/**
 * Footer Template
 *
 * The footer template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the bottom of the file. It is used mostly as a closing
 * wrapper, which is opened with the header.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>




        <?php do_atomic( 'after_container' ); // hybrid_after_container ?>

    </div><!-- #container -->
    <div id="static-footer-image" style="position:absolute; bottom: -15px; z-index: 501;">
        <img src="http://www.unitedway.zhi.com/wp-content/themes/hybrid-uway/images/background-bottom.png"/>
    </div>
<!--     </div> id="homepage-container"> -->

 </div> <!--id="uway-container"> -->
    <div id="footer-container">

        <?php do_atomic( 'before_footer' ); // hybrid_before_footer ?>

        <div id="footer">

            <?php do_atomic( 'footer' ); // hybrid_footer ?>

        </div><!-- #footer -->

        <?php do_atomic( 'after_footer' ); // hybrid_after_footer ?>

    </div><!-- #footer-container -->

</div><!-- #body-container -->

<?php do_atomic( 'after_html' ); // hybrid_after_html ?>
<?php wp_footer(); // wp_footer ?>

</body>
</html>

robooneus almost 11 years

you don't need the * for that.. CSS will get any descendants. Direct descendants are targeted using a >
Aaron Miller almost 11 years

@robooneus Whoops -- you're quite right. Thanks for the heads-up.
David Tunnell almost 11 years

I am a .NET developer who just got handed a bunch of Wordpress sites. I don't know PHP but it looks like I'll be learning.
David Tunnell almost 11 years

This is still not hiding it. Am I correct to assume that my page is 46 based on above? This is the preview URL: http:/xyz.com/coordinators/resources/?preview=true&preview_i‌d=46&preview_nonce=4‌234d5ea4f
robooneus almost 11 years

Edited it to have you class names and such. A link to the actual site would be very useful if this is still not working for you.
David Tunnell almost 11 years

This is still not hiding it. Am I correct to assume that my page is 46 based on above? This is the preview URL: http:/xyz.com/coordinators/resources/?preview=true&preview_i‌d=46&preview_nonce=4‌234d5ea4f
robooneus almost 11 years

Yeah... so the issue is that the body doesn't actually have an ìd` of page-id-46... Check the edited code above. The selector you want is just .page-46.