use custom css with gwt

Question

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' />

Ben · Accepted Answer · 2012-07-18T13:22:45.197

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:

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

NOTE: put this line between the last inherit decleration and your entry point decleration.

EXTRA: My gwt.xml source:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
    <inherits name="com.google.gwt.resources.Resources" />

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

    <entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>

    <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>

Project tree

java     __ com __ company __ lorum __ gwt __ client __ **
                                           __ server __ **
                                           __ shared __ **
                                           __ Lorum.gwt.xml
resources__ **
webapp   __ WebFiles __ **
         __ WEB-INF  __ **
         __ Home.html
         __ mystylesheet.css

This works perfectly for me!. But what is the reason to put the css in the module and not in the .html? — karlihnos, Mar 30 '17 at 08:26

score 3 · Answer 2 · edited May 23 '17 at 10:30

If you want to put the css reference in the gwt.xml file, you have to add the file in the public folder and then you can reference the css relative to the compiled file position as it will be referenced from the js file which will make the browser look in the compiled folder beside the file. You could however put it in the webapp folder which will also cause it be copied to the target and reference it from the gwt.xml.

Putting it in the HTML file also works. But if you are overriding any of the default widget styling put the css link after the .nocache.js file, so that it overrides its values

Check This for more info:

Where do I put static files for GWT app? war folder or public folder?

what you are sying about the relative path to the css file from the gwt.xml file is false. I stored my css file in my webapp folder and it worked. — Ben, Jul 18 '12 at 12:47

score 0 · Answer 3 · answered Jul 18 '12 at 12:31

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 YourName.java

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.

score 0 · Answer 4 · edited Oct 16 '16 at 08:56

0

The following solution works for me:

put YourCss.css file to the same directory where YourApplication.html is located
add the following line to <head> block of YourApplication.html:
```
<link type="text/css" rel="stylesheet" href="YourCss.css">
```

edited Oct 16 '16 at 08:56

Mr Lister

45,515
15
108
150

answered Oct 09 '16 at 11:23

Tatyana Sharonova

31
3

use custom css with gwt

4 Answers4

Linked