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

Tool for Embedding Custom Skins into an Assembly

30 Answers 1948 Views

Visual Style Builder

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

Telerik Admin asked on 05 Aug 2009, 01:01 PM

telerik-webresourcebuilder.zip

Hello,

Our client Bryan Boudreau has been kind enough to send us a tool, which can take a ZIP file containing a RadControls skin (e.g. one generated by the Visual Style Builder) and create an assembly with an embedded version of this skin. The skin can be registered with RadStyleSheetManager, as demonstrated in this code library example:

Including custom StyleSheets as WebResources to RadStyleSheetManager

For instance:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
   <StyleSheets>
       <telerik:StyleSheetReference Assembly="TelerikSkins" Name="TelerikSkins.Office2007.Calendar.Office2007.css" />
   </StyleSheets>
</telerik:RadStyleSheetManager>

TelerikSkins is the namespace entered in the third field of the tool.

Thanks, Bryan!

Regards,
the Telerik team

30 Answers, 1 is accepted

answered on 12 Nov 2009, 09:25 PM

First of all, thank you so much for the ResourceBuilder project!
I would like to take this a step further. Is there now or will there ever be a way to take this assembly and add it to a project and with minor changes to the config file be able to implement a custom skin? In other words, skin my entire site as easily as with Hay, Black or Sunset so I dont have to manually add css files and images to my project. What would be really cool would be to take the Web20 folder, make changes manually or through the Visual Style Builder online and convert it to an assembly with Mr Bourdreau's project and deploy the dll to a new or existing web site.

Like:

    
                <add key="Telerik.Skin" value="CustomSkin1"/>  
        
                <!--<add key="Telerik.Skin" value="Hay"/>--> 
        
                <add key="Telerik.EnableEmbeddedSkins" value="true"/>

answered on 13 Nov 2009, 02:19 PM

Hello Eric,

I am not sure I understand you correctly. May be your are asking whether one can use an embedded custom skin without the need to declare StyleSheetReferences explicitly with the RadStyleSheetManager? Well, I am afraid this is not possible at the moment. Theoretically, we could change the RadStyleSheetManager control to be able to register skins from a custom assembly automatically, but in this case it will register ALL CSS files that it discovers, which is not very good, because you may end up with lots of unneeded registered CSS files on the page. A complete "automagic" solution for a very easy usage of embedded custom skins would be rather cumbersome to implement.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 30 Jan 2010, 10:15 PM

Ok, I am a very new user of Telerik controls.So, If I understand correctly. This tool can generate an assemebly out of the css as embeded resource.

I have 2 questions

My first question is that. If I have a custom skin with css files for each control. I mean to say this custom skin is designed from scratch and has css files and images for each control. Then the compiles assembley would have css for each and every control. So, what will happen? telerik stylesheet manager will deliver every css on the client side or only those are required by the controls being used in page.

I need to understand this all. Since, I am part of the team that develops the framework to be used by a team of 30-40 in the comp. I need this info, so that i can decide the best mechanism to deliver those custom css files.

Second question is that we can't keep skin file in the root diretory of the web. we can either keep it in dll(thats what we will prefer), or a directory under root directory. So, if we keep the css in a diffrent directory do we have to go and register it like a normal css file as stated by this http://www.telerik.com/help/aspnet-ajax/skinregistration.html or is there is any other work around.

Please reply.I can give you further details if you want any .

answered on 01 Feb 2010, 11:42 AM

Hi Mohit Thakral,

Here is some information on your questions:

1. RadStyleSheetManager does two things:

a) It combines all CSS files, which come from embedded resources, so that there is only 1 HTTP request for them;
b) It can register CSS files, which come from custom assemblies (i.e. not Telerik.Web.UI); In other words, RadStyleSheetManager does not register any CSS files automatically.

2. If you are using non-embedded CSS files, you must register them the standard way - with <link> tags. You can also place them in an ASP.NET theme. If you are using custom embedded CSS files, you must register them with RadStyleSheetManager.

Let us know if there is anything else you would like to know.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 30 Jul 2010, 06:22 PM

I have a question.

If I currently have a MasterPage that includes this ...

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

<StyleSheets>

<telerik:StyleSheetReference Name="MySkin.MySkin.ComboBox.MySkin.css"

Assembly="MySkin"></telerik:StyleSheetReference>

<telerik:StyleSheetReference Name="MySkin.MySkin.Grid.MySkin.css"

Assembly="MySkin"></telerik:StyleSheetReference>

