[Solved] Skin migration mapping document/tool

[Jason Maronge]

Does anyone know if there is a document/tool for helping in the conversion of the skins to Prometheus?  CSS is not my strong point and it looks like the new skins are a lot more complicated than the old ones.  I am trying to do the combobox right now.  It would be very nice to have a document that maps the old css classes to the new ones.  Even better would be images with arrows comparing the 2 different controls. 

Thanks....

Jason

[Jason Maronge]

I thought that i would post the skin i was trying to convert.  it is pretty simple and standard, incase someone out there was bored and really good and fast at doing this.  :)

.ComboBoxDropDown_Custom
{
    border: 1px solid black;
    background-color: white;
}

.ComboBoxImage_Custom
{
    vertical-align:middle;
    border: 1px solid #7F9DB9;
    border-left: none;
}

.ComboBoxImageHover_Custom
{
    vertical-align:middle;
    border: 1px solid #7F9DB9;
    border-left: none;
}

.ComboBoxInput_Custom
{
    border: 1px solid #7F9DB9;
    background-color: white;
    vertical-align: middle;
    font-family: Arial, Verdana;
    font-size: 11px;
    font-weight:bold ;
    color: #585880;
    padding-top: 2px;
    padding-left: 3px;
    height: 21px;
    cursor: default;
}

.ComboBoxInputHover_Custom
{
    border: 1px solid #7F9DB9;
    background-color: white;
    vertical-align: middle;
    font-family: Arial, Verdana;
    font-size: 11px;
    font-weight:bold ;
    color: #585880;
    padding-top: 2px;
    padding-left: 3px;
    height: 21px;
    cursor: default;
}

.ComboBoxItem_Custom
{
    font-family: Arial;
    font-size: 11px;
    font-weight:bold ;
    color: #585880;
    padding: 3px;
    text-decoration: none;
    text-align: left;
    _height:1%;
}

.ComboBoxItemHover_Custom
{
    font-family: Arial;
    font-weight:bold ;
    font-size: 11px;
    color: white;
    text-decoration: none;
    background-color: #777777;
    cursor: pointer;
    cursor: hand;
    padding: 3px;
    text-align: left;
    _height:1%;
}

.ComboBoxItemDisabled_Custom
{
    font-family: Arial;
    font-size: 11px;
    color: gray;
    cursor: no-drop;
    padding: 3px;
    text-decoration: none;
    text-align: left;
}

.ComboBoxLoadingMessage_Custom
{
    font-family: Arial;
    font-size: 11px;
    padding: 2px;
}

.ComboBoxMoreResultsMessage_Custom
{
    font-family: Arial;
    font-size: 10px;
    padding: 2px;
    text-align: center;
}


.ComboBoxMoreResultsImage_Custom
{
    padding: 5px;
    margin-top: 5px;
}

.ComboBoxMoreResultsBox_Custom
{
    background-color: #EEEEE5;
}


.ComboBoxHeader_Custom
{
    font-size: 12px;
    font-weight: bold;
    color: white;
    background-color: #666;
}

Jason

[Dimo]

Hello Jason,

I have to admit that currently we do not have a skin migration tutorial or tool for the controls which have changed their rendering recently, but this is a very reasonable idea and we embrace it.


As for the ComboBox, here is the CSS class map:

(Classic ComboBox   ->   Prometheus ComboBox)


.ComboBoxDropDown_Custom    ->    .RadComboBoxDropDown_Custom

.ComboBoxImage_Custom    ->    .RadComboBox_Custom .rcbArrowCell a

.ComboBoxImageHover_Custom    ->    .RadComboBox_Custom .rcbArrowCell a:hover

.ComboBoxInput_Custom    ->    .RadComboBox_Custom .rcbInputCell input

.ComboBoxItem_Custom    ->    .RadComboBoxDropDown_Custom .rcbItem

.ComboBoxItemHover_Custom    ->    .RadComboBoxDropDown_Custom .rcbHovered

.ComboBoxItemDisabled_Custom    ->    .RadComboBoxDropDown_Custom .rcbDisabled

.ComboBoxLoadingMessage_Custom    ->    .RadComboBoxDropDown_Custom .rcbLoading

.ComboBoxMoreResultsBox_Custom    ->    .RadComboBoxDropDown_Custom .rcbMoreResults

.ComboBoxMoreResultsMessage_Custom    ->    .RadComboBoxDropDown_Custom .rcbMoreResults span

.ComboBoxMoreResultsImage_Custom    ->    .RadComboBoxDropDown_Custom .rcbMoreResults a

.ComboBoxHeader_Custom    ->    .RadComboBoxDropDown_Custom .rcbHeader


Please note that the images in the old rendering have now been transfered to background images of link elements.


Greetings,
Dimo
the Telerik team

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