Custom skin and base font-family

2 posts, 1 answers
  1. Pascal
    Pascal avatar
    8 posts
    Member since:
    Jan 2010

    Posted 29 Jul 2010 Link to this post

    Hi!
    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 Snippet RadStyleSheetManager to combine all css I produced:
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false">
        <StyleSheets>
            <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" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>
    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 Snippet
    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

    Pascal
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 29 Jul 2010 Link to this post

    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;
      }
    </style>

    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.

    Greetings,
    Bojo
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top