Hi All.
I am using telerik dock control in my application. and i want to customized the style of dock control with rounded corder.
I have done that but my problem is that i can't set left and right border with diff images/colors.
I found one property in css called ".rdSideBorders". buit it set border on bothsides.
please see attached document.
Can anyone please help me how to set right and left border with different images/colors,
here is my css file code
/* 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;
}
.RadDock_Custom
{
margin: 0 5px 5px 0;
background: url(new/FooterLeft.gif) no-repeat 0 100% #FFF;
color: #000;
font-family: 'ms sans serif' ,sans-serif;
text-align: left;
}
.RadDock_Custom .rdSideBorders
{
background: url(new/org_left_top.gif) repeat-y;
}
.RadDock_Custom .rdSideBorders
{
border-style: none solid none;
overflow: visible;
}
.RadDock_Custom .rdTopBorder
{
border-style: none none none;
}
.RadDock_Custom .rdBottomBorder
{
border-style: none;
height: 12px;
background: url(new/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(new/org_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
{
font: bold 11px/20px 'ms sans serif' ,sans-serif;
overflow: hidden;
}
.RadDock_Custom .rdHTitlebar .rdTitle
{
height: 40px;
padding-left: 7px;
margin-right: 4px;
background: url(new/org_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
{
padding-right: 10px;
height: 100%;
_height: 25px;
background: url(new/org_top_right.gif) 100% 0 no-repeat white;
right: -1px;
}
.RadDock_Custom .rdHTitlebar .rdCommands a
{
margin: 0;
background-color: #7f99cc;
}
.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('Dock_o/DockCommandSprites.gif');
}
/* inner content */
.RadDock_Custom .rdContent
{
top: 0px; /*brd*/
padding-bottom: 0px; /*brd*/
font: 11px/1.2 verdana,sans-serif; background:url(new/org_mid.gif) repeat-x;
margin-left: 5px;
}
.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: right; /* 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: right;
}
.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
{
bottom: 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
{
display: block;
overflow: hidden;
white-space: nowrap;
font-style: normal;
}
.rdTitlebar .rdCommands
{
position: absolute;
display: block;
z-index: 2;
right: 0;
}
.rdRtl .rdTitlebar .rdCommands
{
right: auto;
left: 0;
}
.rdHTitlebar .rdTitlebar .rdCommands
{
top: 0;
}
.rdVTitlebar .rdTitlebar .rdCommands
{
bottom: 0;
}
.rdTitlebar .rdCommands a
{
display: block;
overflow: hidden;
text-indent: -3333px;
cursor: default;
}
.rdHTitlebar .rdTitlebar .rdCommands a
{
float: right;
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: hidden;
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: 19px;
height: 19px;
background-repeat: no-repeat;
margin: 3px 0 0 0 !important;
}
.rdCollapse
{
background-position: 0 0;
}
.rdExpand
{
background-position: 0 -19px;
}
.rdClose
{
background-position: 0 -76px;
}
.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;
}
/*END BASE STYLE*/
Thanks in advance,
Mayur