I am facing header media issues. I don't want that header area on my top of the website. I tried CSS code
.home #wp-custom-header {
display: none;"
}
but it's not working. please check my site for more details hindizone.in
It would be a better solution to change your theme template file so there is no such div container to be hidden. This can normally be found in header.php file of your theme. Delete the div with the class header-bottom.
Another way would be using CSS as you already tried. But you do not have an element with id wp-custom-header so this code is doing nothing. You can find out the right element to target with using the inspector of your browser.
I did this with your code and therefore found the classes you need to address in your css file.
Add following code to your custom css in the theme editor, or inside style.css of your theme:
#site-header.top-header .header-bottom {
display: none !important;
}
With the !important statement you make sure, that the display value is not being overwritten somewhere else in your stylesheet.
#site-header {
display: none;
}
...should work for your site.
Related
I have tried this CSS, But not working, still showing.
.wpnotif_admin_conf .wpnotif_sts_logo {
display: none !important;
}
Now what I can use to hide this Class from the Admin Area?
Use a comma if these are 2 classes.
.wpnotif_admin_conf, .wpnotif_sts_logo {
display: none !important;
}
It depends on where you are adding the CSS. As this is a backend page, adding the CSS on style.css or additional CSS in Customizer won't work.
You need to add a custom CSS for the admin and mention the CSS there. Check admin_enqueue_scripts.
For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,
I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.
In my html webpage I insert an iframe
but in this iframe bottom show a div which's class name mobile-desktop-link
So you want to hide the "view web version" link? Alright, than you can use this:
.mobile-desktop-link a.home-link { display: none; }
Add this to your stylesheet and you are ready to go. Of course this is only possible if the iFrame is on your domain. If you have tried the snippet I shared here above, with or without !important statement and it did not work? Well than, you can't remove it.
How do I control the width or responsive width of the CODE tag in a Wordpress post?
Under the comments section on this post, the text, "You may use these HTML tags and attributes:" and the code elements after it, doesn't fit the width of the container of this responsive website design.
This line of code examples simply extends out past the container it's in. Here's the post I'm working on:
http://www.flippinlaw.com/what-is-sound-financial-advice.html
I've noticed the issue in 3 different browsers and it seems to be a bootstrap related style. Any help is appreciated greatly. Thanks!
Please remove white-space: nowrap; from code on bootstrap.css line #983
It is safe to disable your code { display: block; } too
Adding display:block to the code tag looks to work for me
code {
display: block;
}
Add it to your style.css file
edit
Note that will change it for every code tag on the site, so in case you don't want to do that you can either add it inline to that particular code tag (which isn't really the best idea):
<code style="display:block;"></code>
Or create a class for it:
code.code-block {
display: block;
}
<code class="code-block"></code>