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 stylesheet 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
-~--~~~~--~~--~--~---
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
-~--~~~~--~~--~--~---
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 -~--~~~~--~~--~--~---
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 stylesheet 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
-~--~~~~--~~--~--~---
