use custom css with gwt

css, gwt

Solution

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

Problem

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

Original source

Related problems