This is a migrated thread and some comments may be shown as answers.

Custom skin and base font-family

1 Answer 143 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Pascal asked on 29 Jul 2010, 10:03 AM
I'm facing a problem skinning my website.
I'm trying to minimize http calls so i've decide to use a custom skin called GuSkin that i build using a different project.
This project customize FormDecorator, Menu, Grid, Window and ComboBox widgets.
I'm using RadStyleSheetManager to combine all css I produced:
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false">
        <telerik:StyleSheetReference Name="GuTelerikSkins.FormDecorator.css" Assembly="GuTelerikSkins" />
        <telerik:StyleSheetReference Name="GuTelerikSkins.Menu.css" Assembly="GuTelerikSkins" />
        <telerik:StyleSheetReference Name="GuTelerikSkins.Grid.css" Assembly="GuTelerikSkins" />
        <telerik:StyleSheetReference Name="GuTelerikSkins.Window.css" Assembly="GuTelerikSkins" />
        <telerik:StyleSheetReference Name="GuTelerikSkins.ComboBox.css" Assembly="GuTelerikSkins" />
As you can see the Assembly is named GuTelerikSkins, but the skin itself is named GuSkin.
The main problem comes from base css styles that telerik use. I'm trying to change font-family of a label tag as
Helvetica, Arial, sans-serif
But the base css of Telerik send a css property that override my font family (which must be common through all the website):
font-family: "Segoe  UI",Arial,Verdana,sans-serif;

For example my decorated form labels are different from the rest of the website.
I've attached 2 screenshots that describe the current styles of labels and the target styles i want to apply so that labels in editon mode are the same as readonly mode on my pages...

Is there a tip to customize base css of Telerik inside a skin project?

Thanks in advance


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 29 Jul 2010, 12:46 PM
Hello Pascal,

As I understand, you want to apply font-family: Helvetica, Arial, sans-serif for the LABEL tags in the following cotrols:  for FormDecorator, Menu, Grid, Window.

If you specified that rule in all your custom skins, it will be overwritten, as the skin specific style sheet is the first loaded, and after that is loaded the base style sheet. If you have same selectors in both files with equal weight, the base style sheet selectors will overwrite the skin specific and will be applied.

If you want to use heavier selector for the label tags in these controls, you could use the following CSS code in the head section of your document:

<style type="text/css">
 .RadGrid label,
 .RadMenu label,
 .RadForm label,
 .RadWindow label,
 .RadComboBox label
   font-family: Helvetica, Arial, sans-serif !important;

You could also add another selectors in the CSS rule, if you want to style them with the specified font-family.

Please find attached fontapplied.gif showing the result after the rule was applied, and fontnotapplied.gif, showing the result before that.

the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question