I'd like to say, in a single, centralized location,
#def mainColor = #f00;
and then, in all of my other css files, refer to mainColor without having to redefine it. Then when I change mainColor in once place, my entire app changes color.
The best way I can think of so far is to include two #Source files for every CssResource declaration and always include the global def file. Are there any other ways?
As far as I know, this is your only option:
style.css
#def mainColor #f00;
*.ui.xml
<ui:style src="../../../styles/style.css">
.widget{ color: mainColor; }
</ui:style>
The downside to this is the relative path. Each ui.xml will require a different src path.
Alternatively, if you dont mind using a Constants.java file (instead of css),
you could use #eval
<ui:style>
#eval mainColor com.myproject.client.Styles.INSTANCE.mainColor();
.widget{ color: mainColor; }
</ui:style>
Related
I'm writing a desktop application with Electron and ReactJS that edits CSS files. I need to scan the CSS looking for a class selector, and then clear the following declaration block and add some new properties.
The tricky part is matching the class in the selector. I need the class to be the actual target (not a parent), but there might be multiple comma-separated selectors, and so I need to check all of them. For example, in this file I'm searching for the containerApp class:
.section-main .section-right , .menu .container-manu , .containerApp .container-nav {
background: black;
}
.section-main2 .section-left , .menu .container-manu , .section-group-d .containerApp {
background: red;
}
The first block doesn't match because .containerApp is only mentioned as the parent of the real target, .container-nav. The second block does match, and I would want to remove the background: red; and replace it with something else.
What's the best way to go about doing this CSS matching and rewriting?
i create my own starterkit base on https://github.com/barbar/vortigern and all ok but i have one problem.
Usually when i want to connect all style to the App i'll do
import '../styles/scss/bundle.scss';
bundle.scss - contains all imports.
But in isomorphic case all some complicate.
.global {
background: yellow;
>.child {
background: tomato;
}
}
transform in:
.app_global_1pn {
background: yellow; }
.app_global_1pn > .app_qwe_FD8 {
background: tomato; }
question 1: app_global_1pn - that name will remain forever? And i'm can use it like
<Tag className='app_global_1pn' />
question 2: Is there an solution without uglify style?
This behavior exists so that duplicate style names in multiple css modules don't cause conflicts with the generated CSS. If you don't want to use css modules, then you can always pre-compile your CSS and load it as a static .css file. But then you won't have the benefits of css-modules such as hot-reloading etc.
I have this code for my form, it inherits the text color of the theme am using, I want give a different color to the text in the input text bar, I have the form below. Thanks
input{
color: [some color];
}
Try doing it in css. Might want to add a class to the css/input to uniquely identify it and avoid global styles.
This can either go in a css stylesheet or a style tag on the page.
A stylesheet in generally recommended, but a style tag would go above the markup like this
<style>
input{
color: [some color];
}
</style>
I'm trying to apply css with GWT Button widget, however I can apply CSS gradient, the "embossed" style of the widget is still there. How can I remove that?
My gwt application is inherting from this theme:
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
Als have tried:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
I also have tried adding:
.gwt-Button {}
In the main css file that is loaded on the page however the embossed style is still there.
Anyone knows how to remove the embossed style?
Option 1: Not using themes at all
If you don't need the default styles, and generally want to give the page your own style, then it's easiest to completely omit the <inherits> statement for the themes. GWT works very well without using a theme.
(Note: If you still need the (image) resources from the theme, but without injecting the CSS stylesheet into the page, you can inherit com.google.gwt.user.theme.clean.CleanResources instead of com.google.gwt.user.theme.clean.Clean. This way they will still be copied automatically to your war folder.)
Option 2: Selectively turning off theming for buttons
If however you generally want to use a theme, and only need to give some buttons your own style, then an easy solution is calling
button.removeStyleName("gwt-Button");
Note: Instead of removeStyleName() you could also use setStyleName("my-Button").
For convenience (and for easier usage in UiBinder) you may want to derive your own class like
package org.mypackage;
public class MyStyleButton extends Button {
public MyStyleButton(final String html) {
super(html);
removeStyleName("gwt-Button");
}
/* ... override all the other Button constructors similarly ... */
}
Which can then be imported and used in UiBinder like
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:org.mypackage'>
...
<my:MyStyleButton>...
Option 3: Actually changing the gwt-Button class attributes
If you want to keep the themed look of the buttons, and only change a few style attributes, then it's also possible to overwrite certain attributes in the predefined style classes with !important (as suggested by #bouhmid_tun). But be careful: The list of attributes might change in the future. Here are all the predefined style classes for .gwt-Button of GWT 2.4.0 for your convenience:
.gwt-Button {
margin: 0;
padding: 5px 7px;
text-decoration: none;
cursor: pointer;
cursor: hand;
font-size:small;
background: url("images/hborder.png") repeat-x 0px -2077px;
border:1px solid #bbb;
border-bottom: 1px solid #a0a0a0;
border-radius: 3px;
-moz-border-radius: 3px;
}
.gwt-Button:active {
border: 1px inset #ccc;
}
.gwt-Button:hover {
border-color: #939393;
}
.gwt-Button[disabled] {
cursor: default;
color: #888;
}
.gwt-Button[disabled]:hover {
border: 1px outset #ccc;
}
To avoid using GWT default style, I just use !important tag in my CSS file. You'll find here an example of doing so : Remove absolute position generated by GWT. Good luck!
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created