Couple CSS questions

[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?

[Adolfo Panizo Touzon]

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 <mdichi...@gmail.com>

--
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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@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

[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.

[Adolfo Panizo Touzon]

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 <tuck...@gmail.com>

--

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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Michael Allan]

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/

[Mike Dee]

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?

[Alfredo Quiroga-Villamil]

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" <mdichi...@gmail.com> 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.