Rounded Corners

3 posts, 0 answers
  1. Telerikuser
    Telerikuser avatar
    35 posts
    Member since:
    May 2009

    Posted 13 Jul 2009 Link to this post

    I need rounded corners for my dock. I am using skins web20 and hay skin. Any help is appreciated.

    Thanks
  2. Mr. Plinko
    Mr. Plinko avatar
    56 posts
    Member since:
    Jul 2009

    Posted 21 Jul 2009 Link to this post

    There might be a better way, but if it is something you need, there is always skin customization. This is a link to the Tutorial for Creating a Custom skin:
    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
  3. Martin
    Admin
    Martin avatar
    585 posts

    Posted 22 Jul 2009 Link to this post

    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,

    Martin Ivanov
    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.
Back to Top