Converting Css

[Jonathan]

To convert my old skin to the new model I am a little confused by the migrating skins section of the helpfile for the ajax radtabstrip where ".selected" converts to "rtsSelected"

My new migrated skin that does not work (the tabs just show as unformated links in startard html blue) was based on one that worked really well in the classic version - would it be possible to look at the following and see where I am interpreting the migration instructions wrong:

.RadTabStrip_CiviCorps

{

font: 8pt tahoma, sans-serif;

text-align:center;

background-repeat: repeat-x;

border-bottom: solid 4px #6d9675;

height: 25px;

margin-top: -3px;

}

.RadTabStrip_CiviCorps

rtsUL

{

/**/

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink

{

margin-right: 5px;

margin-top: -1px;

padding-left: 0px;

background-color: #ccd0bf;

color: black;

text-decoration: none;

line-height: 25px;

border-right: solid 1px white;

border-top: solid 1px white;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink:hover

{

background-color: #aacf16;

color: white;

text-decoration: underline;

line-height: 25px;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink .rtsOut

{

padding-right: 0px;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink .rtsIn

{

padding:0 5px;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected

{

line-height: 25px;

color: white;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected .rtsOut

{

background-color: #6d9675;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected .rtsIn

{

background-color: #6d9675;

}

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected:hover,

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected:hover .rtsOut,

.RadTabStrip_CiviCorps

.rtsLevel1 rtsLI rtsLink.rtsSelected:hover .rtsIn

{

background-color: #6d9675;

}

Please confirm that the following section:

.

RadTabStrip_CiviCorps .level2 li a.selected,

.RadTabStrip_CiviCorps .level2 li a.selected:hover,

.RadTabStrip_CiviCorps .level2 li a:hover

{

color: black;

}

converts to:

.RadTabStrip_CiviCorps .rtsLevel2 rtsLI rtsLink.rtsSelected,  

.RadTabStrip_CiviCorps .rtsLevel2 rtsLI rtsLink.rtsSelected:hover,  

.RadTabStrip_CiviCorps .rtsLevel2 rtsLI rtsLink:hover  

{  

    color: black;  

}  

thanks!

[Alex Gyoshev]

Hello Jonathan,

Unfortunately, I cannot confirm that - some dots are missing, nothing else. That is, "li" should become ".rtsLI" - this concept allows to target the CSS properties exactly at the RadTabStrip (which is vital when one wants to use templates).

I adjusted the skin and attached it to this post (and I took the liberty to optimize it a bit).

All the best,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jonathan]

thanks Alex, you are very kind :-)