Overriding RadGrid Default CSS

[Matthew]

I'm REALLY struggling with this and it's causing me endless frustration. The only way I've been able to override the styles successfully is by using `!important,` which I just don't want to do, nor is it recommended. I read the following article, but it has been of no help to me.
http://blogs.telerik.com/aspnetmvcteam/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx 

I have the following style which I want to override the rgHeader style. I use this style for all my GridView just fine, but RadGrid is being a pain in my ear!! :(

.appTableHead
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #2B486A;
}

I tried ".RadGrid_Default .appTableHead { <styles> }" like the article suggests, as well as several other variations and nothing is working for me. It's driving me bonkers! >.<

I've attached a snippet view of the markup generated by my app so you can see the class structure. Any help would be greatly appreciated. Particularly if you can show me exactly what needs to be done to make this work. Thanks! :)

[Vasssek]

Hello Matthew,

This works in my case, so you can try it, too.

1. Add custom header style in RadGrid aspx declaration

<MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="Hostname, ID" AllowMultiColumnSorting="True"
                CssClass="GridStyle" ShowHeadersWhenNoRecords="false" HierarchyLoadMode="ServerOnDemand"
                Width="700px" TableLayout="Fixed" CommandItemDisplay="None">
                <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" ShowExportToExcelButton="true"
                    ExportToExcelText="Exportovať do Excelu" />
                <HeaderStyle CssClass="HeaderStyle" />
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="Hostname, DL_ID" DataSourceID="SqlDataSource2"
                        AutoGenerateColumns="false" Name="DL" ShowHeadersWhenNoRecords="false" HierarchyLoadMode="ServerOnDemand"
                        Width="1400px" runat="server">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="Hostname" MasterKeyField="Hostname" />
                            <telerik:GridRelationFields DetailKeyField="Nastavenie_klientov_ID" MasterKeyField="ID" />
                        </ParentTableRelation>
                        <HeaderStyle CssClass="InnerHeaderStyle" />

Important rows are <HeaderStyle CssClass="HeaderStyle" /> and for detailtable (if it's used)  <HeaderStyle CssClass="InnerHeaderStyle" />

2. In your .css style file add this lines :

.rgMasterTable th.HeaderStyle
{
   background-color:Red;
   background-image: none ;
}

.rgDetailTable th.InnerHeaderStyle
{
   background-color:#B57483;
   background-image: none ;
}

The result RadGrid is in the attachement....

I hope, it helps you a bit...

Best regards

Vasssek

[Matthew]

Thank you Vasssek! It still irritates me to no end that I have to create new rules just for my Telerik controls. This just bloats my css files all the more. :(