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.

Il giorno domenica 10 maggio 2009 12:40:22 UTC+2, Salvador Diaz ha scritto:
>
> 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 
>
> On May 9, 10:47 pm, mrfreeze81 <mrfreez...@gmail.com> wrote: 
> > 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

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/fbBMOGxkC-YJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to