<telerik:StyleSheetReference Name="MySkin.MySkin.TreeView.MySkin.css"

Assembly="MySkin"></telerik:StyleSheetReference>

<telerik:StyleSheetReference Name="MySkin.MySkin.Upload.MySkin.css"

Assembly="MySkin"></telerik:StyleSheetReference>

</StyleSheets>

</telerik:RadStyleSheetManager>

And I want to automate the process can leave out the <StyleSheets> collection from the markup and expect this to work ...

protected override void OnInit(EventArgs e)

{

string[] controls = {"ComboBox", "Grid", "TreeView", "Upload"};

base.OnInit(e);

foreach(string ctl in controls) {

RadStyleSheetManager1.StyleSheets.Add(new Telerik.Web.UI.StyleSheetReference(String.Format("MySkin.MySkin.{0}.MySkin.css", ctl), "MySkin"));

}

Is OnInit the right place to do this?

--
Stuart

answered on 11 Mar 2011, 01:14 AM

This worked like a champ!

Modifed my style and downloaded Zip from visual style builder. -- Thanks Telerik Team!
Created my assembly with the tool provided in this thread. -- Thanks Bryan!
Added the dll to my project in the bin directory.
Created the reference to the dll.
Added the RadStyleManager with no StyleSheets.
Used Stuarts Code Snippet and added all the controls possible. (Added it to Page_Load) -- Thanks Stuart!

Here is Stuart's Snippet with all of the controls from the embedded skins in the array.
(When you select "All Controls" in Visual Style Builder.)

//Build Style sheet references from Skin Assembly

string[] controls = { "Button", "Calendar", "ColorPicker", "ComboBox", "Dock", "Editor", "Filter", "FormDecorator", "Grid", "Input", "ListBox", "ListView", "Menu", "PanelBar", "Rating", "Rotator", "Scheduler", "SiteMap", "Slider", "Splitter", "TabStrip", "TagCloud", "ToolBar", "ToolTip", "TreeView", "Upload", "Window" };

base.OnInit(e);

foreach (string ctl in controls)

{

RadStyleSheetManager1.StyleSheets.Add(new Telerik.Web.UI.StyleSheetReference(String.Format("NameSpace.SkinName.{0}.SkinName.css", ctl), "NameSpace"));

}

Thanks for making this easy, and great tip about multiple skins!

Cheers,
-= Daniel

answered on 23 Jun 2011, 10:02 PM

I'm trying to figure out a way to allow the use of custom skins alongside of the skins that come embedded in telerik.
Because you have to set EnableEmbeddedSkins to false to allow custom skins to work I came up with the idea to package all of the embedded skins that we want to be available into an assembly using this tool. This would essentially make all of the skins custom.

The idea worked, but there is one problem: The assembly output by this tool, which contains 11 of the provided embedded skins, is over 600MB in size! While using this assembly in the project all of my aspx files have a new red squiggle underline notifying me of a system out of memory exception. Somehow, this is also disabling telerik intellisense on every afflicted page.

So, my question is: Is there any way to generate an assembly that isn't ridiculously large? The total size of all the skin files I want to load into the assembly is only 4.8MB (10MB on the disk). Why is the assembly 125 times larger than the files I assembled?

Let me know if any more information is required to answer my question and I will do my best to supply it.

Thanks in advance!
-Dave

answered on 26 May 2012, 11:46 AM

Hello all,

We created a standelone tool, called acTelerikStylesAssembly (LGPL license, source code included), that can generate an assembly of custom Telerik skins (created by Telerik StyleBuilder or by hands, zipped) like Telerik.Web.UI.Skins.dll (you can even replace it), based on work of Brian Boudreau, but with a lot of enhancements and some corrections.

So a generated skins assembly is used with EnableEmbeddedSkins set to true and the size of this one with 1 skin included all Telerik components is about 660KB.
The acTelerikStylesAssembly executable application uses:
- Framework.NET 4.0.
- Telerik.Web.UI.dll, not included in the package. It is not necessary to use the last version of Telerik.Web.UI.dll. In fact, the version of Telerik.Web.UI.dll that acTelerikStylesAssembly uses must match the version used in your project. Each settings file can set a path for Telerik.Web.UI.dll, so it is possible to use different versions of it when generating the skins assembly.

Link for download page: acTelerikStylesAssembly
Please read the included Readme.txt file to set and use this tool.

Hope this tool is enough simple and can help somebody else.
Any comments are welcome.
Alain

answered on 09 Sep 2013, 01:58 PM

Thank you Anish,

We created another standelone tool, named acTelerikStylesRenaming (LGPL license, source code included), This tool creates a new Telerik Skin by copying and renaming a base Telerik Skin.
This tool copies and renames all directories, sub directories and all accepted files including CSS files from the base Telerik Skin directory to the new one. In each CSS file, it replaces base Skin name with the new one (Lite version taken in account too).

Link for download page: acTelerikStylesRenaming
Please read the included Readme.txt file to set and use this tool.

Hope this tool is enough simple and can help somebody else.
Any comments are welcome.
Alain

answered on 17 Apr 2014, 07:32 PM

Hi,
I have problems with the next code (it doesn't work):

Modifed my style and downloaded Zip from visual style builder. -- Thanks Telerik Team! ---> DONE
Created my assembly with the tool provided in this thread. -- Thanks Bryan! -----> DONE
Added the dll to my project in the bin directory. ------> DONE
Created the reference to the dll. -----> DONE
Added the RadStyleManager with no StyleSheets. -----> DONE
Used Stuarts Code Snippet and added all the controls possible. (Added it to Page_Load) -- Thanks Stuart! ----> DONE

My code:

01.protected void Page_Load(object sender, EventArgs e)

02.{

03. string[] controls = { "ComboBox", "Button" };

04. base.OnInit(e);

05. foreach (string ctl in controls)

06. {

07. RadStyleSheetManager1.StyleSheets.Add(new StyleSheetReference(String.Format("MySkin.MySkin.{0}.MySkin.css", ctl), "MySkin"));

08. }

09.}

I don't know if i have to add some code in the webconfig file or what....Could you please help me???

answered on 22 Apr 2014, 03:18 PM

Hi Nicolas,

You should not manually to add the necessary style sheets to the RadStyleSheetManger, actually you need only register the skin assembly and set the new Skin on the RadControl, e.g.

<telerik:RadWindow

ID="RadWindow1"

runat="server"

NavigateUrl="http://www.telerik.com"

VisibleOnPageLoad="true"

Skin="MySkin">

</telerik:RadWindow>

For more information please reder to this code library. I hope this helps.

Regards,
Galin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 29 Apr 2014, 04:57 PM

Hello Nicolas,

I am going straight to your questions:
>allow that users change the skin whenever they want.(RadSkinManager)
You need to set the property ShowChooser to true, so the RadSkinManger to be visible on the page.

>add my own skin to the telerik skin list.(adding assembly).
ASPX

<telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="true">

<Skins>

<telerik:SkinReference Assembly="MyEmbeddedSkin" />

</Skins>

</telerik:RadSkinManager>

web.config

<appSettings>

<add key="Telerik.Web.SkinsAssembly" value="MyEmbeddedSkin"/>

</appSettings>

>set the default Telerik Skin.

<appSettings>

<add key="Telerik.Skin" value="[SkinName]" />

</appSettings>

I hope this helps.

Regards,
Galin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 21 Sep 2014, 10:16 AM

Hi All,

Almost gave up on accessing custom skins from assembly using the tool : 142703_telerik-webresourcebuilder
Based on my experience, the FixResourceCss method is not working properly and generating incomplete css files.

Just to share, here's what I did.

0. go to Visual Style Builder and create a new skin named TelerikRadControl using Metro Skin and choosing all controls, then change the base color to something else than blue, and then save all, then download the zip file

1. download 142703_telerik-webresourcebuilder.zip (first post)

2. change FixResourceCss to

/// <summary>
/// Fixes the resource CSS.
/// </summary>
/// <param name="cssFilePath">The CSS file path.</param>
private void FixResourceCss(string cssFilePath)
{
string[] cssFolderImage = new string[2];
string fullNamespaceWithFileName = string.Empty;
string innerOldUrl = string.Empty;
DirectoryInfo rootDir = new DirectoryInfo(_folderPath);
StreamReader s = File.OpenText(cssFilePath);
string read = s.ReadToEnd();
s.Close();

// 1. replace ControlName/ with <%= WebResource("NameSpace.SkinName.ControlName.
// 2. replace .gif with .gif") %>
// 3. replace .jpg with .jpg") %>
// 4. replace .png with .png") %>

string str = read;
foreach (var subDirs in rootDir.GetDirectories())
{
string controlName = subDirs.Name;
str = str.Replace(controlName + "/", @"<%= WebResource(""" + _namespace + "." + controlName + ".");
}

str = str.Replace(".gif", @".gif"")" + @" %>");
str = str.Replace(".jpg", @".jpg"")" + @" %>");
str = str.Replace(".png", @".png"")" + @" %>");

//string str = rx.Replace(
// read,
// new MatchEvaluator(delegate(Match m)
// {
// if (m.Groups.Count == 2)
// {
// innerOldUrl = m.Value.Replace("url('", string.Empty).Replace("')", string.Empty);
// cssFolderImage = innerOldUrl.Split(new char[] { '/' });
// if (cssFolderImage.Length > 1)
// {
// fullNamespaceWithFileName = string.Format("{0}.{1}.{2}", _namespace, cssFolderImage[0], cssFolderImage[1]);
// return string.Format(webResourceLine, fullNamespaceWithFileName.ToString());
// }
// else
// {
// throw new Exception("The skin package has already been processed.");
// }
// }
// return m.Value;
// }
// ));
// Write the modification into the same file

StreamWriter streamWriter = File.CreateText(cssFilePath);
streamWriter.Write(str);
streamWriter.Close();
}

3. build and compile
4. run WebResourceAutoBuilder.exe
5. Skin Zip Package: browse the zip file downloaded from VisualStyleBuilder website (zip name should not be renamed)
6. Output Folder: a subfolder where the zip file is found - subfolder should be empty or does not exist
7. Namespace: Company.UI.Web.Skins
8. Click Generate button
9. Reference the generated Company.UI.Web.Skins.dll to your VS web project
10. Create a RadStyleSheetManager (e.g. in your site.master file for example)

<head id="uxSiteHead" runat="server">
    <title>My WebSite</title>
    <telerik:RadStyleSheetManager id="uxSiteRadStyleSheetManager" runat="server" EnableHandlerDetection="true" EnableStyleSheetCombine="true" OutputCompression="AutoDetect">
    </telerik:RadStyleSheetManager>
</head>

11. For a given ASPX page, dynamically add the CSS files (from Company.UI.Web.Skins.dll) to RadSyleSheetManager - only for RadControls found/used in the ASPX page (including master, aspx page, user controls)

protected void Page_Load(object sender, EventArgs e)
{
    GetUserControls(Page.Controls);
}

public void GetUserControls(ControlCollection controls)
{
    foreach (Control ctl in controls)
    {
        string controlTypeName = ctl.GetType().Name;
        System.Diagnostics.Debug.WriteLine(controlTypeName);

        // Reference: http://www.telerik.com/forums/tool-for-embedding-custom-skins-into-an-assembly
        // Build Style sheet references from Skin Assembly

        string[] telerikControls = { "Ajax", "AutoCompleteBox", "Button", "Calendar", "ColorPicker", "ComboBox", "Common", "DataPager", "Dock", "DropDownList", "Editor", "FileExplorer", "Filter", "FormDecorator", "Grid", "ImageEditor", "ImageGallery", "Input", "LightBox", "ListBox", "ListView", "MediaPlayer", "Menu", "Notification", "OrgChart", "PanelBar", "PivotGrid", "ProgressArea", "Rating", "RibbonBar", "Rotator", "Scheduler", "SearchBox", "SiteMap", "Slider", "SocialShare", "Splitter", "TabStrip", "TagCloud", "Tile", "ToolBar", "ToolTip", "TreeList", "TreeView", "Upload", "Window" };
        string telerikSkinNameSpace = "Company.UI.Web.Skins";
        string telerikSkinName = "TelerikRadControl";

        // Add Common Stylesheet
        SiteRadStyleSheetManager.StyleSheets.Add(new StyleSheetReference(String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, "Common", telerikSkinName), telerikSkinNameSpace));

        // Dynamically Add Other Stylesheets if it is being used in the Master, Aspx, User Controls
        foreach (string telerikControl in telerikControls)
        {
            string telerikStyleSheet = string.Empty;
            StyleSheetReference styleSheetReference = null;
            bool addStyleSheetReference = false;

            if (controlTypeName.ToUpper().Contains(telerikControl.ToUpper()))
            {
                telerikStyleSheet = String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, telerikControl, telerikSkinName);
                styleSheetReference = new StyleSheetReference(telerikStyleSheet, telerikSkinNameSpace);
                addStyleSheetReference = true;
            }

            if (controlTypeName.ToUpper() == ("RadTextBox").ToUpper())
            {
                telerikStyleSheet = String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, "Input", telerikSkinName);
                styleSheetReference = new StyleSheetReference(telerikStyleSheet, telerikSkinNameSpace);
                addStyleSheetReference = true;
            }

            if (addStyleSheetReference)
            {
                var styleSheetCount = (from styleSheets in SiteRadStyleSheetManager.StyleSheets
                                       where styleSheets.Name == styleSheetReference.Name
                                       && styleSheets.Assembly == styleSheetReference.Assembly
                                       select styleSheets).Count();

                if (styleSheetCount == 0)
                {
                    SiteRadStyleSheetManager.StyleSheets.Add(styleSheetReference);
                }
            }
        }

        if (ctl.Controls.Count > 0)
        {
            GetUserControls(ctl.Controls);
        }
    }
}

