Custom StyleSheets for Telerik controls

7 posts, 0 answers
  1. Manoj Bhatty
    Manoj Bhatty avatar
    11 posts
    Member since:
    Jul 2009

    Posted 09 Jul 2009 Link to this post

    Hi All,

    We have front end designers on our team who would prefer to create and maintain stylesheets for styling the controls as opposed to using Visual Style Builder. When I look at the css classes in firebug, they all seem to be coming from WebResources etc.

    I suppose we can just apply CssClass attributes to different elements to override it? But what would be the recommended way of doing it?

    Ideally we want to change as little as possible in the aspx page itself and control the styling from our own CSS files as much as possible. Any suggestions and best practices?

    Thank You,
    Manoj
  2. Manoj Bhatty
    Manoj Bhatty avatar
    11 posts
    Member since:
    Jul 2009

    Posted 14 Jul 2009 Link to this post

    Hello All,

    Anything on this? Any comments from the Telerik Admins will be much appreciated.

    We are trying to help our web designers to evaluate the css-configurability of the Telerik suite.

    Manoj
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 14 Jul 2009 Link to this post

    Hi Manoj,

    The Style Builder is an extension to simplify the skinning process. If you want to write the styles all by yourself, please refer to the following blog post and help topics.

    I'd love to hear the feedback on the StyleBuilder from your front-end developers - to be exact, what functionality do they think is missing?

    Regards,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Manoj Bhatty
    Manoj Bhatty avatar
    11 posts
    Member since:
    Jul 2009

    Posted 14 Jul 2009 Link to this post

    Hi Alex,

    Thanks for the links, I'm going through them now.

    About the front end designers, they have very strong PHP and non-dotnet web development background so it's just that they are comfortable with their custom css files approach to web design. They pretty much prefer to use dreamweaver etc and are not comfortable with visual studio, that doesn't help either. But I'll go through StyleBuilder as well and see the possibility of training them in visual studio.

    Manoj
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 14 Jul 2009 Link to this post

    Hi Manoj,

    The style builder is built in a way that it does not require .NET knowledge - primarily for designers and front-end developers - and is an online tool, so it doesn't require Visual Studio. (the requirements are only Firefox 3.5 or Internet Explorer 7/8 and Silverlight 2). Therefore, they can safely change the styling of the controls (without learning all control-specific styles) and fine-tune what they want in the exported CSS files (the style builder exports plain CSS + images, after all).

    Sincerely yours,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Manoj Bhatty
    Manoj Bhatty avatar
    11 posts
    Member since:
    Jul 2009

    Posted 14 Jul 2009 Link to this post

    Thank you Alex, I went through StyleBuilder and it seems it the front end designers should be able to use it for all modifications.

    I also played around with creating and implementing custom skins and it all worked out wonderfully.

    Now I've one last question - From your links, I see that I can set EnableEmbeddedSkins to false and then register and modify my own skins. What I couldn't figure out was EnableEmbeddedBaseStylesheet property. Taking TreeView for example, the CSS is TreeView.MyNewSkin (skin named MyNewSkin). Are there any other CSS files that I'll need to register if EnableEmbeddedBaseStylesheet is False?

    Thanks,
    Manoj
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Jul 2009 Link to this post

    Hi Manoj,

    The base stylesheet holds only skin-agnostic CSS - e.g. layout and positioning properties. To use a custom skin, you should set only these two:
    • the Skin property (to the name of your newly created skin)
    • the EnableEmbeddedSkins property to "false" (so that the skin is loaded from the external CSS that you should manually link in the page)
    This way, the base stylesheet will be loaded from the assembly; in most scenarios, it does not need tweaking - it is meant to work with all skins.
    Best wishes,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017