Rank 1
Thanks
2 Answers, 1 is accepted
Rank 1
http://www.telerik.com/help/aspnet-ajax/dock_appearancetutorialcustomskin.html
If you want to learn more about custom skinning, there is a really good video (the 6th one from the top) on Telerik Trainer called "RadControls for ASP.NET AJAX — Skinning Tutorial" at http://www.telerik.com/support/trainer/aspnet-ajax.asp
Hello,
I will try to explain comprehensively how to create rounded corners for RadDock, because I know that it is hard to achieve with the current rendering of the control.
1. Set EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false" in the server declaration of RadDock;
2. Copy an existing skin from [RadControls]/Skins/SkinName/Dock.SkinName.css and the images inside the [RadControls]/Skins/SkinName/Dock/ folder in your project, preferrably in a Skins folder
3. Copy [RadControls]/Skins/Dock.css in your project. This is the base stylesheet of the control, and it contains the settings which are common for all skins
4. Think of a name for your skin, for example Acme, then replace all occurencies of RadDock_SkinName in the Dock.SkinName.css file to RadDock_Acme.
5. Rename Dock.SkinName.css file to Dock.Acme.css, and set Skin="Acme" in the server declaration of RadDock
6. Register Dock.css and Dock.Acme.css in the <head /> section of your page using the <link /> tag. It is important that the skin file comes after the base stylesheet, i.e. later in the DOM
7. Reload the page and make sure the skin is applied
8. As the normal RadDock does not have enough elements that can be used for rounded corners, you should set Resizable="true" to the control, which will render additional elements that you will use for the rounded corners.
9. By using FireBug or IE Dev Toolbar, locate the following elements, that are part of a wrapping table generated when radDock is set to resizable, that you should use to achieve rounded corners. The class names below are the cells of that table, and they are self-explanatory:
.rdWrapTable - the table itself
.rdTopLeft - the top left corner that you will use for the top left rounded corner
.rdTopCenter - - / -
.rdTopRight - - / -
.rdLeftMiddle - - / -
.rdRightMiddle - - / -
.rdBottomLeft - - / -
.rdBottomCenter - - / -
.rdBottomRight - - / -
The above table cells are enough to create a rounded corner design. However, depending on the border radius you need to achieve, you should also set new height and width to these, as their defaults are 3 pixels.
Good luck,
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.