[Solved] Override Default Grid Colors? 2013 Q1

[Sir]

Do you guys have a guide for overriding the default grid colors?
Your CHM file has a "Styling" section for the grid, which shows how to conditionally change the font & background colors for an individual cell.

What we need is: A way to color our grid to match our corporate colors.
(See image attached)

1) How do we change the grid header background & font colors, plus the "selected" header blue color?
2 & 3) How do we change the odd/even row background colors, plus the "selected" row color?
4) How do we change the background color of the grid itself (when there would normally be white space)?:

Other Info:
We are injecting your code via NuGet and reference your code in our default.html page like this:

<!-- Telerik RadControls 2013 Q1 -->
<link href="Telerik.UI/css/common.css" rel="stylesheet" />
<link href="Telerik.UI/css/light.css" rel="stylesheet" />
<script src="Telerik.UI/js/jquery.js"></script>
<script src="Telerik.UI/js/ui.js"></script>

Side questions:

1) I notice that when I change our link href from your /css/light.css to /css/dark.css, your grid colors do not appear to change (see attached image) - i.e. the headers are grey for both. Is this right or are we doing something incorrectly?

2) Can we override your colors programatically or will we need to override your css classes? Which ever way it is, please give us either code example or the class names we need to override (or detail out alternate solution, whatever that may be).

Thanks,
Ray

[Adrian]

Hi Ray,

You can customize the default colors of the RadGrid control fairly easy. The easiest way to override the default styles of the RadGrid is to redefine some of its CSS classes.

I have attached a zip file with two CSS files which you need to modify to fit your needs. The first file (gridStyleComments.css) includes comments in order to help you customize the RadGrid control. The second file (gridStyle.css) is the same file but with removed comments if you consider you do not need them. You need to override all styles in one of the two files to change the default look of the RadGrid in specific scenarios you described.

About the second question that you have I can not reproduce the problem. On my side when I change the  reference from light to dark theme the colors are change properly. I suggest you to open a ticket with more information and code snippets. Perhaps the problem is that your references do not start with a slash:

<link href="Telerik.UI/css/light.css" rel="stylesheet" />

instead of

<link href="/Telerik.UI/css/light.css" rel="stylesheet" />

All the best,
Adrian
the Telerik team

[Sir]

Awesome, thanks you Adrian!

Sorry about the light/dark, that was an issue in our project, my bad.

If I have other questions, I'll let you know.

Thanks,

Ray

[Sir]

Hi Adrian,

Looks like you supplied me with the overrides for your dark theme.

Can you give me the overrides (with comments) for the light theme please?

Thanks!

Ray

[Adrian]

Hi Ray,

I have attached to the post the new file with light theme colors. As you may have noticed the CSS classes are the same, the only thing I have changed are the colors.

I hope this is what you need. If not, let me know and elaborate on what is still missing.

 

Greetings,
Adrian
the Telerik team

[Sir]

Thanks Adrian!

[Randy]

Nevermind, we got it, lol.