Changing CSS for TabPanel

[cloud3...@gmail.com]

Hi,

I like to change the default color for the TabPanel Items and the
selected TabPanel Item for a specific TabPanel.

//JAVA
TabPanel tab1 = new TabPanel();
tab1.setStyleName("customizedTabPanel"); //use customized css

TabPanel tab2 = new TabPanel(); //use default css


//CSS
.customizedTabPanel {
padding: 2px;
font-weight: bold;
cursor: default;
background-color: orange;
color: red;
margin-right: 2px;
margin-left: 2px;
}

The above would only change the tab body color.
I want to change the tab item color and the selected tab item color...

Any idea how this can be done?

Thanks in advance

[mrfreeze81]

GWT has its own CSS for the widgets, you will have to change that
inorder to affect the widgets (in your case the tabpanel). Add this to
your CSS file,
eg:-
.gwt-TabPanel {
color: #33333;
}

.gwt-TabPanelBottom {

}
etc.

CSS Style Rules

* .gwt-TabPanel { the tab panel itself }
* .gwt-TabPanelBottom { the bottom section of the tab panel (the
deck containing the widget) }


You can find this information in the GWT API

Thanks
Harry

[Salvador Diaz]

For a thourough example of TabPanel styling (including IE6 specific
hacks), take a look at the Showcase examples:
http://gwt.google.com/samples/Showcase/Showcase.html#CwTabPanel

Hope that helps,

Salvador

[Marco Cuccato]

Solved!

1. Custom styles named as GWT API says (.gwt-TabBar...);

2. Just wrapped the css file to a simple CssResorce, without the custom interface. There is no need to have a method for every style defined in file with this trick.

Thanks

Il giorno martedì 22 gennaio 2013 12:47:36 UTC+1, Marco Cuccato ha scritto:

I've the same problem but i want to use the CssResource approach.

I just want to set my custom CSS to a single TabBar/TabPanel instance, leaving the default gwt Theme on other all TabBar/Panel.

That's what i've done:

- found the original TabBar and TabPanel Gwt css file

- created a new css file, pasted the original css, edited class names by renaming all classe from .gwt-* to .myProject* and changed the attribute values

- created a CssResource with the two main selector methods: .myProjectTabBar and .myProjectTabPanel

- set my custom style to widget with:

mainTabPanel.getTabBar().addStyleName(Styles.INSTANCE.tabBarPanel().myProjectTabBar());

mainTabPanel.addStyleName(Styles.INSTANCE.tabBarPanel().myProjectTabPanel());

- added @external .myProject*; to my css file referenced by CssResource @Source annotation due to avoid (un)obfuscation exception

It works only for base-style like .myProjectTabBar, but not for substyles like .myProjectTabBar .myProjectTabBarItem {...}: the style still remains the Gwt default.

What i have to do for make my custom TabBar/Panel style works? 

I know that i can add the css in gwt.xml file (leaving original style names on it) but this means that ALL TabBar/Panel widget will be styled, isn't true?

Thanks in advance

M.

[anthony dipaola]

Any chance you could elaborate for a newbie?

Maybe post the actual code?