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

1 Views

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

I believe my page id is 46:

Read More

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>
Post Views: 1

Related posts

Leave a Reply

6 comments

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

  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>).

  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

  6. This works for me, I had a Carrie Dils’ utility bar and needed to hide it.

    I added this to my style.css and it worked and the page whose ID is 2:

    body.page-id-2 .utility-bar { 
     display: none; 
}