I built a tab section using Divi Builder but I'm struggling to remove a border below line at the end of the tabs.
I did add;
border: none;
ouline: none;
all border lines were removed but the below line is still there.
how can I remove that line?
Place this code to your child theme or divi theme options -> custom css or in a code module in the page you want to apply this:
ul.et_pb_tabs_controls:after { border: none !important; }
ul.et_pb_tabs_controls:after {
border: none !important;
}
This works, but needs to be added in Custom CSS for specific page or in divi theme. Doesn't work in module Custom CSS.
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.
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.
I have been trying to remove this breadcrumb feature from my WordPress site but don't know how to do. Please help. It shows in every page.
I want to remove from all pages.
You can use this CSS:
nav.woocommerce-breadcrumb {
display: none;
}
This can be added via a child theme or within your WordPress Customizer
.
In your child-theme or custom CSS box, add the following code:
.woocommerce-breadcrumb {
display: none;
}
If that doesn't work, use !important like so:
.woocommerce-breadcrumb {
display: none !important;
}
Do not use !important unless necessary and only edit your child-theme or you will lose this modification on next theme update.
It's best to put the above code in the CSS box if your theme has one. It can usually be found under 'Theme Options' in wp-admin.
The code I gave will simply hide the concerned CSS class.
Hope this helps.
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 trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.