12. Added an ASP.NET Skin file : App_Themes\Default\TelerikRadControl.skin

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadAjaxLoadingPanel runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadAsyncUpload runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadButton runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadCalendar runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadCaptcha runat="server" EnableEmbeddedSkins="true" Skin="Metro" RenderMode="Classic" />
<telerik:RadChart runat="server" EnableEmbeddedSkins="true" Skin="Metro" RenderMode="Classic" />
<telerik:RadColorPicker runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadComboBox runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadContextMenu runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadDataPager runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadDock runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadEditor runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.aspx" />
<telerik:RadFileExplorer runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadFormDecorator runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadGrid runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadImageGallery runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadImageTile runat="server" EnableEmbeddedSkins="true" Skin="Metro" RenderMode="Lightweight" />
<telerik:RadLightBox runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadListBox runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadListView runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadMediaPlayer runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadMenu runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadPane runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadPanelBar runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadProgressArea runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadRating runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadRotator runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadScheduler runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSearchBox runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSiteMap runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSlider runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSocialShare runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSpell runat="server" EnableEmbeddedSkins="true" Skin="Metro" RenderMode="Classic" />
<telerik:RadSplitBar runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadSplitter runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadTabStrip runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadTagCloud runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadTileList runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadToolBar runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadToolTip runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadTreeList runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />
<telerik:RadTreeView runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadUpload runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadWindow runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadWindowManager runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Classic" />
<telerik:RadXmlHttpPanel runat="server" EnableEmbeddedSkins="true" Skin="Metro" />

