I have a gwt application which I need to apply custom themes for specific widgets, so I can maintain the Standard gwt CSS (for other widgets that I don't need to apply css to) in the gwt.xml file :
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
I am using ClientBundle and CssResource approach in my app. I have applied simple css however I need to make a css that will be able to apply css for: selected and not selected, hover and push events/actions on a widget, just like what the standard gwt css provides.
What to write in the my css file so that for a MenuBar when I apply this:
ManuBar menuBar = new MenuBar(false);
menuBar.setStyleName(AppResources.INSTANCE.css().menuBar())
I will get the same MenuBar effects of a standard MenuBar css of gwt? With the App.css I have below, I just get a black menubar and the font-color of the menubar does not change, I think there is a proper way to apply css with gwt widgets, however I cannot find a good resource about this on the web. What I am trying to accomplish is to be able to change the menubar color theme to say, black, chrome or whatever color but still make the widget look like a real menubar.
App.css:
.menuBar {
background:#3c3b37;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
}
I have a feeling you might be experiencing the problem lots of us face when we forget to call ensureInjected on the CssResource. The CSS never gets added to the page, and so it looks like it's not working.
AppResources.INSTANCE.css().ensureInjected();
why not try simply with menuBar.setStyleName("menuBar"); I'm sure this will work.
Related
I'm using the ThemeProvider and CssBaseline in my _app.js file. It's pulling in the background color from the theme as expected.
However, on some pages, I want to override the the body background color. I was able to achieve this by wrapping my page components in a different theme and adding CssBaseline as a child but it doesn't seem like the right way to do it since I'm already using CssBaseline at the app level.
Is there a better way to do this or am I on the right path?
I think your question is a little tricky but in css file use !important to overwrite the theme or frameworks file or use inline css
I am having some trouble styling filepicker.io widgets for web, specifically filepicker-dragdrop.
Is there any way to disable the inline styling and replace them with classes?
Something like data-fp-disable-styles or perhaps when using data-fp-dropzone-class="..." the inline styling is automatically disabled.
Although you can add classes to the button with the attribute data-fp-button-class, I cannot get rid of the inline styling on the on the dropzone and container div.
You can set the data-fp-drag-class and data-fp-class options to set the styling of the dropzone and container div and use the !important flag for any styles that you want to use to override the inline styles.
If you're looking for a more fully customizable solution, we'd recommend using the raw javascript api's to create your own drag pane (https://developers.filepicker.io/docs/web/#widgets-droppane) and/or pick button
I am thinking of migrating my GWT app from "native GWT" to GXT, however I want to know whether there is a theme in GXT that looks just like the native theme of GWT, com.google.gwt.user.theme.standard.Standard
Also in my "native GWT" application I apply my own css to some widgets. Does the CSS-format for widgets the same with GXT as it is with the native GWT widgets? Like for Button, MenuBar, Panels etc.
Basically GXT 2 has just two themes (blue and gray). There is no such a theme that looks like native GWT, but thats why you should choose GXT, becuose it has rich components and you don't have to take care of your css and other stuffs. Also is not easy to change you style.
Ext GWT 2.0, widgets are responsible for creating their DOM structure
directly. This is done either by manually creating the elements or by
using an HTML fragment. The HTML for the widget is created from
strings, from an XTemplate, or by assembling DOM elements. The CSS
class names are then applied to the elements by the widgets. With this
approach, a widget’s view is tightly bound to the widget itself and
CSS class names are generally hardcoded into the widget.
Because the way how was build is really difficult to change the style of your component. But the new version 3.0 has a new approach that make easier to change your style and you can also combine with native gwt widget.
You can check the website
I have created GWTWebApplication , I have added one tabpanel and added htmltab penels.
now i want to change of tabpanel background style but i could not ,even i try to add decarated panel that case also same.
if i create GWT Javaproject that case it adds some predefine css style .but in webapplication project noting defult css styles
This is my code
TabPanel tabPanel = new TabPanel();
HTMLPanel hPanle1 =new HTMLPanel("");
HTMLPanel hPanle2 =new HTMLPanel("");
tabPanel.add(hpanel1,HPanel);
tabPanel.add(hpanel2,HPanel2);
My requirement is to change the tabbar background color only,and when i select my should be heligheted .
please give me response as soon as possible
It sounds like what you are looking for is a way to change the background of the active tab. You can accomplish this with GWT's built-in classes that it applies automatically to the active nav items.
Just put this in your CSS somewhere:
.tabpanel-activeNavItem {
background: red;
}
You can also look at the classes TabPanelResources and TabPanelStyle, and the css file tabpanel.css for details on the default styles. To understand more about how GWT handles CSS, read their CSS Resource Documentation
Use presentation solution can only change the look&feel of Views and Editors,
Can I change the look&feel of swt widgets, such as Tree, Table , TextInput ...and the background-color of all the gray panels
You can use the e4's CSS engine to render the elements. It works well with 3.x as well.