Custom Skin from Telerik SCSS Source

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Feb 2015

    Posted 27 Sep 2016 Link to this post

    Hi there,

    I am looking for some advice on the best way to go forward with adding a new custom skin to our project. We are looking to modify the built-in bootstrap skin to match our bootstrap customisation. We would like to be able to:
    - Build from scss - so we can use the same scss variables etc we use for our bootstrap customisation
    - Have a good way to merge updates to the built-in bootstrap skin into our custom skin so that if controls are added or changed we can easily keep our skin up to date

    So far we have come up with the following workflow:
    - Create a new skin repository containing the Bootstrap and Common folders from the Telerik Skin Source
    - Create a branch off that repository and rename and modify the Bootstrap with our customisations
    - Add a build task to compile the sass and place in zip along with the image folders in the Bootstrap folders
    - Pass through the skins assembly builder to create a dll to include in our web application

    This approach means when there is an update to the telerik controls we can update the master of the skin repository with the changes, and then merge out to the skin branch and resolve any conflicts.

    The issue we are running into is that the compiled SASS from the telerik source has already subbed out the image url references with WebResource tags, so we cannot then pass through the Skin's Assembly builder without error.

    We are looking for some advice on this, so far the ideas we have come up with are:
    1. Updated our scss build task to add a job to revert the WebResource entries back to their url counterparts (so they can then be converted back in the Skin's Assembly Builder)
    2. Obtain the source of the Skin's Assembly Builder and remove the parts that sub out the urls with WebResource entries.

    The second option is the preferred and we had a look at the source provided by Alain in this post:
    Unfortunately it does not seem to be up to date as even running output through it straight from the Visual Style Builder does not produce valid css in the dll.

    Is there another obvious way to carry out a task such as this? and is the source for the Skin's Assembly Builder available anywhere?

    Kind Regards,
  2. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 03 Oct 2016 Link to this post


    As I can see you are using the following too: which is already old and is not supported.

    I will suggest to use the following: which is based only to our LightWeight rendering and uses SASS variables to create a new skin.

    It is also well supported and soon we will update it again with R3 service pack 1 DLLs. Right now it runs Telerik.Web.UI version 2016.3.914.

    It is much more powerful and well built compared to the old tool. It also allows you with just a few clicks to create the whole controls bundle as it works directly with the variables that build all controls instead of browsing control by control in order to make all changes. It also contains the Bootstrap skin as an option to use it as a base.

    Note that lightweight does not contain images/sprites but CSS gradients and font icons, so you will not fall into the web resource problem.

    Here is a help resource: that will guide you through the skin creating process.

    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Reina
    Reina avatar
    1 posts
    Member since:
    Jan 2018

    Posted 29 Jan in reply to Bozhidar Link to this post


    I am using the site to create a custom ASP.NET AJAX theme based on Silk, and am experiencing the same issue mentioned in Daniel's post. Namely, the generated files include WebResource tag urls, which cause the SASS compile to fail. Here's an example of a selector from the generated Slider css file:

    .RadSlider_testing .rslItem {
        background-image: url('<%=WebResource("Telerik.Web.UI.Skins.testing.Slider.ItemHorizontalBgr.gif")%>'); }

    Any suggestions?


  4. Ivan Zhekov
    Ivan Zhekov avatar
    624 posts

    Posted 01 Feb Link to this post

    Hi, Reina.

    That seems like a bug in the Themebuilder app and we'll fix it

    Ivan Zhekov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top