When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
Related
I am using a plugin on a wordpress site which operates in light/dark mode where I can set the colours manually. However the headers are automatically inheriting the theme colours.
I have tried inspecting the code on the grid to try and isolate the class and create a custom CSS code to remove the inherit property.
The code that the issue exists in is
.tg-barking-mouse a:not([class*="tg-element-"]),
.tg-barking-mouse a:not([class*="tg-element-"]):active,
.tg-barking-mouse a:not([class*="tg-element-"]):focus,
.tg-barking-mouse [class*="tg-element-"] *:not(del) {}
Within this bracket, the margin, padding, color etc exist. When I remove color it does exactly what I would like it to.
However when I paste the same code listed above in CSS and write color:none within the bracket, it doesn't seem to add to the element and overwrite the current color settings.
I believe there is a simple solution which will allow me to isolate the correct element but I'm not too sure what I'm missing.
Is it only the header that has the issue?If it is then you can use css to set your preferable color choice. try include important property like color: #000 !important; or any color of your choice to see if it can do the trick.
Thanks everyone for your help, I was able to work it out by targetting h2 within the class and resolved the issue with the inherit property:
h2.tg-item-title {
color: inherit !important;
}
And it has inherited the plugin's text style rather than the Wordpress theme.
I was trying to add some css styling to my wordpress website. However, I'm quite confused how to select the element and add the css !
Let me explain it in detals in three scenarios:
Picture 1:
I'm going to change the color and width of that button with text "Submit your attendance" inside. I wanted to make it red.
First Try: Picture 2:
I selected the calss which is :
wpcf7-form-control wpcf7-submit
Added the background-color: red , but it didn't work.
Second Try: Picture 3:
I did the same for this class:
wpcf7-form-control
Thrd Try: Pictur 4:
In inline style, when I add background-color: red and width: 100% in workes. I noticed a style attribute is also added. However, I'm not sure how to add in my Custom CSS of wordpress. I mean which element should I select? Of course Inline-style is not an element.
This is not an issue with regard to WordPress. This is due to CSS Specificity. What this means is that the rule that is more specific will "win" and be applied. This is why inline styles typically work over non-inline styles.
In your example, the rule that is being applied is more specific than the one you're trying to override with.
There is a hierarchy when it comes to specificity and the order in which rules are applied. Here they are in order of most specific to less:
Inline Styles
Ids - targeting the ID of an element is more specific than targeting a class
Classes, attributes and pseudo-classes (for example :hover)
Elements (for example a "p" tag) and pseudo-elements (:before)
Either add an ID for the your button or target the class in a more specific manner. For example body .thecontainer .thediv .anothercontainer .myelement
This might be work. You need to add !important property.
wpcf7-form-control{ background-color:red !important; }
Try this.
To update worpress css you have to edit the file style.css
Appearance -> Editor -> style.css (search inside other files)
or
Appearance -> Customize -> Additional CSS (where you have to add manually every line of code)
Sometimes you need to add "!important;" at the end of line, something like:
background-color: red!important;
I was wondering how to override the encapsulated CSS of an external component.
So I am using material2 in my project and the tabs component has a the attribute overflow set on tab-body. Is it possible to override the overflow value?
You can use the special css /deep/ instruction. See the documentation
So, if you have
app
sub-component
target-component
<div class="target-class">...</div>
You can put in your apps css (or less):
/deep/ .target-class {
width: 20px;
background: #ff0000;
}
Obviously, you can put this css fragment in sub-component as well.
From this article
Although the style of a component is well isolated, it can still be easily overridden if necessary. For that, we just need to add an attribute to the body of the page:
<body override>
<app></app>
</body>
The name of the attribute can be anything. No value is needed and the name override makes it apparent what its being used for. To override component styles, we can then do the following:
[override] hello-world h1 {
color:red;
}
Where override is the attribute, hello-world is the target component, and h1 is whatever you are trying to restyle. (get this right or it wont work).
Your component hello-world would be
selector: 'hello-world',
styles: [`
h1 {
color: blue;
}
`],
template: ` <h1>Hello world</h1> `
I think this is the most elegant way.
Alternatively if you are building a library of some sort, you can reset the styling altogether by doing something fancy in your css like:
:host-context(.custom-styles) {
//.. css here will only apply when there is a css class custom-styles in any parent elem
}
So then to use your component you'd use
<hello-world class="custom-styles">
But this is way less convenient than the first option.
::ng-deep .tag-or-css-class-you-want-to-override {
/* Add your custom css property value. */
}
The syntax ::ng-deep is used to override outside css class or tags without using ViewEncapsulation.None.
I see variations of this question a lot and since this is the top question on the subject I want to give the simplest answer. ng-deep and similar functionality is deprecated, so it's best to just rely on vanilla CSS.
Simply create a CSS selector with a higher specificity.
Most people (including myself) get hung up trying to do that because they don't understand two things:
Angular View Encapsulation
CSS Specificity
Angular View Encapsulation
View Encapsulation ensures CSS within a component only affects that component. To affect other components, you need some global CSS. You can do this by using a global style file like styles.css or by disabling View Encapsulation on a component.
#Component({
...
encapsulation: ViewEncapsulation.None
})
CSS Specificity
When two selectors select the same element, the CSS that actually gets applied is based on specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You can increase specificity by simply adding more elements to your CSS selector. For example p.className is more specific than just .className. If you're lazy, you can just repeat a class name to increase specificity. .className.className is more specific than .className.
So to override any CSS in an Angular project, go into styles.css and repeat the class selector until your CSS has a higher specificity than the original.
.className.className.className {
color: red;
}
Didn't work? Add another .className.
Just check the class that is being applied to the tabs by the external component (use Inspector or any other tool). In your style css file, add the same name of the class for the tabs and set the overflow property along with adding !important to it to make sure it overwrites the previous one. Also make sure your css link to the page is added after the external component css link if any.
Hope this helps.
::ng-deep .css-class-you-want-to-override{
/*your custom css property value. like below */
background: white !important;
}
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I have a css sheet for a big project that I can't change, "cantChange.css"
I also have a css sheet for a small portion of the project that I am able to change "canChange.css"
Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.
Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?
The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:
background-color: blue !important;
If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.
You've got a few options to address this:
Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)
You can make your own declaration MORE SPECIFIC to override the others.
For example:
body.someclass .anotherclass { ... }
<body class="someclass">
will always override .anotherclass { ... }