I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
Related
I would like to remove the following from the HOMPE PAGE ONLY!
I have access to page editor but not sure what to insert in the CSS editor on that page.
I want to remove the below:
<div class="fs_img_header header_video_fs_view" style="width: 1028px; height: 789px;"><div class="stat_img_cont" style="background-image: url();background-size: cover;background-position: center center;"></div></div>
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none;
}
if you're using Wordpress and the css has no effect:
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none !important;
}
To display it only on the homepage use following plugin (easy-way):
https://de.wordpress.org/plugins/css-javascript-toolbox/
With this plugin you can choose where it displays your custom css (in this case the homepage).
Let me know if this helps.
I basically wanted to know how I could remove the button in the top right of this website . I could not find the actual button within the CSS of the website, so I will have to result to this. Anyone has an idea?
add this css to hide it
#genesisexpo_button_5dca4f5d12381 {
display: none;
}
if you need to hide it on home page only please add bellow code
.home #genesisexpo_button_5dca4f5d12381 {
display:none;
}
.home .header_button .genesisexpo_module_button a {
display: none;
}
can try this , this is only to hide on home page
I have an icon which is actually on my webpage but I still cant see it.
HTML
<i class="iconMan"></i>
CSS
.iconMan{
background-image: url(../../assets/imgs/iconMan.png);
display: block;
}
this is what I get:
The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work.
Any suggestions what I could do?
for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.
.iconMan {
display: inline-block;
}
.iconMan::before {
content: url(../../assets/imgs/iconMan.png);
}
You have missed quotes
.iconMan{
background-image: url("../../assets/imgs/iconMan.png");
display: block;
}
try to do like this
<img src="/assets/imgs/iconMan.png"
I guess it will work
just put this to your html code
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.