How do I set up gwt to use my custom css for the makeup ?
These links didn’t help me at all:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss?hl=cs
http://code.google.com/p/google-web-toolkit-doc-1-5/wiki/GettingStartedStyle#Default_styles
- The issue is that I can’t get gwt to detect the css files I declare in my lorum.gwt.xml file, when I start debug mode jetty gives the following error in log output on startup:
:
00:00:00.811 [WARN] 404 - GET /lorum/stylesheet.css (127.0.0.1) 1418 bytes
00:00:00.811 [INFO] Request headers
00:00:00.811 [INFO] Host: 127.0.0.1:8888
00:00:00.811 [INFO] Connection: keep-alive
00:00:00.811 [INFO] User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/11.10 Chromium/18.0.1025.168 Chrome/18.0.1025.168 Safari/535.19
00:00:00.811 [INFO] Accept: text/css,*/*;q=0.1
00:00:00.811 [INFO] Referer: http://127.0.0.1:8888/Home.html?gwt.codesvr=127.0.0.1:9997
00:00:00.812 [INFO] Accept-Encoding: gzip,deflate,sdch
00:00:00.812 [INFO] Accept-Language: en-US,en;q=0.8
00:00:00.812 [INFO] Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
00:00:00.812 [INFO] Cookie: JSESSIONID=ywoku1zfjs0b
00:00:00.812 [INFO] Response headers
00:00:00.812 [INFO] Content-Type: text/html; charset=iso-8859-1
00:00:00.812
And it doesn’t load my css.
lorum.gwt.xml source:
l version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
<inherits name="com.google.gwt.resources.Resources" />
<inherits name="com.company.lorum.gwt.client.stylesheet.css"/>
<entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>
<stylesheet src='stylesheet.css' />
<servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
<servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
<servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>
- I tried inherriting my css file in the welcome-file (Home.html), which works; but it doesn’t apply the style rules to my widgets. And I don’t prefer this method since different browsers act differently on css syntax. Altough if you know how I get it to work I will use it. This is my Home.html source
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>lorum</title>
</head>
<body>
<script language="javascript" src="lorum/lorum.nocache.js"></script>
</body>
</html>
CSS (stylesheet.css) source (its simple because I just want to test if it works):
.gwt-MenuBar {
color:green;
}
.gwt-Button {
font-size: 200%;
}
Sub question:
Where do I have to store my css file in order for my lorum.gwt.xml file to detect and use it using the following syntax: <stylesheet src='stylesheet.css' />
This worked for me, I am not going to vote for my own answer, only if it is verified by other people that this solution also works for them.
It actually is fairly simple to achieve in 2 simple steps.
Step 1.
put your stylesheet (css) file in your webapp folder
Step 2.
Add the following line to your gwt.xml file:
NOTE: put this line between the last inherit decleration and your entry point decleration.
EXTRA:
My gwt.xml source:
Project tree