I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
Related
lit-element completely encapsulates CSS and the only way to style components is via custom CSS variables.
When using tailwindcss all styles are applied via classes, and I currently don't see a way to inject those classes from the outside world.
What I would like to achieve is to make the custom lit-component completely unaware of tailwind. It should only do the most basic styling but leave the customisation up to the user of the component.
The only solution I see right now is to provide the classes via a property and then apply them using classMap. But I don't know where users would like to apply those classes and adding them to each element is unfeasible (and unmaintainable). In addition, I have my doubts that tailwind would even work in that case due to the style-encapsulation.
It sounds like you want your users to be able add classes to specific parts within the custom element you authored?
If it works with what your component's trying to do, the best way to achieve that would be to place slots in your component and have the user provide the element to fill those slots as children to your component. That way the user directly controls what classes they want to put on it and the styling will apply as the children would be part of the light DOM.
As you've said, providing classes via property would be clunky API and styling won't apply unless you forego using shadow DOM by overriding createRenderRoot which is not recommended.
CSS custom properties are not the only way to allow users to style parts of your component as you can also add part attributes letting the user use ::part() pseudo-element to style them. If your users can write CSS instead of providing tailwind classes, that would be the way to give users some control of styling your component. See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
From the following page: Developer's Guide - CSS Style
it is made clear that in modern GWT apps there's two ways to declare css styles:
Using a CssResource contained within a ClientBundle.
Using an inline element in a UiBinder template.
How do you use either of these two methods to override the GWT default styles such as gwt-Button, gwt-TextBox etc?
I know it's still possible to use a css style sheet that you reference from either the html page or the .gwt.xml file. However, I'd like to avoid this since these methods are now deprecated.
Use an #external #-rule to disable obfuscation for the given CSS class names: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes
You can, for instance, put the following in any CssResource stylesheet:
#external .gwt-*;
But IMO, the best practice is to instead addStyleName or setStyleName (or in UiBinder addStyleNames="…" or styleName="…" respectively) on widgets. And if you want to customize a theme, copy it first as your own theme and tweak your own copy (rather than overriding styles using the CSS cascade). As an added benefit, you'll have lighter stylesheets, so they'll be faster to download for your users, and “faster is better”.
As a side note, UiBinder generates an implicit ClientBundle, where each <ui:style> element generates an implicit CssResource (and automatically calls ensureInjected() on it); so there's no much difference between <ui:style> and a CssResource.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.
This might be a basic CSS question: I have a site designed with well-defined CSS themes. I'm adding some controls (from jquery), but they have the style of their designers, not my site's. What is the easiest way (least amount of work) to make the inserted controls use the site's css rather than the styles of the control? Is there an easy way to map one set of classes/ids onto another? Or am I missing something basic about css?
I'm assuming you're using jQuery UI? If so, they have a ThemeRoller.
You can try to "map" things by defining your own widgets and the external ones at the same time as much as possible:
div.my_widget,
div.external_widget
{ border: 1px blue solid; }
How successful that can be depends heavily on your site's and the controls' structure.
As a general rule, rather change your own stylesheets to work with the control, instead of changing the control to work with your stylesheet. That way, you can easily integrate new versions of the control.
Most common way is to inspect the DOM structure of the controls you are adding, and see if you can use the classes applied to style it the way you want, typically be overriding the CSS selectors in place for the control, or by writing CSS for the control DOM structure from scratch.