Derek Hunziker
Top achievements
Rank 1
Rank 1
Derek Hunziker
asked on 02 Sep 2008, 09:15 PM
Hello,
I recently purchased the RadControls for ASP.NET AJAX package with the intention of using the controls on an existing website. This website has an extensive CSS foundation with global styles for every HTML element you can imagine. Unfortunately, I am unable to make changes to this set of styles due to a web standards initiative that's in place here at my work. I only have the ability to add additional overriding styles in a sperate style sheet.
I was previously working with a demo version of your controls, Version 7.1.0... I believe, and I had built up several pages full of CSS that prevented RadControls from inheriting these global CSS styles. With the version I just purchased, however, It appears that so much has changed that my overriding styles are no longer relevant. Almost all of the controls are renderd completely unusable by the global CSS styles (which again, I must use).
QUESTION: Is there a way to prevent the controls from inheriting global CSS styles without spending months adding classes to my HTML elements and without spending months rewriting the overiding CSS? Perhaps a setting which renders all styles with a trailing !important attribute? I tied setting the CssFiles property to a blank stylesheet on some of the controls, but it didn't do anything.
Thanks for your help,
-Derek
I recently purchased the RadControls for ASP.NET AJAX package with the intention of using the controls on an existing website. This website has an extensive CSS foundation with global styles for every HTML element you can imagine. Unfortunately, I am unable to make changes to this set of styles due to a web standards initiative that's in place here at my work. I only have the ability to add additional overriding styles in a sperate style sheet.
I was previously working with a demo version of your controls, Version 7.1.0... I believe, and I had built up several pages full of CSS that prevented RadControls from inheriting these global CSS styles. With the version I just purchased, however, It appears that so much has changed that my overriding styles are no longer relevant. Almost all of the controls are renderd completely unusable by the global CSS styles (which again, I must use).
QUESTION: Is there a way to prevent the controls from inheriting global CSS styles without spending months adding classes to my HTML elements and without spending months rewriting the overiding CSS? Perhaps a setting which renders all styles with a trailing !important attribute? I tied setting the CssFiles property to a blank stylesheet on some of the controls, but it didn't do anything.
Thanks for your help,
-Derek
1 Answer, 1 is accepted
0
Hello Derek,
Generally, there is no way to prevent CSS inheritance of globally set styles, because the idea of CSS is that styles should be inherited.
What seems easiest in your case is to set EnableEmbeddedSkins="false" for all RadControls, register all skins manually as external (non-embedded) and modify all CSS rules in one of the following 2 ways:
1) Add !important, for example:
old rule:
selector
{
property1 : value1 ;
property2 : value2 ;
}
new rule
selector
{
property1 : value1 !important ;
property2 : value2 !important ;
}
Since this can cause negative side effects, an alternative approach is :
2) Add a client ID to all selectors in order to increase their specificity
old rule:
selector
{
property1 : value1 ;
property2 : value2 ;
}
new rule
#SomeClientID selector
{
property1 : value1;
property2 : value2;
}
#SomeClientID can be an ID set to the <body> element or another element, which wraps all your page content.
The idea of both methods is to increase the specificity of RadControl's CSS styles, so that they do not get overridden by your application global styles.
Before doing anything, please make sure that you fully understand the skinning mechanism of RadControls for ASP.NET AJAX:
RadControls for ASP.NET AJAX - Online Documentation
Then in the navigation treeview on the left please go to
RadControls for ASP.NET AJAX Fundamentals
and take a look at the "Controlling Visual Appearance" article and its subarticles.
This blog post may also be of use:
How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin
If you send us a live URL or a sample project, so that we can take a look on the current situation, we can think of something smarter.
By the way, could you please share what this web standards initiative is? I personally am not aware of any web standard or guideline, which promotes using more global styles and less CSS classes.
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Generally, there is no way to prevent CSS inheritance of globally set styles, because the idea of CSS is that styles should be inherited.
What seems easiest in your case is to set EnableEmbeddedSkins="false" for all RadControls, register all skins manually as external (non-embedded) and modify all CSS rules in one of the following 2 ways:
1) Add !important, for example:
old rule:
selector
{
property1 : value1 ;
property2 : value2 ;
}
new rule
selector
{
property1 : value1 !important ;
property2 : value2 !important ;
}
Since this can cause negative side effects, an alternative approach is :
2) Add a client ID to all selectors in order to increase their specificity
old rule:
selector
{
property1 : value1 ;
property2 : value2 ;
}
new rule
#SomeClientID selector
{
property1 : value1;
property2 : value2;
}
#SomeClientID can be an ID set to the <body> element or another element, which wraps all your page content.
The idea of both methods is to increase the specificity of RadControl's CSS styles, so that they do not get overridden by your application global styles.
Before doing anything, please make sure that you fully understand the skinning mechanism of RadControls for ASP.NET AJAX:
RadControls for ASP.NET AJAX - Online Documentation
Then in the navigation treeview on the left please go to
RadControls for ASP.NET AJAX Fundamentals
and take a look at the "Controlling Visual Appearance" article and its subarticles.
This blog post may also be of use:
How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin
If you send us a live URL or a sample project, so that we can take a look on the current situation, we can think of something smarter.
By the way, could you please share what this web standards initiative is? I personally am not aware of any web standard or guideline, which promotes using more global styles and less CSS classes.
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.