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

Custom Skin from Telerik SCSS Source

5 Answers 107 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 28 Sep 2016, 03:34 AM
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: 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

Sort by
0
Bozhidar
Telerik team
answered on 03 Oct 2016, 10:10 AM
Hi,

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Reina
Top achievements
Rank 1
answered on 29 Jan 2018, 01:08 PM

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.

0
Ivan Zhekov
Telerik team
answered on 01 Feb 2018, 10:23 AM
Hi, Reina.

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

Regards,
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.
0
Rick
Top achievements
Rank 1
answered on 13 Aug 2019, 01:14 PM
Was this ever resolved for ThemeBuilder using ASP.Net Ajax?  The WebResource references cause the minification process to fail for the SASS generated css files.
0
Attila Antal
Telerik team
answered on 16 Aug 2019, 07:29 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Visual Style Builder
Asked by
Daniel
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Reina
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Rick
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or