Tool for Embedding Custom Skins into an Assembly

31 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1691 posts
    Member since:
    Oct 2004

    Posted 05 Aug 2009 Link to this post

    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



  2. Eric
    Eric avatar
    2 posts
    Member since:
    Apr 2009

    Posted 12 Nov 2009 Link to this post

    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"/> 
  3. Dimo
    Admin
    Dimo avatar
    8401 posts

    Posted 13 Nov 2009 Link to this post

    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.
  4. Mohit Thakral
    Mohit Thakral avatar
    1 posts
    Member since:
    Nov 2009

    Posted 30 Jan 2010 Link to this post

    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 .  

  5. Dimo
    Admin
    Dimo avatar
    8401 posts

    Posted 01 Feb 2010 Link to this post

    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.
  6. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 23 Jun 2010 Link to this post

    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.

  7. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 30 Jul 2010 Link to this post

    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

  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 30 Jul 2010 Link to this post

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

    -- 
    Stuart
  9. Dimo
    Admin
    Dimo avatar
    8401 posts

    Posted 02 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 02 Aug 2010 Link to this post

    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
  11. Daniel
    Daniel avatar
    7 posts
    Member since:
    Nov 2010

    Posted 10 Mar 2011 Link to this post

    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

  12. Dave
    Dave avatar
    3 posts
    Member since:
    Jun 2011

    Posted 23 Jun 2011 Link to this post

    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
  13. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 14 May 2012 Link to this post

    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
  14. Galin
    Admin
    Galin avatar
    526 posts

    Posted 17 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Alain
    Alain avatar
    33 posts
    Member since:
    Feb 2009

    Posted 26 May 2012 Link to this post

    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
  16. Anish
    Anish avatar
    1 posts
    Member since:
    Dec 2012

    Posted 18 Jun 2013 Link to this post

    Hello Alain

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

    Thanks. 
    Anish
  17. Alain
    Alain avatar
    33 posts
    Member since:
    Feb 2009

    Posted 09 Sep 2013 Link to this post

    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

  18. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 10 Apr 2014 Link to this post

    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."}
  19. Galin
    Admin
    Galin avatar
    526 posts

    Posted 15 Apr 2014 Link to this post

    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
     

    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.

     
  20. Alain
    Alain avatar
    33 posts
    Member since:
    Feb 2009

    Posted 15 Apr 2014 in reply to Steve Link to this post

    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
  21. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 16 Apr 2014 Link to this post

    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.
  22. Nicolas
    Nicolas avatar
    3 posts
    Member since:
    Apr 2014

    Posted 16 Apr 2014 Link to this post

    Could you share the code please? I've problems with this.
  23. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 16 Apr 2014 Link to this post

    Sure. 
  24. Nicolas
    Nicolas avatar
    3 posts
    Member since:
    Apr 2014

    Posted 17 Apr 2014 Link to this post

    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???
  25. Galin
    Admin
    Galin avatar
    526 posts

    Posted 22 Apr 2014 Link to this post

    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.

     
  26. Nicolas
    Nicolas avatar
    3 posts
    Member since:
    Apr 2014

    Posted 24 Apr 2014 in reply to Galin Link to this post

    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.













  27. Galin
    Admin
    Galin avatar
    526 posts

    Posted 29 Apr 2014 Link to this post

    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.

     
  28. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 21 Sep 2014 Link to this post

    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
  29. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 21 Sep 2014 Link to this post

    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);
            }
        }
    }
  30. Julian
    Julian avatar
    1 posts
    Member since:
    Aug 2015

    Posted 24 Aug 2015 Link to this post

    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

Back to Top