The skin style of the dock controls, namely, PerDock Control, PerDockZone Control and PerDockLayout Control, largely determines the feel and look of the dock controls. With the purpose to help developers use designed skin style for these dock controls, our UI Dock Controls for ASP.NET AJAX enables users to provide a set of existing skins.

A skin is a combination of images and a CSS stylesheet that can be applied to HTML elements. Remarkably, the dock controls cannot only allow developers to easily use these default skins, but also enable them to use their own custom skins. And this online tutorial aims to offer you guidance on how to modify skins for these dock controls.

Since the PerDockLayout Control can not be rendered on the client side, there is no direct effect if you set the Skin property of the PerDockLayout Control. But if the PerDock Control and PerDockZone Control, which are placed on the PerDockLayout Control, have no Skin Property, then these two dock controls will use the Skin style that is applied to the PerDockLayout Control.

You can use following sample code to set the skin of dock zone in aspx web page. And the skin setting here overrides the Skin Property that is used by the PerDockLayout Control. Similar to PerDockLayout Control, if the PerDock Control, which is placed on the PerDockZone Control, has no Skin property, the PerDock Control will use the Skin style that is applied to the PerDockZone Control.

<kettic:PerDockZone ID="PerDockZone1" runat="server" Width="250px"
Height="400px" Skin="Forest" >
</kettic:PerDockZone>

Following programming code is used to change the skin of the PerDock Control. And the skin setting here overrides the Skin Property that is used by the PerDockLayout Control or the PerDockZone Control.

<kettic:PerDock ID="PerDock1" runat="server" Skin="Forest" 
Title="Dock" Width="250px" Text="Dock1">
</kettic:PerDock>

The customization of dock control' skin may refer to two cases. One is that you make some modifications based on one existing embedded skin. The other is that you create your own skin by defining the images and a stylesheet (namely, CCS). But for either of above two situations, we recommend you to start with the CCS of an existing skin and then change its settings.

Now we will illustrate the work that you need to do if you want to use your own skin. Actually, you can easily add your own customized dock skin style to your project by following the three steps below.

1. Add the new CSS file to your project.
2. Drag and drop the CSS file from the Project Explorer onto your Web page.
3. Set the EnableEmbeddedSkins property of the target dock controls to False.