I am writing a GWT application in which everything on the screen is in some widget or other, i.e. there's nothing there from the HTML file in ordinary HTML.
I would like all the text to appear in a certain Google web font. My question is, how to apply the font to the widgets in some kind of automatic way? If I put the font-family CSS in the body{}, none of the widgets picks up the font, but ordinary HTML does (and, like I say, there isn't any of that).
On the other hand, I want to avoid this kind of thing, which is what I've got at the moment, in my stylesheet:
.gwt-Label, .gwt-TextBox, .gwt-Button, .gwt-DialogBox .Caption, .gwt-EveryOtherKindOfWidget....
{
font-family: Quattrocento, serif;
}
So my question is, how can I get everything to inherit this font? I feel I must be missing something fairly fundamental here. Can anyone help?
Thanks
Neil
So there are a couple of issues here:
The default GWT theme (standard) includes the standard.css file. This file contains style definitions for all widgets. The theme is defined in your module's xml file:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
There are different ways on how to override widget styles:
copy the standard.css file, include it as a CSSResource in a ClientBundle in your app and remove the inherit line from your module's xml file.
add your stylesheet which overrides the widget styles defined in the standard.css after the inherit line in your module's xml file (see here for more details)
i.e:
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
Looking at the standard.css stylesheet you will see that the widgets don't define any fonts. It is actually inherited from the body style.
excerpt from the standard.css:
body, table td, select {
font-family: Arial Unicode MS,Arial,sans-serif;
font-size: small;
}
So you probably only have to override the body part in your custom stylesheet with the google fonts and all widgets will inherit it.
Here comes the second issue: Loading the google fonts isn't that easy because of stylesheet precedence/inheritance.
This wiki describes how to load the google fonts into your GWT app.
Related
Css error in codename one
i'm having issues with the css and when i run the simulator the css is not working.
The # selector type isn't supported in Codename One. You need to apply CSS explicitly to UIIDs. The CSS selectors in general for Codename One are far simpler than the full CSS see https://www.codenameone.com/manual/css.html
Just write the UIID of the component you want to style without the # character e.g.
Button {
color: pink;
}
I am having an issue with Liferay 7 Themes and AUI. First, it is my understanding each Liferay page is divided into sections, as defined here:
- https://dev.liferay.com/es/develop/tutorials/-/knowledge_base/6-2/setting-up-custom-css
And I must wrap any custom css with the appropriate wrapper, as defined in the above link. Any css defined in the theme applies to the appropriate section of the page, for all pages in the web application. I can also create custom wrappers within the theme, which individual portlets may reference using the 'com.liferay.portlet.css-class-wrapper' annotation.
I can therefore change the AUI Button's appearance by creating a css class and referring to it as follows:
< aui:button cssClass="btn-lg".../>
But it is less clear to me how I can apply custom css to AUI Data tables. Guidance is certainly appreciated.
You can use theme contributors.
And there create a .scss file and put customized styles for datatable there like :
.yui3-datatable{
& thead{
backgournd-color: red;
}
}
You can also use 'your-theme/css/custom.csss' to override default style with your custom styles.
I am trying out divshot for to evaluate if we can use it for our company, but have one question. Our company uses a custom version of bootstrap, is there a way to specify a "theme" for bootsrap or to replace the bootstrap default css? I've basically ripped all drop shadows and border radius from everything and made the styles more flat. Just wanted to know if we could over ride that default bootstrap stylesheet.
Thanks!
Yes, you can upload a custom bootstrap.css file into your project and then simply replace the <link> tag in any Divshot HTML page with a relative link. So if I uploaded my custom theme to css/my-bootstrap.css in the project, I could then link it like so:
<link rel="stylesheet" href="css/my-bootstrap.css">
My question is this: how do you allow a different GWT visual theme depending on the user that logs in?
I would like to decide which theme to use when the customer logs in (that is before the GWT app gets loaded, so I am pretty sure it should be possible).
I have attempted to use class replacement based on a custom-property, but that failed because only the last inherited module's set of images become visible, even though I can select the right css file... I have searched everywhere and can't find the answer!
Thank you for your suggestion Thomas, but the problem with this solution is that you're assuming the CSS stylesheet is available for me to add to a ClientBundle (I tried that but unless you copy the css file and accompanying pics to your project, you can't do that). The themes come from external GWT modules. And I would like to keep it this way for modularity (it would be painful to import a whole bunch of resources into my project every time we needed a new theme).
The work-around I came up with was to write the injection code myself (just inject a link tag in the HTML head) at run-time.
For completeness, here's the code to do it:
protected void doInjection(String cssFilePath) {
// <link type="text/css" rel="stylesheet" href="sol.css">
Element headEl = Document.get().getElementsByTagName("head").getItem(0);
HeadElement head = HeadElement.as(headEl);
LinkElement link = Document.get().createLinkElement();
link.setType("text/css");
link.setRel("stylesheet");
link.setHref(GWT.getModuleBaseURL() + cssFilePath);
head.appendChild(link);
}
And you call this method with something like this:
doInjection("gwt/standard/standard.css");
Then, inherit all Resources modules from your project's GWT module file. For example:
<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>
<inherits name='com.google.gwt.user.theme.dark.DarkResources'/>
Inheriting the *Resources version of the Module avoids automatically injecting the style-sheet.
To decide which theme to use, I created a custom GWT property in the module file, based on the value of this property, I replace a default Java class (which would just insert the default theme) with a different Java class (which subclasses the default class) if a different theme should be used. This has the added bonus that I can include my own ResourceBundle resources within each theme, because the replacement Java class used with a theme, besides injecting the right css file, can also provide alternative Resources to my GWT code.
EDIT
I would like to add one important note:
The solution described above works quite well. But if your app uses different Locales or other GWT properties, this approach may cause the number of compilation permutations to explode! With only 6 different themes and 3 different Locales, on top of the standard 6 different browser versions you normally have, the GWT compiler will create 6 x 3 x 6 = 108 different compilations!! This is pretty crazy!!
A better solution, which I decided to follow after all, is to set an attribute into the HttpSession once the user logs in, and then based on the value of this attribute, load the appropriate css file (first thing in the onModuleLoad() of my entry-point class). The only difference from the solution described above is on how you select the theme.
I use a different approach, which mostly relies on the power of CSS with a single line of GWT code to switch themes.
First, define the themes that you want to apply. I use an enum.
public enum Theme {
DARK,
BRIGHT;
}
public static String getDefault() {
return BRIGHT.name();
}
Now, when you launch an app, apply a default theme (Theme.getDefault()). When a user selects a different theme, apply it:
public static void setTheme(String theme) {
/*
* Setting style on Body element allows us to "theme" the RootPanel as well.
*/
Document.get().getBody().setClassName(theme);
}
When you apply a new theme, the look of your app will instantly change without reloading the page.
Finally, define all theme elements that you need in your CSS file:
.DARK {background: #000; color: #CCC}
.BRIGHT {background: #ebebeb; color: #000}
.gwt-DialogBox {border-radius: 6px}
.DARK .gwt-DialogBox {border: 3px solid #555}
.BRIGHT .gwt-DialogBox {border: 3px solid #CCC}
Notice that you only add a theme selector in front of rules that are different for different themes.
I would try the following general approach:
Define one CSS file for each of the visual themes.
Put them all in a ClientBundle as described here.
Hold off injecting the themed CSS until you've authenticated the user. You can inject the general CSS you need for displaying the login screen.
Then inject the themed CSS depending on the user using the CssResource's ensureInjected() method.
I am facing this wierd situation with GWT where styles are not picked up from the CSS file correctly.
I am trying to style a text area. I know that it picks up default styles from either clean.css or standard.css.
But i have removed the inherit line from the application.gwt.xml file and copied all those styles into my own custom stylesheet file - application.css
And i am trying to add this style name ("close" see below) to my textarea like this
TextArea ta = new TextArea();
ta.addStylename("close");
But it is not picking up the class name "close" at all. I have the default styles for text area copied into application.css from standard.css.
I checked the page using firebug and chrome's inspect element, i could see see the element as this -
<textarea class="gwt-TextArea close"></textarea>
I see styles only being picked up from class - gwt-TextArea.
could someone help me out here.
//// styles in application.css
.close {
font-size:150%;
}
.gwt-TextArea {
border: 1px solid #d9dbdb;
background: #ffffff;
color: #8e8e8e;
font: Arial, sans-serif;
overflow: auto;
}
What you are looking for is the setStyleName(), which will add a style name to the object.
After doing that you can use .close { } like you are using now.
What addStyleName does is it creates another style wich is dependent on the main style name in this case .gwt-TextArea close{ } (I'm not 100% sure of this, the documentation isn't very clear).
Anyways it's a good habit to use setStyleName() and setStylePrimaryName().
btw. if you like the answer please click on the button on the left side of the post so it's marked as answered :)
In GWT, styles are obfuscated by default, so you can reuse style names across your different widgets.
You have to use a special CSS class mapping to use styles programmatically : the CssResource.
interface MyCssResource extends CssResource {
String myCssClass();
}
class MyResources extends ClientBundle {
#Source("my.css")
MyCssResource css();
#Source("some.png")
ImageResource imageAccessor();
#Source("some.png")
#ImageOptions(repeatStyle=RepeatStyle.Horizontal)
ImageResource repeatingImage();
}
You then use this clientbundle via GWT deferred binding.
See here for more information :
http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource
Thanks guys for helping out. But I figured out that my css file had a syntax error somewhere in the middle of the file and hence all the styles written below that error were not picked up.
That was a tough thing .. because i was all the time wondering if I was doing anything wrong in the way I am handling styling through GWT.