I wish to change the background color of skin sunset of grid. I then modified the following
.GridCommandRow_Sunset
{
background: #00FFFF none no-repeat 0 -1197px;
color: #fff;
}
However, when I fresh my page, it does not take up the new setting and is always showing the original color. How do I make this work?
.GridCommandRow_Sunset
{
background: #00FFFF none no-repeat 0 -1197px;
color: #fff;
}
However, when I fresh my page, it does not take up the new setting and is always showing the original color. How do I make this work?
3 Answers, 1 is accepted
0
Hi Raymond,
In order to override an embedded RadControls for ASP.NET AJAX skin, you need to supply a CSS rule with a greater selector importance (specificity) than the CSS rule in the embedded skin. This is so, because the embedded skins' <link> tags are placed at the end of the web pages' <head> section, i.e. the embedded skins are applied AFTER your custom styles.
In other words, please change
.GridCommandRow_Sunset
{
background:#00FFFF none;
color: #fff;
}
to
tr.GridCommandRow_Sunset
{
background:#00FFFF none;
color: #fff;
}
(there is no space between tr and the CSS class)
If you are interested in knowing more about CSS selectors and specificity, please refer to:
http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
In order to override an embedded RadControls for ASP.NET AJAX skin, you need to supply a CSS rule with a greater selector importance (specificity) than the CSS rule in the embedded skin. This is so, because the embedded skins' <link> tags are placed at the end of the web pages' <head> section, i.e. the embedded skins are applied AFTER your custom styles.
In other words, please change
.GridCommandRow_Sunset
{
background:#00FFFF none;
color: #fff;
}
to
tr.GridCommandRow_Sunset
{
background:#00FFFF none;
color: #fff;
}
(there is no space between tr and the CSS class)
If you are interested in knowing more about CSS selectors and specificity, please refer to:
http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Raymond
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2008, 02:38 PM
I do as said and it doesn't work. What else should I do to make my changes to be effective.
0
Accepted
Hi Raymond,
I can't think of a reason why the suggested CSS code does not work, however, I am sending you a simple project, which demonstrates the approach and the custom background is applied as expected. (Assemblies not included to save your bandwidth.)
Please compare the attached project to yours and find out what is different. Take a look at the notes in the <head> section of Default.aspx.
If you cannot find a way out of this problem, please open a support ticket and send us a working project to investigate and give further advice. Thank you in advance.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I can't think of a reason why the suggested CSS code does not work, however, I am sending you a simple project, which demonstrates the approach and the custom background is applied as expected. (Assemblies not included to save your bandwidth.)
Please compare the attached project to yours and find out what is different. Take a look at the notes in the <head> section of Default.aspx.
If you cannot find a way out of this problem, please open a support ticket and send us a working project to investigate and give further advice. Thank you in advance.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center