Custom skin compatible with a new Telerik version?

[Mathias]

Hello there!

We would like to use the Telerik Style Builder to create a custom skin to fit our CI/CD.
Now, there is a big question: Will it be possible to use the skin also for new versions of the Telerik ASP.NET AJAX controls?
Is there a possibility to convert custom skins for newer versions or can I simply upload the skin in the Style Builder and it will automatically converted when I save it again?

Thank you very much in advance.

Best regards
Mathias Winkler

[Stamo Gochev]

Hello Mathias,

The Visual Style Builder is not dependent on the version of the RadControls, so you should be able to use it with our latest release without any problems. This means that you can style the skin you have created before and upload it in the VSB in order to add additional visual changes to your custom skin.

You should also be aware of the fact that the new light-weight rendering of the RadControls is not supported in the Visual Style Builder as it relies on the classic rendering.

Regards,
Stamo Gochev
Telerik

[Mathias]

Hello Stamo

Thanks for the quick reply.

Best regards
Mathias Winkler

[moegal]

How would you create a style for lightweight rendering then?

Thanks, Marty

[Bozhidar]

Hello,

For now, Visual Style Builder will not have the option to style Light-weight rendering mode. Soon the help articles for customizing light-weight rendered controls will be updated and this should be done by hand.

Actually it will be easy, as you have to edit a few CSS properties (borders, gradient background color etc.) and just a few sprites that are used commonly for all light-weight rendered controls.

