Re: Couple CSS questions
If you get a chance send out a screenshot of the computed style and regular style after inspecting the input element in your dev console (firebug or chrome dev tool, to the right of your previous screenshot). There you can also in real time modify the element css property to get a feel for what is going on. A screenshot of that will help in this case to see if your css property was actually added. Regards, Alfredo On Apr 24, 2012 8:03 PM, "Mike Dee" wrote: > But the question remains, why doesn't changing the gwt-DateBox CSS affect > the appearance of the DatabBox? In my case, the standard.css was replaced > with my own. So, why aren't my changes having any effect? > > -- > 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/-/I8Heevutr0EJ. > 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. > -- 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: Couple CSS questions
But the question remains, why doesn't changing the gwt-DateBox CSS affect the appearance of the DatabBox? In my case, the standard.css was replaced with my own. So, why aren't my changes having any effect? -- 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/-/I8Heevutr0EJ. 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: Couple CSS questions
Adolfo Panizo Touzon said:
> ... I think you have two options to solve this:
>
>- One is adding* !important* (in order to overwrite the custom
>css for the datePicker) to your css rules.
>- The other one is create your custom * DatePickerStyle.css *and
>add it to your DatePicker class*.*
Another option is to increase the specificity of your CSS selector, so
that it takes precedence over Google's built-in style rules. My own
notes on GWT styling are located here, in case you find them useful:
http://zelea.com/project/votorola/a/web/context/web/gwt.css
--
Michael Allan
Toronto, +1 416-699-9528
http://zelea.com/
> 2012/4/24 Mike Dee
>
> > How is this for a strategy of tweaking the look of many of the GWT widgets
> > across an entire app? Copy standard.css into the project and name it
> > MyApp.css. Reference MyApp.css in the ClientBundle, like this:
> >
> > public interface MyAppResources extends ClientBundle
> > {
> > ...
> > @Source( "com/myapp/client/resources/MyApp.css" )
> > @CssResource.NotStrict
> > public MyAppStyles css();
> > ...
> > }
> >
> > And then just tweak the CSS in MyApp.css?
> >
> > That leads to the second question. So far, this strategy seems to work
> > fine. However, I'm having trouble with the DateBox. I simply want the
> > input area associated with the DateBox to have a smaller font size. So I
> > change this:
> >
> > .gwt-DateBox input {
> > width: 8em;
> > }
> >
> > to this:
> >
> > .gwt-DateBox input {
> > width: 8em;
> > font-size: 8pt;
> > }
> >
> > Seems to have no effect (see attached screenshot). Looking at the CSS in
> > Chrome (inspect element), the input item is definitely tagged as
> > ".gwt-DateBox". Any ideas?
--
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: Couple CSS questions
I agree, my first solution is quicker and easier but less efficient. My
second solution is the same as Patrick said, but Patrick has explained much
more better.
It's up to you.
Thx @Patrick for the clarification.
2012/4/24 Patrick Tucker
> I generally copy the whole theme and make my changes to the css files.
> Then in the module inherit my copied theme instead of the GWT theme.
>
> This way the user does not have to load 2 different copies of any
> modified CSS rules.
>
> On Monday, April 23, 2012 9:03:15 PM UTC-4, Mike Dee wrote:
>
>> How is this for a strategy of tweaking the look of many of the GWT
>> widgets across an entire app? Copy standard.css into the project and name
>> it MyApp.css. Reference MyApp.css in the ClientBundle, like this:
>>
>> public interface MyAppResources extends ClientBundle
>> {
>> ...
>> @Source( "com/myapp/client/resources/**MyApp.css" )
>> @CssResource.NotStrict
>> public MyAppStyles css();
>> ...
>> }
>>
>> And then just tweak the CSS in MyApp.css?
>>
>> That leads to the second question. So far, this strategy seems to work
>> fine. However, I'm having trouble with the DateBox. I simply want the
>> input area associated with the DateBox to have a smaller font size. So I
>> change this:
>>
>> .gwt-DateBox input {
>> width: 8em;
>> }
>>
>> to this:
>>
>> .gwt-DateBox input {
>> width: 8em;
>> font-size: 8pt;
>> }
>>
>> Seems to have no effect (see attached screenshot). Looking at the CSS in
>> Chrome (inspect element), the input item is definitely tagged as
>> ".gwt-DateBox". Any ideas?
>>
> --
> 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/-/I79A5aBoOcEJ.
>
> 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.
>
--
El precio es lo que pagas. El valor es lo que recibes.
Warren Buffet
--
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: Couple CSS questions
I generally copy the whole theme and make my changes to the css files.
Then in the module inherit my copied theme instead of the GWT theme.
This way the user does not have to load 2 different copies of any modified
CSS rules.
On Monday, April 23, 2012 9:03:15 PM UTC-4, Mike Dee wrote:
> How is this for a strategy of tweaking the look of many of the GWT widgets
> across an entire app? Copy standard.css into the project and name it
> MyApp.css. Reference MyApp.css in the ClientBundle, like this:
>
> public interface MyAppResources extends ClientBundle
> {
> ...
> @Source( "com/myapp/client/resources/MyApp.css" )
> @CssResource.NotStrict
> public MyAppStyles css();
> ...
> }
>
> And then just tweak the CSS in MyApp.css?
>
> That leads to the second question. So far, this strategy seems to work
> fine. However, I'm having trouble with the DateBox. I simply want the
> input area associated with the DateBox to have a smaller font size. So I
> change this:
>
> .gwt-DateBox input {
> width: 8em;
> }
>
> to this:
>
> .gwt-DateBox input {
> width: 8em;
> font-size: 8pt;
> }
>
> Seems to have no effect (see attached screenshot). Looking at the CSS in
> Chrome (inspect element), the input item is definitely tagged as
> ".gwt-DateBox". Any ideas?
>
--
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/-/I79A5aBoOcEJ.
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: Couple CSS questions
Hi Mike,
I had a similar problem long time ago, I'm not sure, but I think you have
two options to solve this:
- One is adding* !important* (in order to overwrite the custom css for
the datePicker) to your css rules.
- The other one is create your custom * DatePickerStyle.css *and add it
to your DatePicker class*.*
My 2 cents,
Adolfo.
2012/4/24 Mike Dee
> How is this for a strategy of tweaking the look of many of the GWT widgets
> across an entire app? Copy standard.css into the project and name it
> MyApp.css. Reference MyApp.css in the ClientBundle, like this:
>
> public interface MyAppResources extends ClientBundle
> {
> ...
> @Source( "com/myapp/client/resources/MyApp.css" )
> @CssResource.NotStrict
> public MyAppStyles css();
> ...
> }
>
> And then just tweak the CSS in MyApp.css?
>
> That leads to the second question. So far, this strategy seems to work
> fine. However, I'm having trouble with the DateBox. I simply want the
> input area associated with the DateBox to have a smaller font size. So I
> change this:
>
> .gwt-DateBox input {
> width: 8em;
> }
>
> to this:
>
> .gwt-DateBox input {
> width: 8em;
> font-size: 8pt;
> }
>
> Seems to have no effect (see attached screenshot). Looking at the CSS in
> Chrome (inspect element), the input item is definitely tagged as
> ".gwt-DateBox". Any ideas?
>
> --
> 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/-/2p7A3bJjRHsJ.
> 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.
>
--
El precio es lo que pagas. El valor es lo que recibes.
Warren Buffet
--
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.
