RadTabStrip and RadMultiPage. I am creating the tab pages dynamically. Please find below the css file which I have used to style the tab pages.
I have also attached an image of my VS solution explorer which shows the list of Tab Strip skins I have. I am totally confused and unable to design the tab strip & pages as per the requirement. It would be great if any one can help me on this.
.CSS File
.RadTabStrip_Green .rtsLI,
.RadTabStrip_Green .rtsLink
{
color: black;
font: 12px/26px "Segoe UI", Arial, sans-serif;
}
.RadTabStrip_Green .rtsLI.rtsLast { color:blue; }
.RadTabStripLeft_Green .rtsSeparator,
.RadTabStripRight_Green .rtsSeparator
{
background: #F7DBEF;
}
/* <disabled tabs> */
.RadTabStrip_Green .rtsDisabled
.RadTabStripLeft_Green .rtsDisabled,
.RadTabStripRight_Green .rtsDisabled,
.RadTabStripBottom_Green .rtsDisabled,
.RadTabStrip_Green_disabled .rtsDisabled
{
color: #bcb;
cursor: default;
}
/* </disabled tabs> */
/* <scrolling arrows> */
.RadTabStrip_Green .rtsNextArrow,
.RadTabStrip_Green .rtsPrevArrow,
.RadTabStrip_Green .rtsPrevArrowDisabled,
.RadTabStrip_Green .rtsNextArrowDisabled
{
background-image: url('TabStrip/TabStripStates.png');
}
/* </scrolling arrows> */
/* <tab backgrounds> */
.RadTabStripTop_Green .rtsLevel
{
background-color: #D6D3D6;
border-bottom-color:#F7DBEF;
border-bottom-style:solid;
border-bottom-width:1px;
}
.RadTabStripTop_Green .rtsLevel .rtsLink,
.RadTabStripTop_Green .rtsLevel .rtsOut,
.RadTabStripBottom_Green .rtsLevel .rtsLink,
.RadTabStripBottom_Green .rtsLevel .rtsOut,
.RadTabStripTop_Green_Baseline .rtsLevel,
.RadTabStripBottom_Green_Baseline .rtsLevel { background-image: url('TabStrip/TabStripStates.png'); }
.RadTabStripLeft_Green .rtsLink,
.RadTabStripRight_Green .rtsLink { background-image: url('TabStrip/TabStripStates.png'); }
.RadTabStripLeft_Green .rtsLast .rtsLink,
.RadTabStripRight_Green .rtsLast .rtsLink
{
border-bottom: 1px solid red;
}
/* </tab backgrounds> */
/* <background positioning: overlapping tabs> */
/* <orientation: top> */
.RadTabStripTop_Green .rtsLink
{
background: #D6D3D6;
/*background-position: 0 -52px;*/
}
/*.RadTabStripTop_Green .rtsFirst .rtsLink { background-position: 0 0; }*/
.RadTabStripTop_Green .rtsOut { background-position: 100% -52px; }
/*.RadTabStripTop_Green .rtsLast .rtsOut { background-position: 100% 0; }*/
.RadTabStripTop_Green .rtsLI .rtsSelected { background-position: 0 -26px;}
.RadTabStripTop_Green .rtsSelected { background: #F7DBEF url('TabStrip/TabStripStates.png') no-repeat 0 -272px; }
.RadTabStripTop_Green .rtsSelected .rtsOut { background: #F7DBEF url('TabStrip/TabStripVStates_rtl.jpg') no-repeat 100% -72px; }
.RadTabStripTop_Green .rtsFirst .rtsSelected { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 0 -180px; }
.RadTabStripTop_Green .rtsLI .rtsAfter { background-position: 0 -78px; }
.RadTabStripTop_Green .rtsLast .rtsSelected { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 100% -180px; }
.RadTabStripTop_Green .rtsLast .rtsSelected .rtsOut { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 0 -72px; }
.RadTabStripTop_Green_Baseline .rtsLevel { background-position: 0 100%; background-repeat: repeat-x; }
/* </orientation: top> */
/* <orientation: bottom> */
.RadTabStripBottom_Green .rtsLevel .rtsLink { background-position: 0 -130px;}
.RadTabStripBottom_Green .rtsLevel .rtsFirst .rtsLink { background-position: 0 -182px;}
.RadTabStripBottom_Green .rtsLevel .rtsOut { background-position: 100% -130px;}
.RadTabStripBottom_Green .rtsLevel .rtsLast .rtsOut { background-position: 100% -182px;}
.RadTabStripBottom_Green .rtsLevel .rtsLI .rtsSelected { background-position: 0 -156px;}
.RadTabStripBottom_Green .rtsLevel .rtsSelected .rtsOut { background-position: 100% -104px; }
.RadTabStripBottom_Green .rtsLevel .rtsLI .rtsAfter { background-position: 0 -104px;}
.RadTabStripBottom_Green .rtsLevel .rtsLast .rtsSelected .rtsOut { background-position: 100% -156px;}
.RadTabStripBottom_Green_Baseline .rtsLevel { background-position: 0 -599px; background-repeat: repeat-x;}
/* </orientation: bottom> */
/* <orientation: right> */
.RadTabStripRight_Green .rtsUL .rtsLink,
.RadTabStripRight_Green .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left;}
.RadTabStripRight_Green .rtsUL .rtsLink:hover { background-position: 100% -200px;}
.RadTabStripRight_Green .rtsUL .rtsSelected,
.RadTabStripRight_Green .rtsUL .rtsSelected:hover { background-position: 100% -400px;}
/* </orientation: right> */
/* <orientation: top (RTL)> */
.RadTabStripTop_Green_rtl .rtsLevel .rtsLink
{
padding-left: 0;
padding-right: 9px;
}
.RadTabStripTop_Green_rtl .rtsLevel .rtsOut
{
padding-left: 9px;
padding-right: 0;
}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLink,
.RadTabStripTop_Green_rtl .rtsLevel .rtsOut
{
background-image: url('TabStrip/TabStripStates.png');
}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLink { background-position: 100% -52px;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsFirst .rtsLink { background-position: 100% 0;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsOut { background-position: 0 -52px;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLast .rtsOut { background-position: 0 0;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLI .rtsSelected { background-position: 100% -26px;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsSelected .rtsOut { background-position: 0 -78px;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLI .rtsAfter { background-position: 100% -78px;}
.RadTabStripTop_Green_rtl .rtsLevel .rtsLast .rtsSelected .rtsOut { background-position: 0 -26px; }
/* </orientation: top (RTL)> */
/* </background positioning: overlapping tabs> */
/* <simplistic sub-item styles> */
.RadTabStrip_Green_SimpleSubItems .rtsLevel2,
.RadTabStrip_Green_SimpleSubItems .rtsLevel3,
.RadTabStrip_Green_SimpleSubItems .rtsLevel4 { background: #fff; }
.RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsSelected,
.RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsSelected,
.RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsSelected
{
text-decoration: underline;
}
.RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsLink,
.RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsOut,
.RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsIn,
.RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsLink,
.RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsOut,
.RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsIn,
.RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsLink,
.RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsOut,
.RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsIn
{
background: #F7DBEF;
}
.RadTabStrip_Green .rtsIn
{
font: 12px/20px arial,sans-serif;
padding: 0 5px 5px;
font-weight:bold;
/*background:#F7DBEF;*/
}
/* </simplistic sub-item styles> */
Thanks & Best Regards,
Bharath