Hello,
I would like to request that Telerik add standard CSS support to it's ASP.NET AJAX controls, including the tabstrip. Specifically, the control's have all of their skins embedded in the DLL - which is great. But the controls also have their own font-size, etc properties that should be able to over-ride the embedded CSS files. This is just standard CSS design: locally defined styles should over-ride a stylesheet.
The standard CSS hiearchy is follows:
1. The order that you put the <link> reference to the style sheet at the top of the page determines the order the styles are loaded and any styles in the last sheet that are loaded that exist in the previous sheet will be over-ridden.
2. The same applies to actual <style> tags added to a page, where the styles further down in the style tag will over-ride any others if so similarly named.
3. Lastly, any style="" attribute placed on an individual control takes ABSOLUTE preference over any styles declared in <style> tags or separate styles sheets. This should also include the specific font-size, etc properties on the control itself.
It would be nice if the controls supported this standard CSS approach so that I didn't have to switch off the embedded support, copy the whole style sheet for the tabstrip, all just to modify the tab's text size. If the control was following 'standard css norms' I should be able to use the control's "font-size" property to over-ride any settings in the embedded CSS file. Otherwise it doesn't even made sense to expose that useless 'font-size' property.
Could this support for the standard CSS hierarchy be added in a future release of the ASP.NET AJAX controls?
Thanks,
Chris
I would like to request that Telerik add standard CSS support to it's ASP.NET AJAX controls, including the tabstrip. Specifically, the control's have all of their skins embedded in the DLL - which is great. But the controls also have their own font-size, etc properties that should be able to over-ride the embedded CSS files. This is just standard CSS design: locally defined styles should over-ride a stylesheet.
The standard CSS hiearchy is follows:
1. The order that you put the <link> reference to the style sheet at the top of the page determines the order the styles are loaded and any styles in the last sheet that are loaded that exist in the previous sheet will be over-ridden.
2. The same applies to actual <style> tags added to a page, where the styles further down in the style tag will over-ride any others if so similarly named.
3. Lastly, any style="" attribute placed on an individual control takes ABSOLUTE preference over any styles declared in <style> tags or separate styles sheets. This should also include the specific font-size, etc properties on the control itself.
It would be nice if the controls supported this standard CSS approach so that I didn't have to switch off the embedded support, copy the whole style sheet for the tabstrip, all just to modify the tab's text size. If the control was following 'standard css norms' I should be able to use the control's "font-size" property to over-ride any settings in the embedded CSS file. Otherwise it doesn't even made sense to expose that useless 'font-size' property.
Could this support for the standard CSS hierarchy be added in a future release of the ASP.NET AJAX controls?
Thanks,
Chris
2 Answers, 1 is accepted
0
Hello Chris,
All Telerik controls support points (1), (2) and (3) in this exact order, simply because browsers take case of this and there is no other way.
However, in some cases setting styles declaratively (e.g. Font-Size) may not have effect, because the style has to be set to another element. If we take RadTabStrip as an example, this will not work:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Font-Bold="true" Font-Size="Large">
<Tabs>
<telerik:RadTab Text="Tab 1" />
</Tabs>
</telerik:RadTabStrip>
But this will work:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server">
<Tabs>
<telerik:RadTab Text="Tab 1" Font-Bold="true" Font-Size="Large" />
</Tabs>
</telerik:RadTabStrip>
The TabStrip skins define font styles for items, not for the whole control. The reason for this is to avoid the case in which some global web application styles override the TabStrip skin, which would be very easy if all font styles were defined for the control's wrapping element.
By the way, it is not necessary at all to use a non-embedded skin in order to override some styles. Here is a blog post, which explains how to override embedded skins:
How To Override Styles in a RadControl for ASP.NET AJAX Embedded Skin
You seem quite familiar with the way CSS should work, so I suppose you will have no problems using one or two custom CSS classes and customizing anything you like by using CSS selectors with higher specificity than the ones in our skins.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
All Telerik controls support points (1), (2) and (3) in this exact order, simply because browsers take case of this and there is no other way.
However, in some cases setting styles declaratively (e.g. Font-Size) may not have effect, because the style has to be set to another element. If we take RadTabStrip as an example, this will not work:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Font-Bold="true" Font-Size="Large">
<Tabs>
<telerik:RadTab Text="Tab 1" />
</Tabs>
</telerik:RadTabStrip>
But this will work:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server">
<Tabs>
<telerik:RadTab Text="Tab 1" Font-Bold="true" Font-Size="Large" />
</Tabs>
</telerik:RadTabStrip>
The TabStrip skins define font styles for items, not for the whole control. The reason for this is to avoid the case in which some global web application styles override the TabStrip skin, which would be very easy if all font styles were defined for the control's wrapping element.
By the way, it is not necessary at all to use a non-embedded skin in order to override some styles. Here is a blog post, which explains how to override embedded skins:
How To Override Styles in a RadControl for ASP.NET AJAX Embedded Skin
You seem quite familiar with the way CSS should work, so I suppose you will have no problems using one or two custom CSS classes and customizing anything you like by using CSS selectors with higher specificity than the ones in our skins.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Christian Bruckhoff
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2010, 08:13 PM
This is pretty convoluted.
I'm trying to get the tabstrip to show a larger font-size.
What do I need to do to make this work?
I'm trying to get the tabstrip to show a larger font-size.
.RadTabStrip_WebBlue
.rtsTxt
{
font-size:12pt !important;
}
What do I need to do to make this work?