I'm writing a plugin for Wordpress which I need to enqueue style files in front end. But when I do this some other plugins like vs_composer add their styles files after my plugin and override my codes. So I think there are two options to deal with this situation. First one is to make some CSS rules !important which I think is not a professional way. The other option is to load my plugin CSS files after all others; But is it possible?
I guess this goal is not achievable by using $deps parameter in wp_enqueue_style as it doesn't load files if dependency files don't exist.
You could enqueue your stylesheets by hooking into wp_head, which prints data in the head tag on the front end.
function enqueue_styles() {
wp_enqueue_style( 'frontend-style', plugin_dir_url( __FILE__ ) . 'styles.css' );
}
add_action( 'wp_head', 'enqueue_styles' ); // default priority: 10
If you need to output your stylesheets later, you can lower the priority.
For example,
add_action( 'wp_head', 'enqueue_styles', 20 );
Alternatively, you could change your selectors to be more specific, so your CSS rules take precedence over vs_composer's.
div {}
div.my-class {} /* more specific */
body div.my-class {} /* even more specific */
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. […] Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.
— MDN source
Related
I am trying to enqueue my custom css AFTER woocommerce css but I don't know why it's not working.
it should be quite simple following the documentation here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
that's my code
function my_theme_enqueue_styles() {
$deps = array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general');
wp_enqueue_style('header', get_template_directory_uri() . '/css/header.css', $deps, '3.2.6', 'all');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
my custom css header-css is indeed loaded but before the dependencies.
I tried every kind of possibilities (with or without version number, with or without media parameter) without any success.
I found the same solutions in other sources like this one: https://bigwilliam.com/override-woocommerce-styles-semantically/
even though I can't use get_stylesheet_directory_uri() because mine it's not a child theme.
As you can see in the picture below, woocommerce styles override the height of the class 'logo', because it is actually loaded before and not after woocommerce-layout.css. I don't know what to do.
woocommerce override my custom styles
I got the answer!
my custom css is actually loaded AFTER woocommerce-layout.css and this is a selector cascade css rule issue (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)
this is my HTML
<body class="page-template-default page page-id-5 logged-in woocommerce-cart woocommerce-page">
...
<img id="logo" class="logo" src="img/secondary-color-positive.svg">
...
</body>
the picture above shows that
.woocommerce-page img overrides .logo properties
that's not because my custom css is loaded before (as I was thinking) but because .woocommerce img is stronger than .logo as per selector cascade css rule
I got it fix just changing my css:
from this .logo{...}
to #logo{...}
and now #logo is stronger than .woocommerce img as you can see below
custom css override woocommerce-css
I have a child theme set up. I have a plugin WP-SCSS, I set directories and when I, I think, refresh the page, or maybe it's on save, but somehow the SCSS compiles to CSS. Great, but the issue is the css is not overriding the styles from the parent.
I'm using the bought theme Unicon. I am not sure why this is causing me issues, I don't want to have to keep writing !important on everything.
This is my style.css file:
/*
Theme Name: Unicon Child Theme
Description: Unicon Child Theme for your Customizations
Author: minti
Template: unicon
Version: 1.0
*/
#import url("css/main.css");
#import url("../unicon/style.css");
And my functions.php
<?php
function cls_scripts() {
// wp_enqueue_style( 'cls-css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'cls_scripts' );
I'm not sure if it's the SCSS plugin causing this, worst case scenario I just don't use SASS and write everything into my style.css, thoughts?
Hello I followed the steps on:
https://codex.wordpress.org/Child_Themes
and still no luck, the theme activates fine but the parent theme still remains fully active.
Style.css:
functions.php:
File Location & WP Editor:
Any help would be much appreciated thank you. Again the child theme does not seem to overwrite the parent theme dalton.
You shouldn't need to enqueue the parent theme's stylesheet in your child theme CSS - that should already be enqueued (and you may find, if you look in the source, that you've simply got two copies of the parent theme stylesheet in place).
Enqueue your child theme stylesheet like so:
add_action('wp_enqueue_scripts', 'my_the_enqueue_styles', 12); // Give this a lower priority so that it should be enqueued after the parent theme
function my_the_enqueue_styles() {
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css');
}
...then, in your child theme CSS, add something obvious like:
body {
background-color: purple;
}
...and you should see that the child theme stylesheet is loaded alongside your parent theme elements.
It's worth noting that get_template_directory_uri() will always refer to the parent theme, whereas get_stylesheet_directory_uri() will always refer to the currently-active child theme. If there is no child/parent theme and you're using a regular standalone theme, you can use these commands interchangeably.
I know I should not really ask this question, but before I get down voted to oblivion hear me out … I try to make the best out of a really bad situation:
My client has bought a WordPress theme and hired me to customize some parts of it. The bought theme is a a child theme and is a coding horror …
The theme’s stylesheet, tries to overwrite some styles from the woocommerce plugin, while the woocommerce stylesheet is loaded after the theme’s stylesheet. To do so it uses a crapload of !important declarations. I can not really fix any of this without breaking the theme update function.
So here is my plan: I want to add another stylesheet at the end, which overwrites all the mess, that has been done before. But simply putting it there would not overwrite all the !important declarations from the stylesheets before. So I was wondering if there is a way to prioritize my stylesheet above all the mess from before.
Any way to up my priority above the !important declarations are also appreciated!
You can either:
Ensure your declarations are equally specific but come later in the stylesheet:
div p strong {color:red!important}
div p strong {color:blue!important}
<section>
<div>
<p>lorem <strong>ipsum</strong></p>
</div>
</section>
Make your declaration more specific:
section div p strong {color:blue!important}
div p strong {color:red!important}
<section>
<div>
<p>lorem <strong>ipsum</strong></p>
</div>
</section>
See: https://css-tricks.com/specifics-on-css-specificity/ for some useful tips.
Normally with a child theme you would directly edit it. But if you are concerned about getting updates for the child theme, you could also deregister the crappy stylesheet and enqueue your own version from a plugin.
<?php
/*
Plugin Name: Fix Theme Stylesheets
Plugin URI: http://stackoverflow.com/q/33544364/383847
Description: Save me from these poorly coded marketplace themes
Version: 0.1-alpha
Author: helgatheviking
Author URI: http://kathyisawesome.com
*/
function so_33544364_custom_scripts() {
$theme = get_template();
if( ! is_admin() && 'your-themes-folder-name' == $theme ){
// get rid of the child theme's crappy stylesheet
wp_deregister_style( 'child-style' );
// optionaly load the parent theme directly instead of importing. can be better for minifying plugins
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// load your improved stylsheet! style.css in the same folder as this plugin file
wp_enqueue_style( 'your-style', plugins_url( 'style.css', __FILE__ ) );
}
}
add_action( 'wp_enqueue_scripts', 'so_33544364_custom_scripts' );
!important is in 99% of cases a lazy way to obtain something that should be reached being more specific; specificity AND positioning are both keys elements, for instance:
p.foo { text-align: right; }
can be overwritten in this way:
body p.foo { text-align: left; }
Specificity is very important and it's the right way to go, here how you can calculate it:
link
ya you will try to using parent div..eg:-
.parent_div Child_div ul li{
margin: 0px;
}
this is way to Without using !important.parent div most be ist preroty rather than !important
I'm trying to add support for CSS3 attributes background-size, background-clip and background-origin, in the custom backgrounds. To do so, I've modified the fully-background-manager plugin (a very simple plugin that sets custom backgrounds per page), to set those attributes.
They seem to be set and stored correctly in the admin interface, but when generating the style tag that sets them, the new values are ignored; the only supported properties seem to be the ones mentioned in http://codex.wordpress.org/Custom_Backgrounds
Custom background are generated by Wordpress itself, not the theme. I know that the theme must enable it use by declaring itself compatible and setting defaults with
add_theme_support( 'custom-background', $defaults );
and Wordpress will generate the custom-background css code
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
And the plugin itself seems to use
add_filter( 'theme_mod_background_image', array( $this, 'fbm_background_image' ), 25 );
to set/override the default css attributes, like 'theme_mod_background_image', but it only prints the css of the supported/overriden variables. In other words, Wordpress does not know theme_mod_background_size, so it cannot override it to print it.
Is there a way to add those attributes to Wordpress itself? I've reading the code of admin/custom-background.php, but I've failed to see any reference to the supported attribute list. Are they in some hidden include? In the the database itself? If I were to set them, would wordpress generate the CSS anyway?
I hope I have explained it properly. I've not found anything about it. The majority of plug-ins set those values in javascript with jQuery instead of using the proper CSS attributes. If not, a tutorial about the internal workings of the lastest version of wordpress itself could be useful as a clue to investigate.
Thanks in advance
Use the callback parameter wp-head-callback with a custom function:
add_theme_support( 'custom-background', array( 'wp-head-callback'=> 'my_custom_background_cb' ) );
You could replace the entire default _custom_background_cb callback function copying and modifying it, but I don't like to duplicate code if is not necessary, so I would do something like this:
function my_custom_background_cb() {
ob_start();
_custom_background_cb();
$buffer = ob_get_clean();
$my_style = "
background-size: 80px 60px;
background-clip: border-box;
background-origin: content-box;
";
echo str_replace('</', $my_style.'</', $buffer);
}
I get the original code from _custom_background_cb and then I can add my style code before echoing.
Obviously you need to put in $my_style your attributes data.
I was reading here, and it seems to be as easy as reference your custom function with the css in it, to the parameter that is for the admin head callback...
<?php
add_theme_support( 'custom-background', array('wp-head-callback' => custom_function));
function custom_function() {
echo '<style>';
//your custom css
echo '</style>';
}
Why not using the admin head callback function to add the other CSS?