CODEWITHSUNDEEP
cssgwt
KevMo
KevMo

Reputation: 5610

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?

Upvotes: 28

Views: 30438

Answers (12)

user3428448
user3428448

Reputation: 1

In gwt, 2.6 there is a folder called (gwt) in the generated JavaScript source and it has all the styles.

Try to delete it.

Upvotes: -1

Duncan Calvert
Duncan Calvert

Reputation: 345

Solution is actually to create a public/css folder in the same directory as your gwt.xml.

Add these two lines to your gwt.xml:

<stylesheet src='css/project-name.css'/>

and

<public path='public'/>

Place your project-name.css file in the css folder.

This works with both GWT Compile and Super Dev Mode.

Upvotes: 4

Manu
Manu

Reputation: 608

I had a similar problem trying to set a background image and setting a transparent background for the body element, I solved it by setting a specific style to the element so I could keep the other GWT styles:

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

Hope it's useful for your specific problem.

Upvotes: 0

Milo
Milo

Reputation: 2171

Vitrus' answer did work for me, thanks! However changes in the .css files were not reflected in the web app when reloading the page; it seems to be a cache issue. Refreshing with Ctrl+F5 solves this. More information here: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok.

Upvotes: 0

Clay Lenhart
Clay Lenhart

Reputation: 1606

There is a special resource you can inherit from to remove the clean.css file:

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>

So find your *.gwt.xml file and search for 

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

And replace it with the line above.

Upvotes: 4

Pavel
Pavel

Reputation: 2776

You can use < !important > declaration. It's one of easiest choices

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

--- Custom style ---

.gwt-PopupPanel {
padding: 0px !important;
}

--- Result ---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}

Upvotes: 2

vitrums
vitrums

Reputation: 522

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.

Upvotes: 23

orad
orad

Reputation: 16092

You can remove the default GWT styling with:

widget.setStyleName("");

Or specify your own style.

Upvotes: 0

Vladimir
Vladimir

Reputation: 2553

The reason your style is being overridden is that when gwt compiles your project, it includes it's own default css file. The type of css file is dependent on the type of default styling that you are using: 

<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

In the above scenario, a clean.css file will be included, which, in turn, has the following generic styles that completely offset your template (the margin and background parameters always messed my templates up):

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

If you remove them, and leave everything else intact (specifically, if you leave everything that starts with 'gwt'), your template won't be affected.

Don't forget -- you have to remove these elements every time you compile your project.

Hope this helps.

Upvotes: 11

Prashanth
Prashanth

Reputation: 1398

Just for anyone else facing a similar situation, to elaborate on the answer that stringo0 answered, I put my styles in the 'GWT_APPNAME.css' where GWT_APPNAME is the name of the file that your GWT Eclipse plugin generates when you create your project.

This css file should be available directly under the war folder with the same name as your welcome page html. I tried this for overriding the gwt-anchor styles and it worked.

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

Upvotes: 1

stringo0
stringo0

Reputation: 2760

This is a quick, but hopefully helpful answer.

What I did is I copied over the styles I do want from the default GWT Style. For example, if you picked the standard style, GWT makes a standard.css in the war/WEB-INF/appengine-generated (somewhere along those lines) - I copied over all the button styles to my app's css file, and then in the config file chose not to use the standard GWT style.

This did the trick for us.

Upvotes: 0

DLH
DLH

Reputation: 2821

The easiest thing to do is to override the styles you don't want. For example, if you don't want gwt to style your buttons, you can define the style for the gwt-Button class in your own css file.

More information here.

Upvotes: 4

Related Questions