Trouble Registering a Custom Skin Using Assembly and External CSS files

[Paul]

Hello all,

I've used the Theme Builder to configure a style for our internal hub, Ive created an Assembly with Bryans builder and added it to the bin folder.

Ive looked through various tutorials on the knowledge base from Loading Skins for External assemblies to manually referencing the skins in CSS and its really starting to drive me nuts.

If anyone could please point me in the right direction it would be most appreciated.

So here goes;

In my web.config file I have the following in <appSettings>:

<add key="Telerik.Skin" value="Vulcan"/>
<add key="Telerik.EnableEmbeddedSkins" value="false"/>
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="true"/>
<add key="Telerik.Web.SkinsAssembly" value="Vulcan"/>
<add key="Telerik.Web.UI.StyleSheetFolders" value="~/App_Themes/Vulcan" />

 

Then in my MasterPage.aspx file I have the following - note for now i'm only referencing a single control:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager" runat="server">
    <StyleSheets>
           <telerik:StyleSheetReference Name="Vulcan.Button.Vulcan.css" Path="~/App_Themes/Vulcan/Button.Vulcan.css"  Assembly="Vulcan" ></telerik:StyleSheetReference>
     </StyleSheets>
</telerik:RadStyleSheetManager>

 

And in the child page i have:

<telerik:RadButton ID="btnRecalculate" runat="server" Text="Recalculate" OnClick="btnRecalculate_Click" RenderMode="Lightweight" Skin="Vulcan" CssClass="btnRecalculate" />

 

However when I view the page I get a boring unstyled standard button, which obviously I can style via CSS but that would defeat the object.

Please advise, as I'm at my wits end with the software, which has lots of cool features and functionality, but the the corporate styling is driving me crazy

Many thanks

 

[Attila Antal]

Hi Paul,

Registering Skins using StylesheetManager or loading them from an external assembly are two different procedure and they do not work in parallel. Chose the one that fits your needs the most.

StylesheeetManager

If you would like to register the custom Skin using StylesheetManager, the ThemeBuilder - Apply Skin article describes the way.


Load Skins from External Assembly

If you wish to load the skins from an external assembly, follow the steps in the How to Load Skins from External Assemblies article. We have created a Code Library sample to demonstrate this scenario. Please download and try out the sample project from the following source to get a better understanding on how it works: How to load skins from external assemblies

I hope this will help sorting out the issue.

Kind regards,
Attila Antal
Progress Telerik

[Paul]

Hi Attila,

Thanks for your reply, however it wasn’t very helpful sadly apart from the fact that you clearly indicated they are two different solutions- thank you for that.

However, I am still no closer to solving this, creating a new skin should not be so complicated, If we had known it would be so difficult we never would have invested in the software in the first place.

I looked at creating an assembly and essentially, I do not understand what its being asked of me, so I found this software from your forum:

https://www.telerik.com/forums/tool-for-embedding-custom-skins-into-an-assembly#P1sDkxVqv0SRM8pS9KFwzQ