13. Configure the ASP.NET Theme in my web.config

<pages theme="Default" clientIDMode="Predictable" viewStateEncryptionMode="Always" enableViewStateMac="true" controlRenderingCompatibilityVersion="4.0">
</pages>

14. Nothing special in my <appSettings> just these:

<appSettings>
    
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
</appSettings>

That's it.
Hope its useful.

Thanks,
Henry

answered on 21 Sep 2014, 10:40 AM

Some mistake in Step #11,.. should be :

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Add Common Stylesheet
        string telerikSkinNameSpace = "Company.UI.Web.Skins";
        string telerikSkinName = "TelerikRadControl";
        SiteRadStyleSheetManager.StyleSheets.Add(new StyleSheetReference(String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, "Common", telerikSkinName), telerikSkinNameSpace));

        // Dynamically Add Other Stylesheets if it is being used in the Master, Aspx, User Controls
        GetUserControls(Page.Controls);
    }
}

public void GetUserControls(ControlCollection controls)
{
    foreach (Control ctl in controls)
    {
        string controlTypeName = ctl.GetType().Name;
        System.Diagnostics.Debug.WriteLine(controlTypeName);

        // Reference: http://www.telerik.com/forums/tool-for-embedding-custom-skins-into-an-assembly
        // Build Style sheet references from Skin Assembly

        string[] telerikControls = { "Ajax", "AutoCompleteBox", "Button", "Calendar", "ColorPicker", "ComboBox", "Common", "DataPager", "Dock", "DropDownList", "Editor", "FileExplorer", "Filter", "FormDecorator", "Grid", "ImageEditor", "ImageGallery", "Input", "LightBox", "ListBox", "ListView", "MediaPlayer", "Menu", "Notification", "OrgChart", "PanelBar", "PivotGrid", "ProgressArea", "Rating", "RibbonBar", "Rotator", "Scheduler", "SearchBox", "SiteMap", "Slider", "SocialShare", "Splitter", "TabStrip", "TagCloud", "Tile", "ToolBar", "ToolTip", "TreeList", "TreeView", "Upload", "Window" };
        string telerikSkinNameSpace = "Company.UI.Web.Skins";
        string telerikSkinName = "TelerikRadControl";

        foreach (string telerikControl in telerikControls)
        {
            string telerikStyleSheet = string.Empty;
            StyleSheetReference styleSheetReference = null;
            bool addStyleSheetReference = false;

            if (controlTypeName.ToUpper().Contains(telerikControl.ToUpper()))
            {
                telerikStyleSheet = String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, telerikControl, telerikSkinName);
                styleSheetReference = new StyleSheetReference(telerikStyleSheet, telerikSkinNameSpace);
                addStyleSheetReference = true;
            }

            if (controlTypeName.ToUpper() == ("RadTextBox").ToUpper())
            {
                telerikStyleSheet = String.Format("{0}.{1}.{2}.{3}.css", telerikSkinNameSpace, telerikSkinName, "Input", telerikSkinName);
                styleSheetReference = new StyleSheetReference(telerikStyleSheet, telerikSkinNameSpace);
                addStyleSheetReference = true;
            }

            if (addStyleSheetReference)
            {
                var styleSheetCount = (from styleSheets in SiteRadStyleSheetManager.StyleSheets
                                       where styleSheets.Name == styleSheetReference.Name
                                       && styleSheets.Assembly == styleSheetReference.Assembly
                                       select styleSheets).Count();

                if (styleSheetCount == 0)
                {
                    SiteRadStyleSheetManager.StyleSheets.Add(styleSheetReference);
                }
            }
        }

        if (ctl.Controls.Count > 0)
        {
            GetUserControls(ctl.Controls);
        }
    }
}

