[Solved] *Custom design problem with raddock for new dll

[Test]

Hi.

I had created a custom telerik design. I had used telerik dll version 2008.0311.25.20. the custom design is like this

Now i have update the dll version to 2009.3.1208.20. Then my radock design becomes like this :(

Can anyone help me to know how to solve this issue.

Below is my css file content:

/* Docking Zone properties */

.RadDockZone_Custom
{
    border: 1px solid #d3d3d3;
    padding: 5px 0 0 5px;
}

* > .RadDockZone_Custom.rdVertical /* hidden from IE6 */
{
    padding-right: 5px;
}

/* Dock_o Object properties */

/* wrappers and borders */

.RadDock_Custom .rdPlaceHolder
{
    border-color: #666;
}


.BottomRightCorner
{

    background: url(DockNewImage/bl_right_line.gif) repeat-y ;

}

.RadDock_Custom
{
    margin: 0px 5px 5px 0;
    background: url(DockNewImage/FooterLeft.gif) no-repeat 1px 100% #FFF;
    color: #000;
    font-family: 'ms sans serif' ,sans-serif;
    text-align: left;
}

.RadDock_Custom .rdSideBorders
{
    background: url(DockNewImage/bl_left_line.gif) repeat-y;
    -moz-padding-start: 1px;
}




.RadDock_Custom .rdTopBorder
{
    border-style: none none none;
}
.RadDock_Custom .rdBottomBorder
{
    border-style: none;
    height: 12px;
    background: url(DockNewImage/FooterRight.gif) no-repeat 100% 0;
}

/* titlebar and buttons */

.RadDock_Custom .rdTitlebar
{
    top: 0px; /*brd*/
    color: #fff;
}



.RadDock_Custom .rdHTitlebar .rdTitlebar
{
    height: 40px;
    background: url(DockNewImage/bl_top_left.gif) no-repeat white;
    padding-left: 10px;
    margin-left: -1px;
}
.RadDock_Custom.rdCollapsed .rdHTitlebar .rdTitlebar
{
    padding-bottom: 0px; /*brd - title brd*/
}
.RadDock_Custom .rdVTitlebar .rdTitlebar
{
    left: 1px;
    width: 20px;
    background: url(Dock_o/TitlebarV.gif) repeat-x;
}

.RadDock_Custom .rdTitlebar .rdTitle
{
    padding-top:10px;
    font-family:Arial, Helvetica, sans-serif;
    top: 0px; /*brd*/

     color:#FFFFFF; font-size:14px; font-weight:bold;

    overflow: hidden;
}

.RadDock_Custom .rdHTitlebar .rdTitle
{
    height: 40px;
    padding-left: 7px;
    margin-right: 2px;
    background: url(DockNewImage/bl_top_title.gif) repeat-x;
}
.RadDock_Custom .rdVTitlebar .rdTitle
{
    padding: 10px 0 0 8px;
    background: url(Dock_o/TitlebarVTop.gif) no-repeat;
    line-height: 1.4em;
}

.RadDock_Custom .rdHTitlebar .rdCommands
{
    height: 100%;
    _height: 25px;
    background: url(DockNewImage/bl_top_right.gif) 100% 0 no-repeat;
    rightright: -1px;
}

.RadDock_Custom .rdHTitlebar .rdCommands a
{
    margin: 0;
}
.RadDock_Custom .rdVTitlebar .rdCommands a
{
    margin: 0;
}

.RadDock_Custom .rdHTitlebar .rdCommands a, .RadDock_Custom .rdVTitlebar .rdCommands a
{
    margin: 0 0 0 0;
}

.RadDock_Custom .rdTitlebar .rdCommands a
{
    background-image: url('DockNewImage/DockCommandSprites.png');
}

/* inner content */

.RadDock_Custom .rdContent
{
    top: 0px; /*brd*/
    padding-bottom: 0px; /*brd*/
    font: 11px/1.2 verdana,sans-serif;
    background: url(DockNewImage/bl_mid.gif) repeat-x;
    margin-left: 5px;
    overflow:auto
}

.RadDock_Custom .rdVTitlebar .rdContent
{
    margin-left: 29px;
}


/* drag grips */

.RadDock_Custom .rdGripTop, .RadDock_Custom .rdGripLeft
{
    background: #FFF;
}

.RadDock_Custom .rdGripTop
{
    top: 0px; /*brd*/
    height: 3px;
}
.RadDock_Custom .rdGripLeft
{
    left: 2px; /*brd*/
    width: 3px;
}

.RadDock_Custom .rdWGripLeft .rdContent
{
    margin-left: 3px;
}




/*BASE STYLE*/
/* RadDock for ASP.NET AJAX Base Stylesheet */

.RadDockZone
{
    position: relative;
    border-style: solid;
    border-width: 1px;
}

* > .RadDockZone.rdVertical /* hidden from IE6 */
{
    padding-right: 4px;
}

.RadDock
{
    margin: 0px;
    text-align: left; /* we need this in case the BODY has text-aligh:center applied */
}

.rdRtl
{
    text-align: rightright; /* we need this in case the BODY has text-aligh:center applied */
}

.rdPlaceHolder
{
    border-style: dashed;
    border-width: 1px;
}

.rdHorizontal .RadDock, .rdVertical .RadDock
{
    position: relative;
}

.rdHorizontal .RadDock
{
    float: left;
}

.rdHorizontal .rdRtl
{
    float: rightright;
}

.RadDock, .rdTopBorder, .rdBottomBorder
{
    position: absolute;
    overflow: hidden;
}

.rdTopBorder, .rdSideBorders, .rdBottomBorder
{
    border-width: 1px;
    border-color: White;
}

.rdSideBorders
{
    border-style: none solid none;
}

.rdTopBorder
{
    border-style: solid none none;
}

.rdBottomBorder
{
    border-style: none none solid;
}

.rdVariableHeight .rdBottomBorder, .rdCollapsed .rdBottomBorder
{
    position: static;
}

.rdSideBorders
{
    height: 100%;
    overflow: hidden;
    z-index: 10;
}
.rdVariableHeight .rdSideBorders
{
    height: auto;
}

.rdTopBorder, .rdBottomBorder
{
    width: 100%;
}
.rdTopBorder
{
    top: 0;
    left: 0;
}
.rdBottomBorder
{
    bottombottom: 0;
    left: 0;
}

.rdContent, .rdGripTop
{
    position: relative;
}

/* titlebar */
.rdTitlebar
{

    display: none;
    position: relative;
    top: 1px; /*brd*/ /*border-style: solid;*/ /*Changes by mayur*/
}

.rdHTitlebar .rdTitlebar
{
    height: 25px;
    border-width: 0 0 1px;
}

.RadDock.rdCollapsed .rdHTitlebar .rdTitlebar
{
    padding-bottom: 0px; /*brd - title brd*/
}

.RadDock .rdVTitlebar .rdTitlebar
{
    left: 1px;
    width: 22px;
    border-width: 0 1px 0 0;
}

.RadDock .rdTitle
{

    font: normal 12px "Segoe UI" , Arial, Sans-serif;
    line-height: 24px;
}

.rdHTitlebar .rdTitlebar, .rdVTitlebar .rdTitlebar
{
    display: block;
}

.rdVTitlebar .rdTitlebar
{
    position: absolute;
    overflow: hidden;
}

.rdTitlebar .rdTitle
{
    width:100%;
    display: block;
    overflow: hidden;
    whitewhite-space: nowrap;
    font-style: normal;
}

.rdTitlebar .rdCommands
{
    position: absolute;
    display: block;
    z-index: 2;
    rightright: 0;
}

.rdRtl .rdTitlebar .rdCommands
{
    rightright: auto;
    left: 0;
}

.rdHTitlebar .rdTitlebar .rdCommands
{
    top: 0;
}
.rdVTitlebar .rdTitlebar .rdCommands
{
    bottombottom: 0;
}

.rdTitlebar .rdCommands a
{
    display: block;
    overflow: hidden;
    text-indent: -3333px;
    cursor: default;
}
.rdHTitlebar .rdTitlebar .rdCommands a
{
    float: rightright;
    height: 40px !important;
    margin: 0 !important;
}

.rdRtl .rdHTitlebar .rdTitlebar .rdCommands a
{
    float: left;
}

* html .rdTitlebar .rdCommands a
{
    display: inline-block;
}
/* inner container */

.rdContent
{
    overflow: auto;
}
/*IE6 overflow fix*/
* html .rdContent
{
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
* html .rdWGripLeft .rdContent, * html .rdWGripRight .rdContent, * html .rdVTitlebar .rdContent
{
    width: auto;
}

.rdCollapsed .rdContent
{
    display: none;
}

/* grips */
.rdGripTop, .rdGripLeft
{
    display: none;
    font-size: 1px;
    line-height: 1px;
}

.rdWGripTop .rdGripTop, .rdWGripLeft .rdGripLeft
{
    display: block;
}

.rdGripTop
{
    width: 100%;
    overflow: hidden;
}

.rdGripLeft
{
    position: absolute;
    height: 100%;
}

/* dragging */
.rdDraggable
{
    cursor: move;
}

/* float clearing */
.clear
{
    clear: both;
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
}

/* temporary wrapping table classes */
.rdWrapTable .rdTopLeft, .rdWrapTable .rdTopCenter, .rdWrapTable .rdTopRight, .rdWrapTable .rdLeftMiddle, .rdWrapTable .rdRightMiddle, .rdWrapTable .rdBottomLeft, .rdWrapTable .rdBottomCenter, .rdWrapTable .rdBottomRight
{
    padding: 0;
    margin: 0;
    font-size: 1px;
    line-height: 1px;
}

.rdCenter, .rdLeftMiddle, .rdRightMiddle
{
    vertical-align: top;
    height: 100%;
}

.rdWrapTable .rdTopBorder, .rdWrapTable .rdCenter, .rdWrapTable .rdContent
{
    border: 0 !important;
    top: 0px !important;
}

.rdWrapTable .rdTitlebar
{
    top: 0 !important;
}

.rdWrapTable .rdTitlebar
{
    margin: 0 !important;
}
/* temporary wrapping table classes */

.rdWrapTable .rdGripTop
{
    top: 0px !important;
}

.RadDockZone
{
    padding: 4px;
}

.rdHTitlebar .rdTitle
{
    padding-left: 10px;
}

.rdVTitlebar .rdTitle
{
    padding: 13px 0 0 8px;
    line-height: 1.4em;
    border: 1px solid;
}

.RadDock_Vista .rdVTitlebar .rdTitle
{
    background-repeat: repeat-y;
}

.rdTitlebar .rdCommands a
{
    width: 25px;
    height: 19px;
    background-repeat: no-repeat;
    margin: 3px 0 0 0 !important;
}

.rdCollapse
{
    background-position: 0 10px;
}

.rdExpand
{
    background-position: 0 -14px;
}

.rdClose
{
    background-position: 0 -100px;
}

.rdPin
{
    background-position: 0 -57px;
}

.rdUnpin
{
    background-position: 0 -38px;
}

.rdCustom
{
    background-position: 0 -95px;
}
.rdContent
{
    top: 1px; /* brd */
    padding-bottom: 1px; /* brd */
    font: normal 11px "Segoe UI" , Arial, Sans-serif;
    cursor: default;
}

.rdVTitlebar .rdContent
{
    margin-left: 24px;
}

.rdGripTop
{
    top: 1px; /* brd */
    height: 3px;
}

.rdGripLeft
{
    left: 1px; /*brd*/
    width: 3px;
}

.rdWGripLeft .rdContent
{
    margin-left: 3px;
}

.rdTopLeft, .rdTopRight, .rdBottomLeft, .rdBottomRight, .rdLeftMiddle, .rdRightMiddle
{
    height: 3px;
    width: 3px;
    line-height: 3px;
}

.rdTopCenter, .rdBottomCenter
{
    height: 3px;
    line-height: 3px;
}

.rdWrapTable .rdTitlebar, .rdWrapTable .rdTitle, .rdWrapTable .rdCommands
{
    background-repeat: repeat-x;
}

.rdWrapTable .rdCommands
{
    margin-top: 1px;
}

.rdWrapTable .rdSideBorders.rdHTitlebar
{

    border: 0 !important;
}
.ucDiv
{

    padding-top:10px;
    padding-left:3px;
    padding-bottom:0px  ;padding-right:0px  ;
    overflow:hidden !important;

}/*END BASE STYLE*/

[Martin]

Hello Mayur,

In Q3.2009 we have introduced new rendering of RadDock, and this is why your custom skin is broken. I am afraid that you will need to rework the skin so it works with the new rendering and class names. You may take a look at the following help article that explains the new CSS classes and image sprites that have been used:

http://www.telerik.com/help/aspnet-ajax/dock_appearancetutorialcustomskin.html

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Parimal Modi]

Hi Telerik,
I'm facing the same problem. This link is not available now.

Thanks,
Parimal Modi

[Shinu]

Hello,

Here is the documentation.
Tutorial: Creating a Custom Skin

-Shinu.