inherit project's CSS to override standard gwt styles

[Vitrums]

Well I managed to solve the problem with overriding standard style
rules by inheriting my project's .css file in .gwt.xml file of my
project. When you set your user defined .css this way, it will have
the higher priority in cascading one rule than the same rule, defined
at standard gwt stylesheets. And this is often mentioned throughout
different discussions concerning CSS aspect of GWT. But...

It took a couple of hours to actually figure out how exactly to
inherit it properly, cause at first try just simply typing <stylesheet
src='WebTerminal.css' /> in my .gwt.xml file and commenting out <link
type="text/css" rel="stylesheet" href="WebTerminal.css"> in my .html
host page didn't bring me any result.
So, the solution was to change relative path, when you set your .css
in .gwt.xml config, like this:
<stylesheet src='../WebTerminal.css' />

To figure out how it works, you may add
Window.alert(GWT.getModuleBaseURL()); at the beginning of your
onModuleLoad() method. It will display something like "https://
localhost:8080/myproject/resouces/webtermial/", when in fact your
hosted page URL rather look like "https://localhost:8080/myproject/
resouces/WebTerminal.html".
Here myproject/resouces is a directory, that contains your .css file,
and when you set it in .gwt.xml as <stylesheet src='WebTerminal.css' /
>, the compiler starts looking for myproject/resouces/webtermial/
WebTerminal.css and won't find it. That's why adding ../ sometimes is
the one simple step to carry out to solve the issue.

My question is that I was not successful in attempt to find any
description of this matter in the latest documentary or throughout the
discussions taking place at this google group. Wish it was less harder
to figure out, because GWT has much more really complex problems
itself, than one, which must have had an exhausted description inside
tutorial.

I also was very unpleased to realize that some actions with upon my
widget's styles are made implicitly, when for example I assign a
FlexTable instance to a tab of TabLayOutPanel instance. There wouldn't
have been any trouble, if the solution had been like simply changing
my style properties (like assigning a class) for the table after I
added it to the panel. But the DOM structure of an element retrieved
by compiling the panel is multi-tiered and the key DIVs (like those,
which determine the borders and alignment) are not reachable from
calling panel's interface methods. And I rather have to loop over the
descendants of its DOM element representation (getElement() method of
a widget) to work with co-javascript classes, providing a shell for
real html elements.

It might seem like I've got a newbie approach to this issue, but I'd
like to know how You handle these cases. I've got a lot of UI work to
do and unfortunately CSS is not a strong part of mine ^^

[Craig Mitchell]

In my opinion, overriding GWTs CSS is more trouble then it's worth.

Just change your .gwt.xml file to use <inherits name='com.google.gwt.user.theme.standard.StandardResources'/> so it doesn't import any of the GWT CSS, and then add in your own CSS in your html file.

Things will then go much smoother.  Eg: Adding the CSS  *{font-size:11px;} will actually change all the font sizes, instead of only some of them.

BTW:  Using <stylesheet src='..' /> is deprecated.  Ref:  http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles

[Craig Mitchell]

Actually, to be completely correct, your CSS should be in a CssResouce http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource, not in your html file.