Excuse my ignorance, I am very new to the web scene. I am missing a sidebar and footer on my custom theme. I was able to get the background images to appear for the header and content, but not for the footer and sidebar. I have followed several tutorials, researched to both ends of the internet and cannot figure out what I am doing wrong.
I am attempting to create a layout that consists of a header, content and right sidebar. I really don't want anything in my side bar from WordPress. I am going to put the site navigation and login there, but I would like the background to show up! I will post the basic code below and give the link to my site here. Thanks in advance!
index.php
<div id="container">
<div id="content" role="main">
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url');?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
.......
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
sidebar.php
<div id= "sidebar" class="widget-area" role="complementary">
</div><!-- #sidebar -->
footer.php
</div><!-- #main -->
<div id="footer" role="contentinfo">
</div><!-- #footer -->
</div><!-- #wrapper -->
<?php wp_footer(); ?>
</body>
</html>
style.css
/*
Theme Name: Mod Theme
Theme URI: http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/
Description: My First Theme
Version: 1.0
Author: Jason
Author URl: http://www.itssimplydesign.com
*/
/* =Layout
-------------------------------------------------------------- */
/*
LAYOUT: Header, Content and Sidebar
DESCRIPTION:
*/
body {
background-color: #e6e9Df;
}
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
#header {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images/background_main_01.png) no-repeat;
width: 1000px;
height: 332px;
}
#sidebar {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images/background_main_03.png) no-repeat;
float: right;
clear: right;
overflow: hidden;
width: 300px;
}
#content {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images /background_main_02.png) no-repeat;
min-height: 668px;
width: 700px;
float: left;
}
#footer {
clear: both;
width: 100%;
}
You have applied background on the content but nothing is there for the footer.
You can either change to styling of the footer in your css, or you can put
<div id="footer" role="contentinfo">
</div>
in #container too. Then, it would all be included in the same div and the background would apply too.
Similarly, you can include the sidebar like that, in the container only.
Related
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
Here is a codepen to see the code I have written and works.
When I write similar code in my wordpress theme, my body appears above the header. How can I get the body next to the header?
[BONUS] What is the best way/how to align the body centered between the right-edge of the header and the right side of the screen.
Any advice is highly appreciated, and I thank you in advance.
[EDIT]: I changed my code for my wordpress site because before I was targeting body with css like I did in my codepen, but instead I created a div with class .site and am using that as the body. This is a temporary fix, but it is working as intended. How could I better achieve this affect so I can integrate visual plugin builders such as beaver builder?
HTML:
<div id="header">
<img src="http://placehold.it/100x100">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item Number 3</li>
<li>Item #4</li>
</ul>
</div>
<div id="body">
<div id="container">Body
</div>
</div>
</div>
CSS:
#header,
#body {
display: inline-block;
}
#header {
white-space: nowrap;
width: 15%;
height: 100%;
float: left;
text-align: right;
position: fixed;
//border: 1px solid green;
}
#header img {
}
#nav ul {
list-style: none;
}
#nav {
position: absolute;
bottom: 4%;
right: 0;
}
#body {
width: 80%;
float: right;
//border: 1px solid yellow;
}
#container {
height: 10000px;
}
HEADER.PHP:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" />
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Site Header -->
<header class="site-header">
<?php the_custom_logo(); ?>
<?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?>
</header>
<!-- /Site Header -->
<!-- Site Content -->
Part of the problem was that I had a php error in my functions.php. Also I changed the position of the site content to absolute and the site nav to fixed. I then set the width of the sidebar nav and site content. I also added a content loop to my header to create the content area. Both site nav and content are displayed inline-block.
Everything now seems to be working.
my site is on WP and I using Hueman theme.
I want to add baner in right side of header. Now Im using header image, which have max. width and I dont know if I should add my banner on this header image or cut width header image and add banner next to it.
I searched a lot and I found a solution:
https://wordpress.org/support/topic/ads-11?replies=6#post-4906945
I have no idea where I can put divs with my banner, this is how looks header.php
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="header">
<?php if ( has_nav_menu('topbar') ): ?>
<nav class="nav-container group" id="nav-topbar">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
<div class="search-expand-inner">
<?php get_search_form(); ?>
</div>
</div>
</div><!--/.container-inner-->
</div><!--/.container-->
</nav><!--/#nav-topbar-->
<?php endif; ?>
<div class="container group">
<div class="container-inner">
<?php if (ot_get_option('header-image') == ''): ?>
<div class="group pad">
<?php echo alx_site_title(); ?>
<?php if (ot_get_option('site-description') != 'off'): ?><p class="site-description"><?php bloginfo('description'); ?></p><?php endif; ?>
</div>
<?php endif; ?>
<?php if (ot_get_option('header-image')): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php if (has_nav_menu('header')): ?>
<nav class="nav-container group" id="nav-header">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
</nav><!--/#nav-header-->
<?php endif; ?>
</div><!--/.container-inner-->
</div><!--/.container-->
</header><!--/#header-->
<div class="container" id="page">
<div class="container-inner">
<div class="main">
<div class="main-inner group">
And this is my custom.css edited by me to hide this banner from mobile users
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking.
When you update your theme, backup this file and re-add it after.
*/
/* Global */
.mystyle {}
.ads-header-desktop {
display: block;
float: right;
margin-right: 5px;
margin-top: -95px;
}
/* hide or display */
.ads-header-desktop { display: block; }
#media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}
/* Tablet - 800px, 768px & 720px */
#media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}
/* Mobile - 480px & 320px */
#media only screen and (max-width: 719px) {
.mystyle {}
}
/* Mobile - 320px */
#media only screen and (max-width: 479px) {
.mystyle {}
}
Summa summarum:
This is my site: www.st-mobilny.pl and I want to do something like that: 1drv.ms/1RoUkIV
Your best bet is to add it with position absolute:
<div class="container-inner">
<div class="banner"><img src="path/to/image" alt=""></div>
<?php if (ot_get_option('header-image') == ''): ?>
In your CSS:
.container-inner {
position: relative;
}
.banner {
position: absolute;
top: 50px;
right: 0px;
z-index: 100;
}
#media screen and (max-width: 768px) { .banner { position: static;} }
Change the top and right to whatever you want. I added a sample media query to show how you could change it, so once you go into mobile, the banner goes above the logo. If you want the banner below the logo, move the div in the html to above the menu.
I have a problem with my Navbar and logo.
I have modified the Navbar that it is in a fix position on top with 100% width.
I put the logo function also out of the page div so it is above the page in the header area.
The problem is that when I set the nav-bar margin-top to 0 the logo is under the navbar.
When I set the logos margin-top to about 5rem it puts down the nav-bar to the place where the Logo starts.
Here are my codes for better understanding:
Header.php
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
<div id="mainlogo" class="mainlogo">
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</div id="mainlogo" class="mainlogo">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="slider" class="slider">
<?php layerslider(1) ?>
</div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
Style.css
.header-image {
display: block;
margin-top: 0rem;
margin-left: auto;
margin-right: auto;
}
/* Navigation Menu */
.main-navigation {
margin-top: 0p;
margin-top: 0rem;
position: fixed;
z-index: 999;
opacity:1;
filter:alpha(opacity=100);
width: 100%;
margin-top: 0px;
margin-top: 0rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 28px;
font-size: 1rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Menu Background */
.nav-menu {
background-image: url("img/menu_repeat.png");
padding-left: 0rem;
padding-right: 0rem;
}
.slider {
margin-top: 15px;
margin-top: 1rem;
}
.mainlogo {
margin-top: 50px;
margin-top: 5rem;
}
.navbar {
margin-top: 0px;
margin-top: 0rem;
}
Use absolute positioning. Parent of nav should be relative positioned, and then the absolute positioned nav will be positioned in relation to that parent.
EDIT:
http://jsfiddle.net/y54m874c/
See this fiddle. In there I relatively positioned header class in which I put logo and navigation. Navigation is absolutely positioned in relation to that container. If I put nav > ul relatively positioned, and then put absolute position on li elements, then I could move them around in that unsorted list that contains them. If I removed the relative positioning in the unsorted list, then the list items would look for the next container they're in and watch what is relatively positioned, and use that as a reference.
Relative position by itself doesn't have to mean a thing. You can just say an element has a relative position, and then the inside elements will position according to him, and that element can stay where it is. But, you could also use relative positioning to position an element relative to itself.
Fixed position looks the height and the width of the window browser, and that is the 'reference frame' for it. It will move in relation to it. Static position is the default and it follows the flow of the html elements.
You could also use floats, but then you couldn't position elements to your liking.
The middle ground is to find when it's good for you to use manual positioning, and when to use floats.
Ok i got it.
I set #navbar to fixed and main-menu to fixed too.
seems to work as expectet
Thanks to all.
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>
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;?>
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>).
I`m writing an answer because I cant comment yet.
Try this:
.page-id-48 #static-footer-image{ display:none; }
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
i added
<style>
#sideshoppingcart {display: none;}
</style>
to the shopping cart page via editor
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;
}