Re: Changing CSS for TabPanel
Any chance you could elaborate for a newbie?
Maybe post the actual code?
On Tuesday, January 22, 2013 2:09:21 PM UTC-5, Marco Cuccato wrote:
>
> 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.
>>
>> 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 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: #3;
>>> >
>>> > }
>>> >
>>> > .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 unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
Re: Changing CSS for TabPanel
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.
>
> 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 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: #3;
>> >
>> > }
>> >
>> > .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/-/R6UVBu96xp4J.
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.
Re: Changing CSS for TabPanel
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 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: #3;
> >
> > }
> >
> > .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.
Re: Changing CSS for TabPanel
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 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: #3;
>
> }
>
> .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 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
-~--~~~~--~~--~--~---
Re: Changing CSS for TabPanel
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: #3;
}
.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 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
-~--~~~~--~~--~--~---
Changing CSS for TabPanel
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
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
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
-~--~~~~--~~--~--~---
