I am working on a wordpress website and I am using _tk starter theme which is based on "Underscores" and Bootstrap.
I was styling the widget area from scratch, so I gave margin and padding = 0 to override bootstrap styles.
The problem is this worked for every widget except "Recent Comments" widget!
I checked it with developer tools and found that for recent comments widget ul and li, and inline style was forcing it to display some padding.
So I tried to search where this code is injected but failed to understand it. The ul id="recentcomments" and li class="recentcomments" reside in default-widgets.php
There is no style attribute assigned to these tags in that file. I tried searching in whole wordpress folder with folder search feature in netbeans but it does not show anywhere.
Here is the link to the screenshot. http://tinypic.com/r/efhwyt/8
It seems that there is a filter for removing this unwanted styles "show_recent_comments_widget_style"
in functions.php of my theme:
add_filter( 'show_recent_comments_widget_style', function() { return false; });
If you add the following to your style sheet should override the inline style.
.recentcomments
{
padding: 0 !important;
}
I got the answer and it is specific to tk theme only. Its Javascript -- . It was in bootstrap.wp.js file on line 26!
$( '.widget_recent_comments ul#recentcomments li' ).css( 'padding', '5px 15px');
Related
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.
I'm having a problem with WooCommerce. I'm developing a website with Divi and WooCommerce. The buttons on the website have a specific style and I want that in the page products the buttons have the same style but I can't do it.
I installed the WooCommerce Color plugin but it doesn't work.
I have a child theme and on the developer console I looked for the specific class of this button and I found this class: ".single_add_to_cart_button button alt"
So in the CSS of the child theme I added:
.single_add_to_cart_button button alt {
color: #00000 !important;
}
But it doesn't work either.
This is the website: http://centromindfulnessmadrid.com/ and I want to change the buttons on these pages: http://centromindfulnessmadrid.com/producto/mindfulness-retiro-de-1-dia-sabado-24/ The button: "Añadir al carrito".
Thanks a lot!
I appreciate this is an old post, and it looks like you have resolved it, but the alt class would require a period as it is not an HTML element.
You will also have an inheritance issue as WooCommerce is very strict.
This would be closer to what you need, but you can probably narrow down the classes to one or two:
.woocommerce .single_add_to_cart_button button .alt {
color: #00000;
}
I've been trying to use Chrome Workspaces to edit the CSS in my WordPress child theme more efficiently. I followed the tutorial at http://wordimpress.com/using-chrome-devtools-workspaces-for-faster-wordpress-development/ to set it up. It works for the most part, when I edit any element in my child theme, the modification shows up instantly in my browser window and I can save it directly to the local style.css .
The problem occurs when I want to add a new element to my child theme (this element already exists in the parent theme but I did not need to modify it before, so it doesn't exist in the child theme). Using the inspect tool, I found the element in the parent style.css, then copied it over to my child theme editor (in the Source tab of devtools). But making any modifications to that element is not reflected in the live browser once I do that.
For instance, this was the original code in the parent style:
media="all"
.widget a {
color: #777;
}
And I copied this to my child stylesheet and changed it to color: #000 . But there is no change in the color seen in the live browser.
Am I doing something wrong?
If you are using Google Chrome do following
Go to Settings
Clear browsing data
Check all marks
Obliterate the past hour or day, depends on when it worked properly.
Click Clear browsing data
For me it worked.
add !important - to override existing css property
Hope it works
media="all"
.widget a {
color: #777;
}
Change this to
media="all"
.widget a {
color: #000!important;//change
}
It could be down to the cache-busting query string which WordPress adds-
Here is a relevant Chromium bug report.
For now, adding this to functions.php in WordPress in order to remove the cache-busting suffix allows me re-enable persistent edits:
function yourthemename_remove_version( $url ) {
return remove_query_arg( 'ver', $url );
}
add_filter( 'style_loader_src', 'yourthemename_remove_version' );
In future, it looks like Persistence 2.0, recommended at the end of the bug report, will be the solution. It can be enabled as a Chrome DevTool experiment now. Notice that Chrome Canary doesn't work in Linux yet.
Source: https://stackoverflow.com/a/42542366
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>