I followed the instructions with the software, copying the Black theme and calling it Test (i had to G Drive the File https://goo.gl/7ta1Ki)

I then created a new website, converted it to a Telerik website and added CSS folder the to the root of the project and .dll into the Bin folder.

I then added a Telerik button with the skin tag applied

<telerik:RadButton runat="server" ID="btnTest"Text ="Click Me" Skin="Test"RenderMode="Lightweight"></telerik:RadButton>

 

I added the following to the webconfig

<appSettings>
  <add key="Telerik.Web.SkinsAssembly" value="Test" />
  <add key="Telerik.EnableEmbeddedSkins" value="true" />
  <add key="Telerik.Skin" value="Test" />
  <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
  <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
</appSettings>

 

Ran the project and still no skin, just the base CSS classes

This is getting very very frustrating now.  If it was just pure CSS then I wouldn’t be having this issue.

Overall we were very happy with the software and purchased it knowing that we COULD skin it to our needs however we are now doubting our decision to go with Telerik as it has been nothing but frustrating to skin to our corporate branding.

[Attila Antal]

Hi Paul,

Thank you for sharing more details, it helped me get understand the confusion behind this issue.

The reason the styling was unsuccessful, is because the control's RenderMode is set to Lightweight. Changing it to Classic will resolve the problem.

Here is a short summary of my findings: In your initial post, you have mentioned that you have generated a custom Skin using the Theme Builder which is a tool designed for controls using Lightweight Render Mode. I've seen that the project was configured to register the Skin using StyleSheetManager. If this method is used, then the EnableEmbeddedSkins property of the control needs to be turned off by setting its value to False. If loading the Skin from an Assembly, there are three configuration steps required. One of which is adding the SkinsAssembly key to the web.config, set the Skin property to the name of the custom Skin and ensure that the RenderMode of the control is set accordingly. Combining these two methods may not produce the expected results.

After you've shared the assembly file, I've noticed that it contains Skin related files that are generated by the Telerik Visual Style Builder which is compatible with Classic RenderMode.

Also, we would be really grateful if you could share you feedback about which part of our Documentation caused the confusion, so that we can improve it in order to avoid such issues in the future.

Kind regards,
Attila Antal
Progress Telerik

[Paul]

Thanks for that,

I think the issue is there is no clear path between identifying the Classic and Lightweight RenderMode as well as there is no real tutorial on adding a custom theme, its very much do this this and this and it works (well it doesn't evidently :D)

So I have attached the Saas Theme from the Theme Builder as we want the lightweight RenderMode

There are no images contained in the Zip (are these for Classic RenderMode?)

What are my next steps?

I want to;

• Have all controls enabled for Lightweight
• Use the Vulcan skin (https://goo.gl/HakS4R - again i cant attach)

I don't mind which method is used, I just need clear step by step instructions on how to do it, the whole manually creating an assembly was massively confusing (read as beyond my knowledge) even with the link to the  project, that had the assembly AND CSS files but no overall explanation. I found the tool i mention as I had no other way of doing it. I would have thought that as a company you would have your own simple to use tools for this.

Thank you for coming back so quickly.

Paul

[Paul]

Annoying how I cant edit:

I would rather use the StyleSheetManager method, but just need clear step by step instructions on how to do it, the whole manually creating an assembly was massively confusing (read as beyond my knowledge) even with the link to the  project, that had the assembly AND CSS files but no overall explanation. I think i need to override the base style sheet with this method?

I found the tool i mention as I had no other way of doing it. I would have thought that as a company you would have your own simple to use tools for this.

[Attila Antal]

Hi Paul,

Thank you very much for your feedback! We will improve the documentation to make it simpler for developers when following it. 

Currently we only have an Official Assembly Builder for the Classic render mode which can be accessed at Skin's Assembly Builder. As for the Lightweight Render Mode, the assembly needs to be built manually by following the documentation. Updating the documentation and creating a Skin's Assembly builder for Lightweight render mode may take a little while, in the meantime, I will try to point out the important steps that you can follow to create Skin's assembly for that RenderMode. If you will find these steps difficult, you can register the CSS files in the head tag as link references (see Theme Builder - Apply Skin)

Steps to create Skins Assembly for Lightweight Render Mode

1. Once you have created your custom Skin using Theme Builder open the How to Load Skins from External Assemblies documentation article and follow the steps from 1. to 3. from the Create custom Skins Assembly section.

2. If you have followed the steps from 1 to 3, you will end up having a folder "SkinNameLite" where SkinName is the name of the Skin you have defined in the Theme Builder application.

3. Create a public class as mentioned in step 6 and add a WebResource declaration to it that will reference the CSS file for that control. Repeat this process for all the controls you want to style.

// LightWeight RenderMode
[assembly: System.Web.UI.WebResource("MyAssembly.MySkinNameLite.Slider.MySkinName.css", "text/css", PerformSubstitution = true)]

namespace MyAssembly
{
    //add EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it
    [Telerik.Web.EmbeddedSkin("Slider", "MySkinName", typeof(RadSlider))] // custom skin
    public class RadSlider
    {
    }
}

4. Compile the project to get the Assmebly file (SkinName.dll) and add a reference to it in your project.

5. Once done, you can follow the step 9 from the documentation so add a Key in the web.config and set the Skin property to the name of your custom skin.

I hope the steps above will ease the process of applying custom skins.


Kind regards,

Attila Antal
Progress Telerik