Hi Michael,
thank you for your reply. I actually looked at the link below.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Do you think I can add below in function.php of my theme folder?
function addMyStyle() {
wp_enqueue_style( 'myCMBStyle', get_template_directory_uri().'/style.css' );
}
add_action('wp_footer', 'addMyStyle');
Thank you for your help.
Is this for styles on the frontend or in the admin?
I’m guessing frontend since you’re using wp_footer. Best practice says style should go in the <head> area anyway. I’d recommend using the wp_enqueue_scripts hook instead of wp_head and wp_footer. The rest would be fine with your wp_enqueue_style() and whatnot.
Let me know if I’m inaccurate in any part.
I am overriding size and type of input and class of DIV with my own CSS for frontend form. It seems like the css for CMB2 comes in after the content so I thought I should add my own CSS at the end of the page to override. Please correct me if I am wrong. Can you show me an example how to use wp_enqueue_scripts instead of wp_footer? should I just change “wp_footer” with “wp_enqueue_scripts” ? What does it do instead of using wp_footer?
Thank you for all you advice and help.
Correct, just simply switch which hook you use with the add_filter().
Instead of trying to load more CSS at the end, I’d recommend using stronger CSS selectors so that your custom CSS overrides. I avoid it when I can, but sometimes you do have to use !important with your CSS properties.
Hi Michael,
Does it mean that this code with “wp_enqueue_scripts” in the function will disable all other css for other plugins as well? Or does it disable only css items in my new css?
Thank you for all your lesson.
It doesn’t disable anything, it’s simply a more appropriate hook for adding custom CSS/js than wp_head or wp_footer.
With better/stronger selectors in your css, the order of which CSS gets loaded is less important, because of how CSS works.
Thank you Michael. I will give it a shot.
Best,
Jo
Hi Michael,
So I gave it a shot and I learned that it did not work with wp_engueue_style. I tried with wp_footer and wp_enqueue_scripts for add_action both did not work. And I found a line below for CMB2 style at the later portion of the source.
<link rel='stylesheet' id='cmb2-styles-css' href='http://www.askanarchitect.org/wp-content/plugins/cmb2/css/cmb2-front.min.css?ver=4.2.3' type='text/css' media='all' />
So I ended up deleting the “cmb2-front.min.css” to make my own css work. This is what I have in my css.
.cmb-td input,
.cmb-td textarea,
.button-primary {
margin-bottom: 5px;
border-radius: 5px;
width: 100%;
}
I guess I have to delete the css in the CMB2 folder whenever I upgrade the plugin.Do you have any clue why it did not work with wp_engueue_style?
Thanks.
Absolutely do not delete or modify CMB2 core in any way as CMB2 is a shared library. If you delete it, it could ruin another plugin or theme you have installed. If you want to disable the styles for a given metabox, this is how you do it.
Adding to what Justin said, as long as the CSS file was being added to the output, then the rest is just what you put in the CSS file, which is why I was talking about CSS selectors and specificity with them. It’s still steps in the right direction, better than modifying/removing the plugin’s files.
Hi Justin and Michael,
Thank you for all your help. I was able to fix it by adding the code below.
'cmb_styles' => false, // false to disable the CMB stylesheet
Thank you for your advice and I really appreciate that you guys made awesome CMB2.
Jo
I used this method too. Thanks…
‘cmb_styles’ => false, // false to disable the CMB stylesheet