Until the help articles update, you could use the draft documentation, I`ll post for RadDock, but it is the process and steps are the same for all controls:

RadDock Custom Skin with LightWeight RenderMode

 

Each of the controls included in the RadControls for ASP.NET AJAX suite is styled with two CSS files that are loaded in a certain order. The first one – [ControlName].css , also called base stylesheet, contains CSS properties and values that are common for all skins, i.e it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In the general case, when creating a custom skin for a control this file should not be edited, unless the custom skin needs different sizes, padding and / or margins.

The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, e.g. - Dock.Default.css. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties, and references to images, colors, borders and backgrounds.

Since Q2 2013 RadDock has a LightWeight render mode, which uses semantically structured HTML and CSS3 for shadows, rounded corners and gradients. Overall, the skinning method is the same as for the Classic mode. The difference is that now there is one common sprite for all Light-Weighted controls called radActionsSprite.png. The sprite is placed in the [SkinName]\Common folder, e.g.: [RadControls for ASP.NET AJAX installation folder]\Skins\Default\Common\radActionsSprite.png

Creating RadDock  LightWeight Skin from Existing One

1. In your project, create a new directory named Skins
2. In the Skins folder if you already have some custom skin, most probably you have already a folder named: MyCustomSkin – if you don’t – create one;
3.  In the Skins folder create a new folder named:  MyCustomSkinLite - this is the place where your Light-Weight custom skins CSS will be placed.
4. Go to [RadControlsInstallationFolder]\Skins\DefaultLite and copy Dock.Default.css in your MyCustomSkinLite folder;
5. Go to [RadControlsInstallationFolder]\Skins\Default and copy Common folder in your MyCustomSkin folder;
6. Rename Dock.Default.css to Dock.MyCustomSkin.css ;
7. When you are finished you should have the following folder structure in your project:

a.       Skins/MyCustomSkin/Common/ - containing several sprites;

2. Skins/MyCustomSkinLite/ Dock .MyCustomSkin.css

 

8. In order to support multiple skins of RadDock on a single page, the wrapping skin-specific class is coined by the name of the control, plus underscore ("_") plus SkinName, i.e. .RadDock_Default, so in order to create a custom skin out of the Default skin, we should rename all occurrences of  "RadDock_Default" in Dock.MyCustomSkin.css to "RadDock_MyCustomSkin" as shown below:

9. Add a new server declaration of RadDock on your page, and set Skin="MyCustomSkin" and EnableEmbeddedSkins="false":

<telerik:RadDock ID="RadDock1" runat="server"  EnableEmbeddedSkins="false" Skin="MyCustomSkin" />

10. Register Dock.MyCustomSkin.css in the head section of your webpage. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM:

<link href="Skins/MyCustomSkin/Dock.MyCustomSkin.css" rel="stylesheet" type="text/css" />

11. Make sure the path to the files is correct; otherwise the skin will not apply.
12. To complete the customization, you will need to change the common sprite color according to your needs.  Open [RadControlsInstallationFolder]\Skins\Default\radActionsSprite.png and edit it as required.
13. Reload the page, and if the steps 1-12 have been followed correctly, you will see RadDock running a custom Default skin set as an external resource.

RadDock LightWeight Custom Skin Example

 

Below is shown how to modify the CSS in order not only to change some colors and background colors, but also some base layout settings such as font size, element height, border-radius etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div.RadDock_NewSkin {
            background-color: #f7cefa; /* Dock/Dock Content base background color */
            border-color: #450349; /* Dock border color */
            color: #4607fb; /* Dock text color, will be applied to Dock title text color also */
            font-family: "Trebuchet MS", "Lucida Grande", Sans-Serif; /* Change content font family */
            font-size: 16px; /* Change content font size */
            border-width: 3px; /* Change Dock border width */
        }

        div.RadDock_NewSkin .rdTitleWrapper {
            height: 25px; /* Change TitleBar height */
            border-bottom-color: #450349; /* sets color of the bottom border titlebar  */
            background-image: -webkit-linear-gradient(top, #840c83 0%, #a172a0 100%); /* CSS gradient for the title bar, applied from top to bottom - webkit */
            background-image: -moz-linear-gradient(top, #840c83 0%, #a172a0 100%); /* CSS gradient for the title bar, applied from top to bottom - firefox */
            background-image: -ms-linear-gradient(top, #840c83 0%, #a172a0 100%); /* CSS gradient for the title bar, applied from top to bottom - IE10+ */
            background-image: -o-linear-gradient(top, #840c83 0%, #a172a0 100%); /* CSS gradient for the title bar, applied from top to bottom - Opera */
            background-image: linear-gradient(top, #840c83 0%, #a172a0 100%); /* CSS gradient for the title bar, applied from top to bottom - native CSS3 rule */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#840c83', endColorstr='#a172a0',GradientType=0 ); /* Older IE */
        }

        div.RadDock_NewSkin .rdTitleWrapper  .rdTitle {
            color: #fff; /* Should be specified in order to be different than the Content text color */
            font-family: Verdana, serif; /* Change font family */
            font-size: 20px; /* Change font size */
            line-height: 22px; /* Change line-height to position the title in the middle if you have changed font size already */
        }

        /* Advanced Customization */
        div.RadDock_NewSkin.rdRoundedCorner {
            border-radius: 8px; /* Change border radius */
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server" />
    <telerik:RadDock ID="rd1" runat="server" Visible="True" Width="400" Height="300"
        RenderMode="Lightweight" Top="100" Left="20" Title="Dock Title" Skin="NewSkin"
        EnableRoundedCorners="true" EnableEmbeddedSkins="false">
        <Commands>
            <telerik:DockCloseCommand />
            <telerik:DockExpandCollapseCommand />
        </Commands>
        <ContentTemplate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim nibh. Etiam laoreet eros sit amet felis cursus faucibus.
        </ContentTemplate>
    </telerik:RadDock>
    </form>
</body>
</html>

Regards,
Bozhidar
Telerik

[Dan]

Is there an example of how to setup a Custom Skin using the Lightweight RenderMode with the RadCombox control?

[Magdalena]

Hi Dan,

You can find an exemplar solution of creating a custom skin for RadComboBox in the attachment. There are explanatory comments in the style sheet file.

 

Regards,
Magdalena
Telerik

[Philipp]

Hi everbody,

i created a custom skin assembly for all the telerik controls we use so far (as described here: http://www.telerik.com/help/aspnet-ajax/introduction-skins-external-assembly.html). This was done more than a year ago

We have no Telerik.Web.UI.Skins.dll in our project, cause we dont need it (i hope i am right with this)

Now that the controls are able to render in divs instead of tables (something i was looking for years with telerik controls) i would love to do this for all controls.

I started with radwindows (we use a radwindowmanager keeping all our windows) and ran into huge problems.

First i updated our Window.css with some lightweight-styles, found in your demos.
Next i set in my Windows-baseclass (inherits RadWindow) RenderMode to Lightweight.

Then i checked wheather its working or not at this point. It worked.

Next i was looking in some descriptions for lightweight-rendering and found that the window-manager should have the same settings as the windows. As i use alert and confirm-templates this was something i also thought should be done.

Next i set the rendermode of radwindowmanager to lightweight.
Now everything messed up. Skins are totally lost. Windows seem to have the parts of the default-style but are basically transparent.

Next i removed the rendermode-property from radwindowmanager.
Now my Windows look fine again, but my alerts and confirms are missing the window-title- styles like icon, background, color....
Also the alerts and confirms are rendered in tables (cause radwindowmanager is not set to lightweight)

So far i can say whenever i set the rendermode of radwindwomanager and radwindow to lightweight none of my Window-Styles from my skin-assembly are loaded.

Here's some code of my skin assembly, i fear i may miss sonething here

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;

[assembly: WebResource("kupStyles.kupv2.Window.kupv2.css", "text/css", PerformSubstitution = true)]
[assembly: WebResource("kupStyles.kupv2.Window.CommandButtonSprites.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Window.radActionsSprite.png", "image/png")]
[assembly: WebResource("kupStyles.kupv2.Window.Icon.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Window.kupv2.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Window.rwResize.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Common.loading.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Common.loading_02.gif", "image/gif")]
[assembly: WebResource("kupStyles.kupv2.Common.loading_small.gif", "image/gif")]

namespace kupStyles
{
    [Telerik.Web.EmbeddedSkin("Window", "kupv2", typeof(RadWindowBase))]
    public class RadWindowBase
    {
        public RadWindowBase()
        {
        }
    }

}

Do i miss a class for radwindowmanager or stuff like this?
I kinda stuck here ;) 

Is it possible to give me a zip containing all files i need to get my external skin assembly working with lightweight-rendering for radwindow-/manager (based on Metro-style)

Regards,
Philipp

[Bozhidar]

Hi,

If I understand correctly, I have tried to implement in the Classic version for the RadWindow controls some styles in its CSS files expecting that they will works when you switch to LightRender mode.

Note that RadWindow light weight is using different base stylesheet, different skin file and different sprite. RadWindow Custom Skin with LightWeight RenderMode will give you the base steps how to create a skin based on the new LightWeight mode.

This is how the embedded resources are described, the LightWeight part is yellow colored:

#region Base CSS
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Window.css", "text/css", PerformSubstitution = true)]
//Light-Rendering
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.WindowLite.css", "text/css", PerformSubstitution = true)]
#endregion

#region Assembly Resource Attribute

#region popups
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlert.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirm.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlertDark.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirmDark.gif", "image/gif")]
#endregion

#region Default Skin
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.Default.css", "text/css", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.Default.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.CommandButtonSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.WindowHorizontalSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.WindowVerticalSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Common.loading.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Common.loading_small.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.WindowHorizontalSprites.png", "image/png")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Default.Window.WindowVerticalSprites.png", "image/png")]
//Light-Rendering
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.DefaultLite.Window.Default.css", "text/css", PerformSubstitution = true)]
#endregion

Common sprites necessary for the correct rendering, note that you could change where they are placed, and you should change the URLS according to your folder structure

// Across all skins
[assembly: WebResource("Telerik.Web.UI.Skins.Common.AliasedLoading.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.AliasedLoadingBlack.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.LightBlueItemHover.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.LightBlueItemSelected.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.ShadowBottom.png", "image/png")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.ShadowRight.png", "image/png")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.radArrowSprite.png", "image/png")]


#region <!-- Sprites -->
    // Sprites
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.Sprites.radActionsSprite.png", "image/png")]
    // Temp
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.Sprites.radSearchSprite.png", "image/png")]
#endregion


#region <!-- Gradients -->
    // Gradients
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.Gradients.lightGlassTile.png", "image/png")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.Gradients.lightSmoothTile.png", "image/png")]
#endregion


#region <!-- Skin specific -->

    #region <!-- Default -->
        // Default skin
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radFormSprite.png", "image/png")]
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radFormSpriteIE6.png", "image/png")]
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radActionsSprite.png", "image/png")]
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radActionsSpriteIE6.png", "image/png")]
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radGradientListSprite.png", "image/png")]
        [assembly: WebResource("Telerik.Web.UI.Skins.Default.Common.radGradientButtonSprite.png", "image/png")]
    #endregion

#endregion

IF you need some files, open a support ticket and ask whcih files exactly you need.

Regards,
Bozhidar
Telerik

[Philipp]

Hi Bozhidar,

and thank you for your assistence.

Why does everything (besides the alerts and confirms) works as excpteced when i just set my RadWindows to Rendermode Ligthweigth and don't set it in RadWindowManager?

I Just want one Skin(Lightweight), no other Skins for none Lightweight-Rendering, so i dont need to have 2 css-files for Windows, just one with the LightWeight-Classes. Thats what i did and it works until i set rendermode=Lightweight in RadWindowManager (which i need for the Alerts and Confirms).

So my basic question is why does it mess up when i set both radwindow and radwindowmanager to lightweight
and what am i missing in my assembly. In my previous post you can identify all files i have for Window-Styles. 

This was working without Lightweight and i assume i do not have to add that much to make it work for Lightweight.

[EDIT]
In My Skin Assembly i have nothing for Defaults.
All i have is a folder named [kupv2] which is the skin-name.
In here are all the css files for the controls (like Window.kupv2.css) and the folders for the controls containing their sprites/images.

[EDIT_2]
Shouldn't the control use the default-lightweight-styles in the same way it use the default styles from telerik.web.ui in non lightweight-szenario?

Greetings,
Philipp

[Bozhidar]

Hello,

Until you are using custom skin I could not tell what is happen with your application, To give you some further help we will need to open a support ticket and to send us you project so we will be able to test in on our side.

for [EDIT] - Default in the example bellow shows how you should rework your custom skin resources in order to be properly loaded on page.

for [EDIT_2] - instead using custom skin, you could try to load the Default skin to check if it will be loaded and rendered properly. If it is rendered properly, then something should be fixed inside your project.

Regards,
Bozhidar
Telerik

[Philipp]

Hi,

it definitely seems to be a problem on my external skin assembly. With Default (No Skin assigned) everthing works fine. 

So i would like to start over complete new based on this http://www.telerik.com/help/aspnet-ajax/introduction-skins-external-assembly.html, but what am i missing here?

My AssemblyProject is named kupv2. What exactly should be included in kupv2? 

In TelerikFolder there's a Skins-Folder.
Should i take the folders [Default], [DefaultLite], [Metro] and [MetroLite] when i want to create a custom skin based on Metro-Style?
Should I Include them all in the way the article describes it, rename Metro to my SkinName and thats it?

Thanks
Philipp

[Bozhidar]

Hi,

Hi, this is exactly what you have to do. If you take only Meto, but not MetroLite - you will not be able to use a custom skin with LightRender mode as you will not have such a skin.

Probably, this is the issue with your project - you are trying to set a LightRender mode to any control, but you do not have skin based on the Light layout. So you take the LightBase styles, but not the SkinLight styles, so you have properly rendered control without any colors, background images etc.

Regards,
Bozhidar
Telerik

[Philipp]

Hi,

it doesn't work on my side.

I tried something different:
I added the Window.css and WindowLite.css (the BaseSheets) from the Telerik.Skins-Folder to my kupStyles-SkinAssembly. 
I added them direct to the root, no subfolder or skinfolder.
I checked which styles are working in the project and realized this:
Whenever i set RenderMode=Lightweight and Skin=kupv2 in RadWindowManager the only stylesheet for Window that is actually used(rendered) from my assembly is the kupStyles.WindowLite.css. I see this through analysing what is rendered in the webresourcefile and for radwindow there is only one section starting with the comment /* START kupStyles.WindowLite.css */.

What i excpected to be used is the kupStyles.kupv2Lite.Window.kupv2.css or kupStyles.kupv2.WindowLite.kupv2.css
(i added both to check which one gets in use but none of them worked)

In conclusion: RadWindowManager totally ignores the 'Style=kupv2' when RenderMode=Lightweight. its only looking for css-file named kupStyles.WindowLite.css in the root of my skinAssembly and thats the only css file its rendering and this is why i lost all my styles, because such a file doesn't exist in my assembly. After adding this file and copy all my styles into it it worked.

This is somehow very strange behavior and i can not see it in any relation to the documentations.

i really would appreciate a sample SkinAssembly with Metro and MetroLite Skins.
The Documentation for external SkinAssemblies says only to take over all the files for a skin and prepare them.
But when i do it with Metro and MetroLite it is definitly not working for Lightweight in RadWindowManager.

Regards,
Philipp

[Bozhidar]

Hi,

We have planned to update the article and to icnldue the LightWeight resources and it is in our to do list, but I can't tel if the sample will be using Metro or different skin.

Regards,
Bozhidar
Telerik

[Philipp]

Hi Bozhidar,

at this point my "workaround" is working fine right now.
I will wait until the documentation gets an update and includes the lightweight-part.
If it is possible i would like to get a note here in this thread, when the documentation gets updated.
Thank you for your assistance.

Regards
Philipp

[Bozhidar]

Hi,

We will notify you when the documentation is updated.

Regards,
Bozhidar
Telerik