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: http://www.telerik.com/forums/tool-for-embedding-custom-skins-into-an-assembly
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,
Daniel
5 Answers, 1 is accepted
As I can see you are using the following too: http://stylebuilder.telerik.com/ which is already old and is not supported.
I will suggest to use the following: http://themebuilder.telerik.com/ 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: http://docs.telerik.com/devtools/aspnet-ajax/theme-builder/overview that will guide you through the skin creating process.
Regards,
Bozhidar
Telerik by Progress
Rank 1
Hi,
I am using the themebuilder.telerik.com 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?
Thanks.
That seems like a bug in the Themebuilder app and we'll fix it
Regards,
Ivan Zhekov
Progress Telerik
Rank 1
Hi Rick,
Indeed it is a known issue of the SASS ThemeBuilder. It generates some CSS classes with background-image pointing to WebResources. This has been documented in the Progress SASS ThemeBuilder - Apply section. "Some of the CSS files generated by ThemeBuilder may include classes with background-image using WebResource URIs that could cause appearance problems. You might remove those classes to avoid appearance issues."
These classes are meant to be for the Classic rendering of the Control, and since they are not many, the current workaround is to remove them. We are looking into this and will come up with a better solution in the future.
Kind regards,
Attila Antal
Progress Telerik