How can I change the header color of just one grid ?

[Pat]

I have a page with a grid and beneath it, a tab.  I want to change the header column colors.

That grid is declared within a td at the top of the page.  I declared a style within that td, setting .k-header to my new color and that grid does reflect that new color.

But now everything else below, even outside that td, also now has the new color, even the tab.  When I open the modal window on that page, even the window is now using the new color.

I thought styles changes were local to the element they are in?  If so, then why is this happening?  If not, then what is the correct way to target a specific color to one specific grid?

[Dimo]

Hi Pat,

Some fundamental information about the Kendo UI widgets' styling is available at:

http://docs.kendoui.com/getting-started/web/appearance-styling

The article shows how to apply styling to a specific widget type, e.g. all Grids, all Menus, etc. In order to apply styling to a specific widget instance, you need to use the widget's ID or a custom class in the CSS selector, for example:

#MyGridID .k-grid-header .k-header
{
       background-color: red;
}

The k-grid-header class ensures that the custom styles are applied only to Grid header cells and not to other elements inside the Grid, which have the k-header class.

Regards,
Dimo
the Telerik team

[Pat]

Thanks, that worked.