*Custom design problem with raddock for new dll

4 posts, 0 answers
  1. Test
    Test avatar
    25 posts
    Member since:
    Jul 2008

    Posted 22 Dec 2009 Link to this post

    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*/ 
     
     

  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 22 Dec 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Parimal Modi
    Parimal Modi avatar
    18 posts
    Member since:
    Aug 2009

    Posted 02 Feb 2012 Link to this post

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

    Thanks,
    Parimal Modi
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Feb 2012 Link to this post

    Hello,

    Here is the documentation.
    Tutorial: Creating a Custom Skin

    -Shinu.
Back to Top