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
Related
I need to remove the title from the twentytwenty theme - no problem doing this by removing it in the template of my child theme. However it still shows in the WP editor. Since it is in a divider as below:
<div class="editor-post-title">
I have tried adding a CSS like:
.editor-post-title {
display:none;
}
This works perfectly when I try it locally, in my browser editor - but it does not work when I insert that CSS in my style sheet... any thoughts ?
Your theme's stylesheet only loads on the frontend (generally).
Try this article if you want to add various styles to the editor.
Or for a quick-and-dirty fix you could potentially do something like this, but technically the above way is probably better and less hacky:
add_action( 'admin_footer', 'remove_title' );
function remove_title() {
echo '
<style>
.editor-post-title {
display:none;
}
</style>
';
}
I have wordpress site with some layout.
I need to change some css there, but got troubles overriding it.
Via webbrowser my CSS looks like:
It is places (genetated?) somewhere in theme.
Every time I refresh page I got different 'class-xyz' (on the screen it is: class-GkgfbCohxE) name in #inbound-list
I have added to custom CSS below (changed color):
But this is not loaded.
All structure of this CSS:
Do you know how to enable ovverriding this element?
It depends on the theme and plugin you use.
For my experience, this dynamic inline CSS may come from the page builder you use. If it comes from page builder, please check your page builder and adjust the style.
If you want to overwrite the css, you could simply put !important after the color attributes.
To override this css you need to use any parent id like below or you can apply some id to your body tag and write ur css with its reference
see my ex below
#parent #one li{
color: blue;
}
#one.asd li{
color: red;
}
<div id="parent">
<ul id="one" class="asd">
<li>aaa</li>
<li>bb</li>
<li>adfdf</li>
</ul>
</div>
If it's a your theme styles, you can create a child-theme, then overwrite the styles. You can also use the same selector in the child-theme css, WordPress knows that it has to take the ones from the child-theme.
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 creating a plugin and it has it's own css file (compiled from sass)
I was just wondering what the best way to approach would be regarding overriding styles.
For example, I set a H1 style for my plugin. How can I make it so that the user does not override this with their H1 style?
I know I could ask them to add my style sheet last but then my style would override theirs.
How should I approach this?
You can use unique id's or class for your elements.
or best way is
<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>
your stylesheet would be
#parentWrapper h1 { // h1 definition
}
#parentWrapper p {
}
.
.
.
The best way to avoid style collision is to ring-fence your plugin from what a user may be implementing in their own code by adding plugin specific classes to elements.
E.g. you would style h1 by adding a class called say myPlugin-h1
<h1 class='myPlugin-h1'></h1>
You could then either use your plugin to add these styles into the DOM, or require the user chooses where to add them (preferred).
That said..Typically plugins allow users to add a single class to a 'top level' element to denote it should have a plugin applied, and then the plugin stylesheet prefixes elements by this class, or assigns classes to child elements dynamically.
So, in your HTML you may have:
<div class='myPlugin'><!--
content either dynamically added by your plugin or already present
--></div>
Then your plugin CSS would include .myPlugin h1
Just add a class to your h1 tag and that will do the trick.
You do not need to add an !important tag to the <h1>, that will prevent the class to take it's course.
HTML
<h1>Hi</h1>
<h1 class="blue">This</h1>
CSS
h1{
color:red;
}
.blue{
color:blue;
}
And a working demo : http://jsfiddle.net/52Jd5/2/
In my source, I have the following code:
<style>
/*Twenty Twelve fixes and other theme fixes and styles :( */
.flex-caption {
background: #000;
-ms filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;
}
/*...*/
</style>
This is not within my personal CSS file and i have no idea where this is being pulled from.
I am linking to my external CSS file as per Wordpress Codex to include a stylesheet as per below:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
What do I need to do to remove this CSS?
EDIT*
this has now been fixed.
It looks like you started with either WordPress's TwentyTwelve theme, or another theme which inherited from it and made changes from there. If you look at /wp-content/themes/head.php I think you may find the offending styles in there.
If it's not in your CSS it's probably in header.php
Go to Appearance > Editor > Header (header.php)
I have figured what was generating this and removed. It was a plugin, and it was one that I'm not using.
NextGEN gallery plug in generates this.