Hi Jeff,
The necessary styles to solve the problem are the following (just append them to your skin files and you're good to go (remember to change the suffixes)):
/* <background positioning> */
.RadPanelBar_Vista .rpLink,
.RadPanelBar_Vista .rpExpanded
{
background-position: 0 0;
}
.RadPanelBar_Vista .rpFocused,
.RadPanelBar_Vista .rpLink:hover,
.RadPanelBar_Vista .rpExpanded:hover
{
background-position: 0 -200px;
}
.RadPanelBar_Vista .rpSelected,
.RadPanelBar_Vista .rpSelected:hover
{
background-position: 0 -400px;
}
.RadPanelBar_Vista .rpFirst .rpLink,
.RadPanelBar_Vista .rpFirst .rpExpanded
{
background-position: 0 -1px;
}
.RadPanelBar_Vista .rpFirst .rpFocused,
.RadPanelBar_Vista .rpFirst .rpLink:hover
{
background-position: 0 -201px;
}
.RadPanelBar_Vista .rpFirst .rpSelected,
.RadPanelBar_Vista .rpFirst .rpSelected:hover
{
background-position: 0 -401px;
}
/* <root items (disabled)> */
.RadPanelBar_Vista .rpDisabled:hover
{
cursor: default;
}
.RadPanelBar_Vista .rpDisabled,
.RadPanelBar_Vista .rpDisabled:hover,
.RadPanelBar_Vista .rpDisabled:hover .rpOut
{
background-position: 0 0;
}
/* </root items (disabled)> */
/* <expand arrows> */
.RadPanelBar_Vista .rpExpandable .rpText,
.RadPanelBar_Vista .rpExpanded .rpText
{
padding-right: 20px;
background-repeat: no-repeat;
}
.RadPanelBar_Vista_rtl .rpExpandable .rpText,
.RadPanelBar_Vista_rtl .rpExpanded .rpText
{
padding-left: 20px;
}
.RadPanelBar_Vista_rtl .rpGroup .rpText
{
padding: 0 10px;
}
.RadPanelBar_Vista .rpExpandable .rpText { background-position: 100% 0; }
.RadPanelBar_Vista .rpExpanded .rpText { background-position: 100% -176px; }
.RadPanelBar_Vista_rtl .rpExpandable .rpText { background-position: 0 0; }
.RadPanelBar_Vista_rtl .rpExpanded .rpText { background-position: 0 -176px; }
.RadPanelBar_Vista .rpExpandable.rpSelected .rpText,
.RadPanelBar_Vista .rpExpandable.rpSelected:hover .rpText
{
background-position: 100% -337px;
}
.RadPanelBar_Vista .rpExpanded.rpSelected .rpText,
.RadPanelBar_Vista .rpExpanded.rpSelected:hover .rpText
{
background-position: 100% -476px;
}
.RadPanelBar_Vista_rtl .rpExpandable.rpSelected .rpText,
.RadPanelBar_Vista_rtl .rpExpandable.rpSelected:hover .rpText
{
background-position: 0 -337px;
}
.RadPanelBar_Vista_rtl .rpExpanded.rpSelected .rpText,
.RadPanelBar_Vista_rtl .rpExpanded.rpSelected:hover .rpText
{
background-position: 0 -476px;
}
/* </expand arrows> */
.RadPanelBar_Vista .rpGroup .rpLink,
.RadPanelBar_Vista .rpGroup .rpLink .rpOut { background-position: 0 200px; }
.RadPanelBar_Vista .rpGroup .rpLink:hover,
.RadPanelBar_Vista .rpGroup .rpFocused { background-position: 100% -22px; }
.RadPanelBar_Vista .rpGroup .rpLink:hover .rpOut,
.RadPanelBar_Vista .rpGroup .rpFocused .rpOut { background-position: 0 0; }
/* <subitems (selected)> */
.RadPanelBar_Vista .rpGroup .rpSelected,
.RadPanelBar_Vista .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
.RadPanelBar_Vista .rpGroup .rpSelected .rpOut,
.RadPanelBar_Vista .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }
/* </subitems (selected)> */
/* <subitems (expand arrows)> */
.RadPanelBar_Vista .rpGroup .rpExpandable .rpText,
.RadPanelBar_Vista .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }
.RadPanelBar_Vista .rpGroup .rpExpanded .rpText,
.RadPanelBar_Vista .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }
.RadPanelBar_Vista_rtl .rpGroup .rpExpandable .rpText,
.RadPanelBar_Vista_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 0 -938px; }
.RadPanelBar_Vista_rtl .rpGroup .rpExpanded .rpText,
.RadPanelBar_Vista_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 0 -1078px; }
/* </subitems (expand arrows)> */
/* </background positioning> */
Indeed, we changed the PanelBar skins between the two releases - we (or more specifically,
I) made the mistake of writing the background-position into the
base stylesheet - with the intent to make the skin files as small as possible. This, however, led to tremendous complications with custom skins - it actually forced you to use specific sprites or write a pile of overrides. We strive to keep such changes to a minimum, and I learned a valuable lesson. Please excuse me for the caused trouble.
That said, we will always be here to help you with the migration, if such issues occur.
Greetings,
Alex
the Telerik team