Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
554 views
in Technique[技术] by (71.8m points)

css - Override GWT Styling

I had a beautiful pure HTML mockup for a webpage that I am now recreating in GWT. I'm attempting to use the same css in my GWT app, but that's not working well for me. GWT styles seem to override mine. I know I can completely disable the GWT styles, however I would prefer to have the styling for the GWT components that I'm adding (tab panel, button, etc). Is there a way to disable GWT styling, and only enable it for components that I choose?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Well I managed to solve the problem with overriding standard css rules by inheriting my project's .css file in .gwt.xml file of my project. When you set your user defined .css this way - AFTER the usual inherit line - it will have the higher priority in cascading one rule than the same rule, defined at standard gwt stylesheets. It took a couple of hours to figure out how to inherit it properly, cause in first try just simply typing <stylesheet src='WebTerminal.css' /&gt; 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 is to use relative path, when you set your .css in .gwt.xml config, like this:

<stylesheet src='../WebTerminal.css' />

Notice ../ in the beginning of my relative path. To figure out how it works, add Window.alert(GWT.getModuleBaseURL()); as the first line of your onModuleLoad() method. It will show you something like https://localhost:8080/myproject/resouces/webtermial/, when in fact your hosted page URL would 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 like <stylesheet src='WebTerminal.css' />, the compiler starts looking for myproject/resouces/webtermial/WebTerminal.css and can't find it. That's why adding ../ sometimes is the only thing to do to solve your problem.

In addition to the words said above I only want to mention 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 google groups. 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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...