This is a migrated thread and some comments may be shown as answers.

*Custom design problem with raddock for new dll

3 Answers 61 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Test
Top achievements
Rank 1
Test asked on 22 Dec 2009, 12:30 PM
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 
    border1px solid #d3d3d3
    padding5px 0 0 5px
 
* > .RadDockZone_Custom.rdVertical /* hidden from IE6 */ 
    padding-right5px
 
/* Dock_o Object properties */ 
 
/* wrappers and borders */ 
 
.RadDock_Custom .rdPlaceHolder 
    border-color#666
 
 
.BottomRightCorner 
     
    backgroundurl(DockNewImage/bl_right_line.gif) repeat-y ; 
     
 
.RadDock_Custom 
    margin0px 5px 5px 0; 
    backgroundurl(DockNewImage/FooterLeft.gif) no-repeat 1px 100% #FFF
    color#000
    font-family'ms sans serif' ,sans-serif
    text-alignleft
 
.RadDock_Custom .rdSideBorders 
    backgroundurl(DockNewImage/bl_left_line.gif) repeat-y;     
    -moz-padding-start: 1px;     
 
 
 
 
.RadDock_Custom .rdTopBorder 
    border-stylenone none none
.RadDock_Custom .rdBottomBorder 
    border-stylenone
    height12px
    backgroundurl(DockNewImage/FooterRight.gif) no-repeat 100% 0; 
 
/* titlebar and buttons */ 
 
.RadDock_Custom .rdTitlebar 
    top0px/*brd*/ 
    color#fff
 
 
 
.RadDock_Custom .rdHTitlebar .rdTitlebar 
    height40px
    backgroundurl(DockNewImage/bl_top_left.gif) no-repeat white
    padding-left10px
    margin-left: -1px
.RadDock_Custom.rdCollapsed .rdHTitlebar .rdTitlebar 
    padding-bottom0px/*brd - title brd*/ 
.RadDock_Custom .rdVTitlebar .rdTitlebar 
    left1px
    width20px
    backgroundurl(Dock_o/TitlebarV.gif) repeat-x; 
 
.RadDock_Custom .rdTitlebar .rdTitle 
    padding-top:10px
    font-family:ArialHelveticasans-serif
    top0px/*brd*/ 
     
     color:#FFFFFFfont-size:14pxfont-weight:bold
     
    overflowhidden
 
.RadDock_Custom .rdHTitlebar .rdTitle 
    height40px
    padding-left7px
    margin-right2px
    backgroundurl(DockNewImage/bl_top_title.gif) repeat-x; 
.RadDock_Custom .rdVTitlebar .rdTitle 
    padding10px 0 0 8px
    backgroundurl(Dock_o/TitlebarVTop.gif) no-repeat
    line-height: 1.4em; 
 
