发表新帖
发表新帖

Override GWT Styling

后端 未结
关注
12 2210
栀梦
栀梦 2020-12-13 18:53

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

相关标签:
12条回答
  • 情深已故
    2020-12-13 19:52

    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.

    0 讨论(0)
  • 南笙
    2020-12-13 19:55

    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.

    0 讨论(0)
  • 情深已故
    2020-12-13 19:55

    You can remove the default GWT styling with:

    widget.setStyleName("");

    Or specify your own style.

    0 讨论(0)
  • 春和景丽
    2020-12-13 19:56

    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.

    0 讨论(0)
  • 醉话见心
    2020-12-13 19:56

    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.

    0 讨论(0)
  • 刺人心
    2020-12-13 19:58

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题