Re: colorating a tab
Hi Thomas and Alex, Thanks for your fast reply, I was Ill these last days so sorry for my delay. > this is because you don't have the required styles names in your CSS file (main.css). Otherwise, GWT would load the styles from your file. Alex: Belive me they are there and firefox shows them as overriden :-). >If I were you however, I'd file a bug to have the injected stylesheet come *before* the existing ones so that the ones already present in the page override the injected stylesheets... Thomas: thanks, your answer was really relevant since you pointed out the problem and even how to work around it. I'll submit a bug as you adviced me, this is frustrating for newbees to think they've understood the tutorial and to find unexpected results this way. Thanks also for the hint about StandardResources (I was asking my self also about how much work it implies to add new skins (or play with the existing ones), so you're good at reading between the lines ;-) ) Best Regards, Zied On Oct 3, 3:01 pm, Thomas Broyer <[EMAIL PROTECTED]> wrote: > On 3 oct, 12:12, Zied Hamdi <[EMAIL PROTECTED]> wrote: > > > > > Hi folks, > > > I'm new to GWT (but I read the tutorial). I need to give my tabs a > > different color, and this is what I see in my firebug: > > > .gwt-TabBar .gwt-TabBarItem {standard.css (line 870) > > background:#D0E4F6 none repeat scroll 0%; > > color:black; > > cursor:pointer; > > font-weight:bold; > > margin-left:6px; > > padding:3px 6px; > > text-align:center;} > > > .gwt-TabBar-Into .gwt-TabBarItem {main.css (line 55) > > background:#EE none repeat scroll 0%; > > color:#6F6F6F; > > > } > > > so the standard css background and color are overriding my locally > > defined attrs in main.css. > > > Is it due to a bad configuration? or is it the way it is supposed to > > work? > > How is the main.css included? It might be a "priority" problem: if > main.css is loaded before standard.css (which will probably be the > case if main.css is not GWT-injected with a in your > module's gwt.xml), given that the two selectors have the same > "specificity" [1], their rules are evaluated in the order they've been > loaded, so the background and color set in standard.css will override > the one set in your main.css. > > Try adding an "!important" to your rules and see if they're applied > (with !important, the rules in standard.css won't override your own ! > important rules, even though they are evaluated after them). > If that's the case, try to find a way for your stylesheet to be loaded > after standard.css (and remove the !important, which is bad practice > and recommended for user-stylesheets only [2]), either by getting your > main.css injected by GWT, or by inheriting StandardResources (instead > of Standard) and calling the standard.css by yourself... > If I were you however, I'd file a bug to have the injected stylesheet > come *before* the existing ones so that the ones already present in > the page override the injected stylesheets... > > [1]http://www.w3.org/TR/CSS21/cascade.html#specificity > [2]http://www.w3.org/TR/CSS21/cascade.html#important-rules --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---
Re: colorating a tab
Does anybody know if it's possible to specify one or more CSS file(s) (not styles, but rather files containing styles) from client code? (currently I link them within HTML file). On Oct 3, 4:01 pm, Thomas Broyer <[EMAIL PROTECTED]> wrote: > On 3 oct, 12:12, Zied Hamdi <[EMAIL PROTECTED]> wrote: > > > > > Hi folks, > > > I'm new to GWT (but I read the tutorial). I need to give my tabs a > > different color, and this is what I see in my firebug: > > > .gwt-TabBar .gwt-TabBarItem {standard.css (line 870) > > background:#D0E4F6 none repeat scroll 0%; > > color:black; > > cursor:pointer; > > font-weight:bold; > > margin-left:6px; > > padding:3px 6px; > > text-align:center;} > > > .gwt-TabBar-Into .gwt-TabBarItem {main.css (line 55) > > background:#EE none repeat scroll 0%; > > color:#6F6F6F; > > > } > > > so the standard css background and color are overriding my locally > > defined attrs in main.css. > > > Is it due to a bad configuration? or is it the way it is supposed to > > work? > > How is the main.css included? It might be a "priority" problem: if > main.css is loaded before standard.css (which will probably be the > case if main.css is not GWT-injected with a in your > module's gwt.xml), given that the two selectors have the same > "specificity" [1], their rules are evaluated in the order they've been > loaded, so the background and color set in standard.css will override > the one set in your main.css. > > Try adding an "!important" to your rules and see if they're applied > (with !important, the rules in standard.css won't override your own ! > important rules, even though they are evaluated after them). > If that's the case, try to find a way for your stylesheet to be loaded > after standard.css (and remove the !important, which is bad practice > and recommended for user-stylesheets only [2]), either by getting your > main.css injected by GWT, or by inheriting StandardResources (instead > of Standard) and calling the standard.css by yourself... > If I were you however, I'd file a bug to have the injected stylesheet > come *before* the existing ones so that the ones already present in > the page override the injected stylesheets... > > [1]http://www.w3.org/TR/CSS21/cascade.html#specificity > [2]http://www.w3.org/TR/CSS21/cascade.html#important-rules --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---
Re: colorating a tab
On 3 oct, 12:12, Zied Hamdi <[EMAIL PROTECTED]> wrote: > Hi folks, > > I'm new to GWT (but I read the tutorial). I need to give my tabs a > different color, and this is what I see in my firebug: > > .gwt-TabBar .gwt-TabBarItem {standard.css (line 870) > background:#D0E4F6 none repeat scroll 0%; > color:black; > cursor:pointer; > font-weight:bold; > margin-left:6px; > padding:3px 6px; > text-align:center;} > > .gwt-TabBar-Into .gwt-TabBarItem {main.css (line 55) > background:#EE none repeat scroll 0%; > color:#6F6F6F; > > } > > so the standard css background and color are overriding my locally > defined attrs in main.css. > > Is it due to a bad configuration? or is it the way it is supposed to > work? How is the main.css included? It might be a "priority" problem: if main.css is loaded before standard.css (which will probably be the case if main.css is not GWT-injected with a in your module's gwt.xml), given that the two selectors have the same "specificity" [1], their rules are evaluated in the order they've been loaded, so the background and color set in standard.css will override the one set in your main.css. Try adding an "!important" to your rules and see if they're applied (with !important, the rules in standard.css won't override your own ! important rules, even though they are evaluated after them). If that's the case, try to find a way for your stylesheet to be loaded after standard.css (and remove the !important, which is bad practice and recommended for user-stylesheets only [2]), either by getting your main.css injected by GWT, or by inheriting StandardResources (instead of Standard) and calling the standard.css by yourself... If I were you however, I'd file a bug to have the injected stylesheet come *before* the existing ones so that the ones already present in the page override the injected stylesheets... [1] http://www.w3.org/TR/CSS21/cascade.html#specificity [2] http://www.w3.org/TR/CSS21/cascade.html#important-rules --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---
Re: colorating a tab
GWT has default styles for all its widgets. For example, Button class has the style .gwt-Button. The same applies for other widgets, including more complex ones. What you see in firebug, .gwt-TabBar is the default style for TabBar, and .gwtTabBarItem (the next style on the same line) is the style for TabBarItem which is furthermore cascaded (derived) from .gwtTabBar. When you don't set any styles for a widget, it uses its default style (and further, cascades the style for complex widgets). You said the code overwrote your styles defined in main.css, this is because you don't have the required styles names in your CSS file (main.css). Otherwise, GWT would load the styles from your file. If you want other names for your styles, just define them and use setPrimaryStyleName (...). Furthermore (let's say you have a generic setting for a widget and you want further customization for a specific one), use setStyleDependentName (...). To finish, I haven't checked the following case: if I set a style name, let's say "shyStyle" for a TabBar, I don't know if GWT knows the styles for subitems, like ".shyStyle .getTabBarItem" Hope it helps, cheers. --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---
colorating a tab
Hi folks, I'm new to GWT (but I read the tutorial). I need to give my tabs a different color, and this is what I see in my firebug: .gwt-TabBar .gwt-TabBarItem {standard.css (line 870) background:#D0E4F6 none repeat scroll 0%; color:black; cursor:pointer; font-weight:bold; margin-left:6px; padding:3px 6px; text-align:center; } .gwt-TabBar-Into .gwt-TabBarItem {main.css (line 55) background:#EE none repeat scroll 0%; color:#6F6F6F; } so the standard css background and color are overriding my locally defined attrs in main.css. Is it due to a bad configuration? or is it the way it is supposed to work? I added a style to the tab bar: mainTabPanel.getTabBar().addStyleDependentName("Into"); But this doesn't affect each tab (I was also expeting a method such as addChildrenStyleDependentName() )... The only solution I found is to call setStylePrimaryName() and copy all subsequent styles : for the tabbar, the bar, the items... from standard.css changing only the colors: I don't think GWT was designed this way... Anyway, any help is very welcome. Regards, Zied Hamdi --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---