.RadDock_Custom .rdHTitlebar .rdCommands 
    height: 100%; 
    _height: 25px
    backgroundurl(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-imageurl('DockNewImage/DockCommandSprites.png'); 
 
/* inner content */ 
 
.RadDock_Custom .rdContent 
    top0px/*brd*/ 
    padding-bottom0px/*brd*/ 
    font11px/1.2 verdana,sans-serif
    backgroundurl(DockNewImage/bl_mid.gif) repeat-x; 
    margin-left5px
    overflow:auto 
 
.RadDock_Custom .rdVTitlebar .rdContent 
    margin-left29px
 
 
/* drag grips */ 
 
.RadDock_Custom .rdGripTop, .RadDock_Custom .rdGripLeft 
    background#FFF
 
.RadDock_Custom .rdGripTop 
    top0px/*brd*/ 
    height3px
.RadDock_Custom .rdGripLeft 
    left2px/*brd*/ 
    width3px
 
.RadDock_Custom .rdWGripLeft .rdContent 
    margin-left3px
 
 
 
 
/*BASE STYLE*/ 
/* RadDock for ASP.NET AJAX Base Stylesheet */ 
 
.RadDockZone 
    positionrelative
    border-stylesolid
    border-width1px
 
* > .RadDockZone.rdVertical /* hidden from IE6 */ 
    padding-right4px
 
.RadDock 
    margin0px
    text-alignleft/* we need this in case the BODY has text-aligh:center applied */ 
 
.rdRtl 
    text-alignrightright/* we need this in case the BODY has text-aligh:center applied */ 
 
.rdPlaceHolder 
    border-styledashed
    border-width1px
 
.rdHorizontal .RadDock, .rdVertical .RadDock 
    positionrelative
 
.rdHorizontal .RadDock 
    floatleft
 
.rdHorizontal .rdRtl 
    floatrightright
 
.RadDock, .rdTopBorder, .rdBottomBorder 
    positionabsolute
    overflowhidden
 
.rdTopBorder, .rdSideBorders, .rdBottomBorder 
    border-width1px
    border-color: White; 
 
.rdSideBorders 
    border-stylenone solid none
 
.rdTopBorder 
    border-stylesolid none none
 
.rdBottomBorder 
    border-stylenone none solid
 
.rdVariableHeight .rdBottomBorder, .rdCollapsed .rdBottomBorder 
    positionstatic
 
.rdSideBorders 
{    
    height: 100%; 
    overflowhidden
    z-index: 10; 
.rdVariableHeight .rdSideBorders 
    heightauto
 
.rdTopBorder, .rdBottomBorder 
    width: 100%; 
.rdTopBorder 
    top: 0; 
    left: 0; 
.rdBottomBorder 
    bottombottom: 0; 
    left: 0; 
 
.rdContent, .rdGripTop 
    positionrelative
 
/* titlebar */ 
.rdTitlebar 
     
    displaynone
    positionrelative
    top1px/*brd*/ /*border-style: solid;*/ /*Changes by mayur*/ 
 
.rdHTitlebar .rdTitlebar 
    height25px
    border-width: 0 0 1px
 
.RadDock.rdCollapsed .rdHTitlebar .rdTitlebar 
    padding-bottom0px/*brd - title brd*/ 
 
.RadDock .rdVTitlebar .rdTitlebar 
    left1px
    width22px
    border-width: 0 1px 0 0; 
 
.RadDock .rdTitle 
     
    fontnormal 12px "Segoe UI" , ArialSans-serif
    line-height24px
 
.rdHTitlebar .rdTitlebar, .rdVTitlebar .rdTitlebar 
    displayblock
 
.rdVTitlebar .rdTitlebar 
    positionabsolute
    overflowhidden
 
.rdTitlebar .rdTitle 
    width:100%; 
    displayblock
    overflowhidden
    whitewhite-spacenowrap
    font-stylenormal
 
.rdTitlebar .rdCommands 
    positionabsolute
    displayblock
    z-index: 2; 
    rightright: 0; 
 
.rdRtl .rdTitlebar .rdCommands 
    rightrightauto
    left: 0; 
 
.rdHTitlebar .rdTitlebar .rdCommands 
    top: 0; 
.rdVTitlebar .rdTitlebar .rdCommands 
    bottombottom: 0; 
 
.rdTitlebar .rdCommands a 
    displayblock
    overflowhidden
    text-indent: -3333px
    cursordefault
.rdHTitlebar .rdTitlebar .rdCommands a 
    floatrightright
    height40px !important; 
    margin: 0 !important; 
 
.rdRtl .rdHTitlebar .rdTitlebar .rdCommands a 
    floatleft
 
* html .rdTitlebar .rdCommands a 
    displayinline-block
/* inner container */ 
 
.rdContent 
    overflowauto
/*IE6 overflow fix*/ 
* html .rdContent 
    width: 100%; 
    overflow-x: auto
    overflow-y: auto
* html .rdWGripLeft .rdContent, * html .rdWGripRight .rdContent, * html .rdVTitlebar .rdContent 
    widthauto
 
.rdCollapsed .rdContent 
    displaynone
 
/* grips */ 
.rdGripTop, .rdGripLeft 
    displaynone
    font-size1px
    line-height1px
 
.rdWGripTop .rdGripTop, .rdWGripLeft .rdGripLeft 
    displayblock
 
.rdGripTop 
    width: 100%; 
    overflowhidden
 
.rdGripLeft 
    positionabsolute
    height: 100%; 
 
/* dragging */ 
.rdDraggable 
    cursormove
 
/* float clearing */ 
.clear 
    clearboth
    height1px
    margin-bottom: -1px
    visibilityhidden
 
/* 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-size1px
    line-height1px
 
.rdCenter, .rdLeftMiddle, .rdRightMiddle 
    vertical-aligntop
    height: 100%; 
 
.rdWrapTable .rdTopBorder, .rdWrapTable .rdCenter, .rdWrapTable .rdContent 
    border: 0 !important; 
    top0px !important; 
 
.rdWrapTable .rdTitlebar 
    top: 0 !important; 
 
.rdWrapTable .rdTitlebar 
    margin: 0 !important; 
/* temporary wrapping table classes */ 
 
.rdWrapTable .rdGripTop 
    top0px !important; 
 
.RadDockZone 
    padding4px
 
.rdHTitlebar .rdTitle 
    padding-left10px
 
.rdVTitlebar .rdTitle 
    padding13px 0 0 8px
    line-height: 1.4em; 
    border1px solid
 
.RadDock_Vista .rdVTitlebar .rdTitle 
    background-repeatrepeat-y; 
 
.rdTitlebar .rdCommands a 
    width25px
    height19px
    background-repeatno-repeat
    margin3px 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 
    top1px/* brd */ 
    padding-bottom1px/* brd */ 
    fontnormal 11px "Segoe UI" , ArialSans-serif
    cursordefault
 
.rdVTitlebar .rdContent 
    margin-left24px
 
.rdGripTop 
    top1px/* brd */ 
    height3px
 
.rdGripLeft 
    left1px/*brd*/ 
    width3px
 
.rdWGripLeft .rdContent 
    margin-left3px
 
.rdTopLeft, .rdTopRight, .rdBottomLeft, .rdBottomRight, .rdLeftMiddle, .rdRightMiddle 
    height3px
    width3px
    line-height3px
 
.rdTopCenter, .rdBottomCenter 
    height3px
    line-height3px
 
.rdWrapTable .rdTitlebar, .rdWrapTable .rdTitle, .rdWrapTable .rdCommands 
    background-repeatrepeat-x; 
 
.rdWrapTable .rdCommands 
    margin-top1px
 
.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*/ 
 
 

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 22 Dec 2009, 12:55 PM
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.
0
Parimal Modi
Top achievements
Rank 1
answered on 02 Feb 2012, 03:09 PM
Hi Telerik,
I'm facing the same problem. This link is not available now.

Thanks,
Parimal Modi
0
Shinu
Top achievements
Rank 2
answered on 02 Feb 2012, 03:15 PM
Hello,

Here is the documentation.
Tutorial: Creating a Custom Skin

-Shinu.
Tags
Dock
Asked by
Test
Top achievements
Rank 1
Answers by
Martin
Telerik team
Parimal Modi
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or