How can I overwrite the .css files from the wp-includes directory?
I have to change the color of the wp-block`s image captions.
This should be done by adding this to my theme`s style.css:
.wp-block-image figcaption {
color: #fff;
}
But there is already a rule for this element in: wp-includes/css/dist/block-library/style.min.css, and it overwrites my rule.
I do not want to use !important, because it is not recommend by Google, is there another method to overwrite these rules?
Thank you
add !important to overwrite:
.wp-block-image figcaption {
color: #fff!important;
}
if the keyword !important is already used in the style you are trying to override, then you need to have your css included AFTER the css you are overriding, and have equally specific selector, or more specific selector and also include the !important keyword
edit: to avoid using the !important you can follow the second part of my answer.
If you make sure your custom stylesheet is included AFTER wp-includes/css/dist/block-library/style.min.css, it will override anyway. That's why it's called 'cascading style sheets'.
To be sure your stylesheet is loaded after the default one, add it as a dependency to your stylesheet.
Enqueue your stylesheet like this:
wp_enqueue_style(
'your-custom-stylesheet-handle',
'path/to/your/custom/stylesheet.css',
['wp-block-library']
);
Also you can put a selector before the other selectors. That way it's nested deeper and has a higher priority:
body .wp-block-image figcaption {
color: #fff;
}
Since you don't want to use !important, you'll need to edit the existing CSS or use an in-line style.
If you update the existing CSS, you risk it getting switched back after updates.
For the in-line option: Add style="color:#fff;" to the element that you want to change. This will override any external CSS.
Related
I'm trying to change the padding on mat-cell and I've noticed some weird behavior.
If I write the css inside the component's css file everything works just fine, but if I write it in style.css (I want to apply it to the whole app) it gets overwritten by the default.
I guess this has to do with the order in which the css files are applied. If that is the case, how can I see this order and is there a way to change it or bring style.css on top?
I would suggest to create a separate .scss file reserved for styling globaly Angular Material elements, and importing it in the main styles.scss file.
Answering your question - propably you're not 'specific' enough. First of all it would be nice to add an additional custom class to your Material element so the custom styles will be applied only when this class is present. Example on styling
.mat-table.my-custom-class {
width: 100%;
.mat-cell {
font-size: 20px;
padding: 20px;
}
}
You might nest the elements event more for higher css specificity
That works for me:
.mat-cell {
padding: 12px!important;
}
Check for the parent scope of default style which is overriding css added in style.css using developer tool. Use the same parental scope along with !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;
}
I have an external CSS file which is being imported into one of my pages. This external CSS assigns styles to HTML tags. For example,
table {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
tr {
width: 100%;
font-size: 3em;
// long list of CSS styles
}
What is the best way to override these external CSS styles for a single table? For example, if I have a table and I don't want these external style on my table, how would I do that?
Thanks.
Edit - As a clarification, the "long list of CSS styles" has hundreds of styles. Most of the answers so far suggest that I override the provided CSS. Do I need to override all of the hundreds of styles?
Load your own CSS after the other CSS you want to override. The last read rules (if the same level of specificity) will win out. You only need to override the specific rules you need/want to -- not all of them.
you could use inline styles on your table,
<table style='width:90%'>
<tr style='font-size: 4.4em'>
or set up separate classes for the table in the external file, or create another .css file containing these styles
.otherTable{
width: 90%;
font-size: 2.3em;
// long list of CSS styles
}
and in your html,
<table class='otherTable'>
You should rewrite them to your needs right after the external css file.
Load them in this order:
http://www.externalserver.com/styles.css
css/general.css
And then apply your styles which will suit your website theme.
In addition to what j08691 stated, if you have issues with your CSS taking effect, add the phrase "!important" before the semicolon to ensure it overrides the other settings.
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Be lazy and just scribble some javascript on that particular page.
Here is the SO Q/A on that:
https://stackoverflow.com/a/196038/1617149
Or you can do it in jQuery/Prototype before the page is rendered, e.g. on DOM load.
One of my widgets contain a programmatically generated list of ToggleButtons. I would like to style them, but I'm not sure what the best approach is. GWT provides rules like .gwt-ToggleButton-up and .gwt-ToggleButton-Down that I could override. I am able to override these by putting my rules in a style.css file and referencing it from my HTML file (although that approach is deprecated).
If I include the following in the UiBinder that contains the buttons, the styles aren't applied:
<ui:style>
.gwt-ToggleButton-down {
color: red;
}
.gwt-ToggleButton-up {
color: red;
}
</ui:style>
(I'm guessing that has to do with how GWT obfuscates CSS names.)
I could also make a new UiBinder component that just wraps ToggleButton to apply my own style rules, but that may be unnecessarily cumbersome.
Should I ignore the .gwt-ToggleButton-* rules entirely and define my own rules, applying them with toggleButton.addStyleName()? Or is another approach preferable?
#external will prevent obfuscation if that's the route you want to go.
<ui:style>
#external gwt-ToggleButton-down, gwt-ToggleButton-up;
.gwt-ToggleButton-down {
color: red;
}
.gwt-ToggleButton-up {
color: red;
}
</ui:style>
You need to put all the styles into .css file which is located under war folder.
I am using the plugin: "Wordpress Contact Form 7".
I want to override the CSS that the plugin uses with my own CSS.
I want to do this in such a way that even if I update this plugin, or change my theme, my changes will still remain.
What is the best way to do this?
So far I have been trying to edit style.css of my theme. But this has produced inadequate results. Since style.css may be loaded before the css of the plugin, the css may be overridden by the plugin. It works only if I specify properties for things that have not been defined in the plugin css.
If you only have a few modifications to apply, by far the simplest way to override a plugin's stylesheet is to add body in front of the element you are targeting within your style.css file. Adding body adds CSS specificity to the selector, allowing it to override the original styling. Like Reyzis say.
body .plugin-class {
font-size: 30px;
}
have you tried this for example?
body {
background-color: red !important;
}
edit: sorry - fixed