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

RadTabStrip - unable to change the theme & back ground colour

1 Answer 208 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Rabeek Ahamed
Top achievements
Rank 1
Rabeek Ahamed asked on 02 Dec 2010, 06:37 AM
Hello Everybody. This is my first post in this site. I hope that I get a response as I am under tremendous pressure to finish this task. I am using Telerik Web.UI_2010_3_1109 along with ASP.net & VS 2008. I have attached two files. The page which I am designing has to look like in image homepage_payroll.jpg and it currently looks like the one in image  paroll_current.jpg. I am using

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

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 07 Dec 2010, 03:46 PM
Hi Gopinath,

Unfortunately I will need the images that you use in order to help you fix the skin. Can you open a support ticket and send me a live URL of your page, or just send me the skin along with the images it uses and a sample page/markup.

Kind regards,
Kamen Bundev
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
TabStrip
Asked by
Rabeek Ahamed
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or