Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > Tool for Embedding Custom Skins into an Assembly

• Telerik Admin Master

  Posted on Aug 5, 2009 (permalink)

  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
  
  
  
  

  Attached files

  • telerik-webresourcebuilder.zip

  Reply

• Eric

  Posted on Nov 12, 2009 (permalink)

  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"/>

  Reply


• Dimo Dimo

  Posted on Nov 13, 2009 (permalink)

  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.

  Reply

• Mohit Thakral

  Posted on Jan 30, 2010 (permalink)

  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 .  
  
  

  Reply

• Dimo Dimo

  Posted on Feb 1, 2010 (permalink)

  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.

  Reply

• Eirik H

  Posted on Jun 23, 2010 (permalink)

  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.
  
  

  Reply

• Stuart Hemming MVP

  Posted on Jul 30, 2010 (permalink)

  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
  
  

  Reply

• Stuart Hemming MVP

  Posted on Jul 30, 2010 (permalink)

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

  Reply

• Dimo Dimo

  Posted on Aug 2, 2010 (permalink)

  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

  Reply

• Stuart Hemming MVP

  Posted on Aug 2, 2010 (permalink)

  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
  

  Reply

• Daniel

  Posted on Mar 10, 2011 (permalink)

  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

  Reply

• Dave

  Posted on Jun 23, 2011 (permalink)

  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

  Reply

• Richard

  Posted on May 14, 2012 (permalink)

  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
  

  Reply

• Galin Galin

  Posted on May 17, 2012 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > Tool for Embedding Custom Skins into an Assembly