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.
Related
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.
I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.
Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.
Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.
Here's the problem:
In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.
Example in SASS:
[page.scss]
.wrapper {
margin: 0;
}
[headline.scss]
.headline {
color: green;
}
.wrapper {
.headline {
color: orange;
}
}
As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".
Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...
This is a common issue when migrating to CSS Modules. In short, a css module cannot override a style from another css module, and this is by design. Styles are supposed to live with the components that render them, and nowhere else.
What you can do to refactor this is to create a component style variant and explicitly set the variant through a prop when rendered within your wrapper.
For example, suppose your headline component currently looks something like this:
CSS
.headline {
color: green;
}
JSX
import styles from "Headline.css";
const Headline = () => {
return (
<div className={styles.headline} />
);
}
Rather than trying to override the .headline class name from somewhere else, you can create a variant class name that you toggle through a prop:
CSS
.headline-green {
color: green;
}
.headline-orange {
color: orange;
}
JSX
import styles from "Headline.css";
const Headline = ({orange}) => {
return (
<div className={orange ? styles.headlineOrange : styles.headlineGreen} />
);
}
And when you render it from your wrapper, set it to the orange variant:
<Headline orange />
Tip: you can use composes to eliminate duplicate common styles between your variants.
I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.
Example:
CSS1:
...
.btn-primary {
background: #000;
}
...
CSS2:
...
.btn-primary {
background: #fff;
}
...
and CSS3:
...
.btn-primary {
background: #4285F4;
}
...
Let's assume that all three CSS are called in my HTML page.
Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?
No.
If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.
Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.
Not as is, but you could alter your style sheets so that it reads like this:
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
Then you could get the specific styles by using the following class:
<a class='btn-primary style2'>Stylesheet 2</a>
In short, you'll need to add some sort of additional method of narrowing down the different styles.
--
Another possibility would be to convert your css files to scss like so:
.style1 {
.btn-primary { ... }
}
You could then use the styling from specific sheets like so:
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.
Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.
If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].
My hacky solution:
After loading all the css files as you need,
In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers
Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.
In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.
Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).
This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.
I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.
But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS
But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.
Here is also an example to find out how overwrite works:
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}
<a id="test-link" href="javascript:void(0);">Test link</a>
As you see, just the last style applied for the background color
I have a HTML5 page which has a master css and tabbed layout. Some tabs have 3rd party controls (like bootstrap.css etc ) which gets loaded when that tab is clicked resulting in overriding some of the properties of styles set by master.css
We can solve this issue by not allowing those particular properties to NOT get overridden by !important. But we have 1000's of such properties and may not be possible to do it manually for all.
Any workaround for this?
As mentioned in one of the comments, you can use something called as CSS specificity to solve the problem.
You can read more about it here.
To be brief, make the more important styles more specific.
For example:
.my-divs .green {
color: green;
}
receives more priority then
.green {
color: green;
}
I am working with Drupal and with that, I don't always have the freedom to add a class by altering a html tag, however. I would like to apply some Twitter Bootstrap styling on an element from my custom.css file (the bootstrap css file is loaded, so styling is available).
To illustrate it better, for example, I would like to apply class="img-polaroid" (TB base styling) to an image that I can interface as div.someClass in my custom css stylesheet. I don't have simple way to alter the img tag to have class="img-polaroid someClass".
I would like to accomplish the same in my custom stylesheet. In another words, the merge happens not in the html tag but in the css stylesheet itself. How can I accomplish this with the current technologies in place? Are we there to make this possible?
Thank You
p.s. I am aware of alternatives:
-use JS to append class
-Copy and past the styling of class="img-polaroid" into div.someClass {...}
But both seem like not so nice solutions
How you go about this depends on which CSS Preprocessor you're using. You must choose one if you want to avoid modifying TB itself or the markup.
Sass
.foo {
#extend .bar;
}
Output:
.bar, .foo {
// styles
}
LESS
.foo {
.bar;
}
Output:
.bar {
// styles
}
.foo {
// styles
}
You can locate the part of the CSS code that you want to apply to the element in the bootstrap stylesheet and rewrite the selectors or copy the code to another file with new selectors so the style applies to both
.selector-from-bootrap,
.my-new selector{
...
}