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

css, html, php, wordpress

Solution

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

Problem

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: ``` 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> ```

Original source