Styling Grid Header

[ignacio.zorrilla]

Hi, I'm new with Smart GWT and I'm trying to change the look and feel of a Grid Header.
How can I do this?
I follow the steps in the "Smart GWT Quick Start Guide" and create a new skin but I can't change the font size of my Grid Headers.

My skin_styles.css looks like:
/*=============================================
11) ListGrid
=============================================*/

.headerBar {
background:#FFFFFF url(./images/ListGrid/header.png) repeat-x bottom left scroll;
font-family:Verdana;
font-size:14px;
}

1) Smart GWT 2.5.1 (Eclipse Plugin)
2) IE 8

[Blama]

Hi ignacio,

IMHO the best way to find your used css (and the point to edit) is to use Chrome's right-click->Inspect element.

You can then edit the CSS live in Chrome and once you are done, c&p the changes in your skin_styles.css.

Best regards,
Blama

[ignacio.zorrilla]

Hi ignacio,

IMHO the best way to find your used css (and the point to edit) is to use Chrome's right-click->Inspect element.

You can then edit the CSS live in Chrome and once you are done, c&p the changes in your skin_styles.css.

Best regards,
Blama

I'm trying to do what you say but stills don't change...
Look the attached file.

[Blama]

You have to search for the css-class you need to change, but I'd think that ".listGrid" is a good start.

Are you worried that in the screenshot in ".listGrid" font-size is striked through? Most likely Chrome shows this way that it is overridden by the element's style tag (or is commented out in the .css file)

Now inspect / find the cells of the ListGrid (deep in the DOM in a <tbody>-tag if I remember correctly). You should see there, which styles are applied.

Best regards,
Blama

[ignacio.zorrilla]

You have to search for the css-class you need to change, but I'd think that ".listGrid" is a good start.

Are you worried that in the screenshot in ".listGrid" font-size is striked through? Most likely Chrome shows this way that it is overridden by the element's style tag (or is commented out in the .css file)

Now inspect / find the cells of the ListGrid (deep in the DOM in a <tbody>-tag if I remember correctly). You should see there, which styles are applied.

Best regards,
Blama

I can do it now... Thanks!!