how to overwrite RadWindow control CSS classes with mine?

Question

Hi,

I am using a telerik control (RadWindow) which has it's own css.

I want to edit the control design and change colors, backgrouns, etc.

I want my CSS to overwrite the control CSS, so I used the same classes names, but the result is that my classes are overwritten by the control's CSS.

Does anyone here know what should I do to fix it?

I attached screen shot to make myself clearer.

Thanks a lot for your help! Inbal.

Answer 1

An easy way to override the CSS from another is to make the selector more specific, by prepend an additional selector for example:

body div.radwindow_Gray table td.topleft { /* Your new properties */ }

In this example, i've added body to the selector.

The more specific your CSS selector is, the more importance it will get.

Another solution is to append !important to the property-value (will not work in IE6):

div.radwindow_Gray table td.topleft { background: red !important }

Your CSS file in the HTML document is above those from radWindow.
Moving your CSS file after the last CSS file from radWindow, will fix your problem too, because your CSS would override those from radWindow. This way, you can keep the selectors the same as radWindow's CSS does.