Ben Ben - 1 year ago 88
CSS Question

use custom css with gwt

How do I set up gwt to use my custom css for the makeup ?
These links didn't help me at all:

  • 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 ( 1418 bytes
00:00:00.811 [INFO] Request headers
00:00:00.811 [INFO] Host:
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:
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

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=''/>
<inherits name=''/>
<inherits name="" />
<inherits name=""/>
<entry-point class=''/>

<stylesheet src='stylesheet.css' />

<servlet path="/AuthenticationImpl" class="" />
<servlet path="/GeneralImpl" class="" />
<servlet path="/ProjectImpl" class="" />

  • 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">
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script language="javascript" src="lorum/lorum.nocache.js"></script>

CSS (stylesheet.css) source (its simple because I just want to test if it works):

.gwt-MenuBar {
.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' />

Answer Source

There are two simple way to include a CSS-file. You can define it in the HTML but if you want to override a value which is already taken you have to use the !important tag at the end of your CSS-attribute.

Or you can define it in you

public interface CellTabelResources extends CellTable.Resources {
    public interface CellTableStyle extends CellTable.Style {

    @Source({ "style.css" })
    CellTableStyle cellTableStyle();

which make your style.css the most important so it overrides every other style.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download