answered on 24 Aug 2015, 12:05 PM

Dear Telerik Users / Telerik Team,

I am very unversed in Telerik and I am trying to add a custom skin to a project, using the tool this thread is about. I have read many posts and Telerik help sections about the subject of custom skins and I am going to present the steps I followed. Since these steps don't result in a satisfactory result I hope someone can tell me where I am making mistakes.

I've...

1) copied the "Windows7" folder from "UI for ASP.NET AJAX Q3 2014"

2) made changes to "Grid.Windows7.css"

3) zipped the Windows7 folder

4) uploaded the zip folder on http://skinsassemblybuilder.telerik.com/ field 1

5) Skin Name > Windows7

6) Assembly Name > FsWindows7

7) uploaded the Telerik.Web.UI.dll used in my project

8) created the assembly dll

9) added the dll as a reference

10) added the following in appSettings:

<add key="Telerik.Skin" value="Windows7"/>

<add key="Telerik.Web.SkinsAssembly" value="FsWindows7"/>

After these steps my modification of the Grid Control is shown in the solution. But also several display errors resulting from wrong CSS properties. I've investigated the CSS sheets but the only obvious error I could find so far is this:

.RadComboBox_Windows7 .rcbInputCellLeft, .RadComboBox_Windows7 .rcbInputCellRight, .RadComboBox_Windows7 .rcbArrowCellLeft, .RadComboBox_Windows7 .rcbArrowCellRight {

background-image: url('/WebResource.axd?d=CsMK8ZyPRbmikhn3bvZkv6mjPXzoz14wcNjFPLu7ZmFfihjOB7z1E3Z…-sXRSQjvaopeSGWKI2hwBGOUpU1I_F4eXPKoisEyNO5glcIN4Dw2&t=635756753868773515');

_background-image: url('/WebResource.axd?d=orEAh3I98F4I-yR-MZitGDvRRN8YqJ0E_W-q4mjQ-Zxe0Cv4z1ha_T1…vRi-qrEU8oin87-oCa6C3Xz6AouVWJgSBlgFGTTKeQmo71HqhBM1&t=635756753868773515');

}

Somehow the background-image properties of several controls have duplicates. (above is only an example)

Did I follow all steps correctly?

The following remark from the Telerik website made me think this should be possible:

"And a final note – it is possible to have one of the default skins in a custom assembly – for example you customize the Hay skin and put it in a custom class project by following the steps above. Once you set the Telerik.Web.SkinsAssembly setting in the web.config, the Hay skin will no longer be loaded from Telerik.Web.UI even if it is present there as well."

Thank you very much in advance!

Julian Pfeil

answered on 27 Aug 2015, 10:57 AM

Hi Julian,

Can you please try to use different name for the custom skin that you are using (FsWindows7 for example)in steps 5 and 10 and see if it will make any difference. For avoiding the manual renaming of the existing skin I would suggest that you use the Visual Style Builder and save thew new skin files.

You can also refer to the following help article for additional information for your requirement:

Create a Custom Skin From an Existing Embedded Skin

If any further assistance is needed, please open a regular support ticket with the custom skin archive, so we can make some tests locally.

Regards,
Konstantin Dikov
Telerik

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 Feedback Portal and vote to affect the priority of the items