Tool for Embedding Custom Skins into an Assembly

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:

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

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 .  

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

Just wanted to add a big thanks for making this available!

I'm not sure I used it correctly, but instead of having to register each and every .css file with a StyleSheetReference, I used a free tool called TXTcollector to combine all the .css files from the theme together to one, main MySkin.css file (you have to "rename *.css *.txt" for TXTcollector to work with them). That way I could just have one StyleSheetReference pointing to MySkin.css.

I have a question.

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

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

Is OnInit the right place to do this?

-- 
Stuart

Is there a way of using this tool to create an assembly with more than one skin in?

-- 
Stuart

Hello Stuart,

It is OK to add the stylesheet references in Init, you can also do it in Load or PreRender.

And yes, you can embed more than one custom skin in a single assembly, however I am not sure the tool provided here is able to do this automatically. You can do it manually using the code library demo.

Sincerely yours,
Dimo
the Telerik team

Dimo

> It is OK to add the stylesheet references in Init, you can also do it in Load or PreRender.
Thanks for that.

> however I am not sure the tool provided here is able to do this automatically. 
It can; you just add more than one skin's zip file in the first box!

-- 
Stuart

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.)

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

Cheers,
-= Daniel

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

Do you know if there is a method for creating a .DLL with multiple custom skins?  Ideally, to save on memory, we'd like to remove the Telerik.Web.UI.Skins.dll and create a custom one with 2 or 3 skins only.

Thanks!

Rich

Hello Richard,

Please refer to the following pages for info how to build a custom Skin assembly
http://www.telerik.com/help/aspnet-ajax/introduction-skins-external-assembly.html
http://www.telerik.com/community/code-library/aspnet-ajax/general/how-to-load-skins-from-external-assemblies.aspx

I hope this helps.

All the best,
Galin
the Telerik team

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

Hello Alain

The tool works like a charm. Great work !!! and a big help.

Thanks. 
Anish

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

I just tried this in VS 2012 and got the following error:

{"The process cannot access the file 'C:\\Projects\\Telerik\\WebResource Assembly Builder\\WebResourceAutoBuilder\\bin\\Debug\\ICSharpCode.SharpZipLib.dll' because it is being used by another process."}

Hello Steve,

Could you please elaborate a bit more on your scenario and send us the code you are using for creating the problematic skin and assembly?

Regards,
Galin
Telerik

Hi Steve,

If this message appears when you are using acTelerikStylesAssembly tool, save all your settings, close it, reopen it and reload your previously saved settings. You can after generate your assembly.

What you do mean by "I just tried in VS 2012", to use the generated assembly in your VS2012 project or to compile the acTelerikStylesAssembly tool in VS2012?

Best regards,
Alain

I took the project provided by Bryan Boudreau and ran it. When it tried to create an assembly, it failed on the line with the webresource.

I don't think this will be an issue as I am waiting for Ivan Zhekov to put together an assembly of the Forest skin for me. He will also provide the project to regenerate the dll when a new version of the control kit comes out.

Could you share the code please? I've problems with this.

Sure. 

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:

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

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.

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

Regards,
Galin
Telerik

Hi Galin!

Thanks for answer me! But  I can't use your solution because of this..

I have to:

>allow that users  change the skin whenever they want.(RadSkinManager)
>add my own skin to the telerik skin list.(adding assembly).
>set  the default Telerik Skin.

Could you please help me with this or give me a orientation?

PD: Sorry for my poor English. 

Regards.

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

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>
    <!-- Telerik Application Settings -->
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />    
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
</appSettings>




That's it.
Hope its useful.

Thanks,
Henry

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);
        }
    }
}

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:

 

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:

 

 

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

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