I just added the shortcode to add "leave a comment" in the footer of my posts and it shows a dash before. Is there a way to get rid of that dash? I've been Googling and not seeing any answers. My test site, I'm using a Genesis child theme.
Here is the css that is causing that dash.
.entry-comments-link::before {
content: "\2014";
margin: 0 6px 0 2px;
}
In your child theme, simply overwrite it with
.entry-comments-link::before {
content: none;
}
Perfect answer. I had the same question myself. In addition to overwriting it in the child theme, I was able to use it with the Simple Custom CSS and JS plugin which allows me to preserve the CSS while switching child themes. I don't know if it works with other similar plugins.
Related
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.
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'm working on a Wordpress site and I'm quite new to this framework. There's some CSS on my page that's causing each "row of content" to have a 35px margin between it. This appears to be in a css class called wpb_row in a js_composer.css file. I'm not sure if this is some standard CSS class for Wordpress or if there's a global "have margin between each layer of content" setting.
Unfortunately I don't have 10 rep so I can't post an image of the page that's causing the issue but I can link to an image of where the issue is http://i.imgur.com/vEyznRn.png?1 and the url for the site is http://am12.siteground.biz/~youbambu/ecorecycling/
What's the best way to override a CSS class within Wordpress from a standard point of view? I've tried adding custom css to override this and remove the margin-bottom: 35px; in Appearence->Editor->Stylesheet.
Is it possible to either override this CSS in one global area? I'm using a theme called Picasso in wordpress if that's any help, but I don't see how to override this CSS.
To overrride the css use !important. So adding the following to your stylesheet should remove the margin bottom:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
}
Is it possible to either override this CSS in one global area? I'm using a theme called >>Picasso in wordpress if that's any help, but I don't see how to override this CSS.
I would be careful editing/modifying there because I suspect you will lose these changes/modifications on theme updates (which Picasso auto updates).
The theme has a designated place located at Theme Options > Tools > Custom CSS. The adjustments you add here are loaded on every page, just like the stylesheet in editor. Furthermore, these changes are not cleared upon update.
Just my two cents, hope it helps.
You can easily achieve this goal. This is not a WordPress standard or something.
you can edit js_composer.css and change what you want. OR
you can override this css rule adding a new role after js_composer.css loads. Something like:
<style>
.wpb_row { margin-bottom: 0px!important }
</style>
I am using the plugin: "Wordpress Contact Form 7".
I want to override the CSS that the plugin uses with my own CSS.
I want to do this in such a way that even if I update this plugin, or change my theme, my changes will still remain.
What is the best way to do this?
So far I have been trying to edit style.css of my theme. But this has produced inadequate results. Since style.css may be loaded before the css of the plugin, the css may be overridden by the plugin. It works only if I specify properties for things that have not been defined in the plugin css.
If you only have a few modifications to apply, by far the simplest way to override a plugin's stylesheet is to add body in front of the element you are targeting within your style.css file. Adding body adds CSS specificity to the selector, allowing it to override the original styling. Like Reyzis say.
body .plugin-class {
font-size: 30px;
}
have you tried this for example?
body {
background-color: red !important;
}
edit: sorry - fixed