PDA

View Full Version : How to override Stylings for GXT Components



kmi1177
14 Mar 2011, 5:31 PM
Hi,
Need your valuable suggestion on following:
I have requirement to Show Faont-family: Verdana, Font-size:11px and
1. For Grid Column Head - Font is bold,
2. For Buttons - Font is bold,
3. For GroupView groupname as normal Font,
4. For TabItem Text as normal Font

There are various files which have all these GXT components, please suggest how to override gxt-all.css stylings.

kmi1177
14 Mar 2011, 11:34 PM
Any Help, Sven?

micgala
15 Mar 2011, 2:59 AM
Well, basically you are asking that we do this for you, right?
You must check what are the styles related to the things you want to change, by using FireBug, for example...

Them, simply modify them.

kmi1177
15 Mar 2011, 3:10 AM
Thanks,
Actually want to avoid editing gxt-all.css. Please suggest if that is doable or need to edit the gxt-all.css.
I agree that if I edit gxt-all.css then no need to set/add style name to any component I create, it will be taken care automatically.

Need your valuable suggestion.

Regards,
Kundan

micgala
15 Mar 2011, 3:17 AM
There is no need to edit gxt css at all.
You can create a new css file of yours, and override the styles existing in gxt css.

Regards,
Michel.

blay
15 Mar 2011, 3:37 AM
Yep, as micgala says, just create your own .css file where your override those css classes (you can figure out which ones are by IE developer tool or Firebug). Take care of importing the css file after gxt-all.css, not before.

kmi1177
16 Mar 2011, 9:19 PM
Thanks Michel, Blay.

Need suggestion for the following scenario:
Suppose I want to show My Grid Column Head as 'Faont-family: Verdana, Font-size:11px and Bold' and also I want to avoid adding another line of code in my application code - like ColumnConfig.setStyleName("myCSSStyle"), instead can I do something in my CSS with gxt-all.css class '.x-grid3-hd-inner' so that whenever I create Grid and add columns, the header will be rendered as per my requirement without adding another style setting.

blay
17 Mar 2011, 12:46 AM
Yes. You can add at the end of gxt-all.css (at the end, in order to override GXT styles)

.x-grid3-hd-inner{
whateveryouwant;
}

or (an option I prefer), create your own CSS file, with just the CSS classes you modify and import it after the gxt-all.css file.