Custom Skin

[Tina]

I created a custom skin starting with the SiteFinity skin.  Everything works as expected except for the dropdown on the splitbutton.  It has a black border instead of the rounded corners like the sitefinity skin.  Not sure what I'm missing.

/* <RadToolBar / Custom> */

/* <tool wrapper> */

/* <horizontal> */

/*.RadToolBar_Custom .rtbOuter
{
    border: 1px solid #e8e8e8;
}*/

.RadToolBar_Custom .rtbMiddle
{
    background: transparent;
}

/* </horizontal> */

/* </tool wrapper> */

/* <buttons> */

div.RadToolBar_Custom_Horizontal .rtbItem
{
    margin: 0 3px;
}

div.RadToolBar_Custom_Vertical .rtbItem
{
    margin: 3px 0;
}

div.RadToolBar_Custom_Vertical .rtbSeparator
{
    width: 30px;
}

.RadToolBar_Custom .rtbWrap,
.RadToolBar_Custom .rtbTemplate
{
    color: #333333;
    font: normal 12px/19px "Segoe UI", Arial, Helvetica, sans-serif;
}

div.RadToolBar_Custom .rtbMid
{
    padding: 0 5px 5px 0;
}

div.RadToolBar_Custom .rtbIn
{
    padding: 2px 0 0 5px;
    overflow: hidden;
}

div.RadToolBar_Custom .rtbIcon
{
    padding: 0 2px;
}

div.RadToolBar_Custom .rtbChoiceArrow
{
    height: 16px;
}

div.RadToolBar_Custom .rtbVOriented .rtbChoiceArrow
{
    margin-top: -7px;
}


/* <button states> */

.RadToolBar_Custom .rtbItem .rtbWrap,
.RadToolBar_Custom .rtbItem .rtbOut,
.RadToolBar_Custom .rtbItem .rtbMid,
.RadToolBar_Custom .rtbItem .rtbIn
{
    background-image: url('ToolBar/rtbNormalBg.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .RadToolBar_Custom .rtbItem .rtbWrap,
* html .RadToolBar_Custom .rtbItem .rtbOut,
* html .RadToolBar_Custom .rtbItem .rtbMid,
* html .RadToolBar_Custom .rtbItem .rtbIn
{
    background-image: url('ToolBar/rtbNormalBgIE6.png');
}

.RadToolBar_Custom .rtbSplBtnFocused .rtbWrap, .RadToolBar_Custom .rtbSplBtnFocused .rtbOut, .RadToolBar_Custom .rtbSplBtnFocused .rtbMid, .RadToolBar_Custom .rtbSplBtnFocused .rtbIn,
.RadToolBar_Custom .rtbItemFocused .rtbWrap, .RadToolBar_Custom .rtbItemFocused .rtbOut, .RadToolBar_Custom .rtbItemFocused .rtbMid, .RadToolBar_Custom .rtbItemFocused .rtbIn,
.RadToolBar_Custom .rtbItemHovered .rtbWrap, .RadToolBar_Custom .rtbItemHovered .rtbOut, .RadToolBar_Custom .rtbItemHovered .rtbMid, .RadToolBar_Custom .rtbItemHovered .rtbIn
{
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('ToolBar/rtbHoverBg.png');
}

* html .RadToolBar_Custom .rtbSplBtnFocused .rtbWrap, * html .RadToolBar_Custom .rtbSplBtnFocused .rtbOut, * html .RadToolBar_Custom .rtbSplBtnFocused .rtbMid, * html .RadToolBar_Custom .rtbSplBtnFocused .rtbIn,
* html .RadToolBar_Custom .rtbItemFocused .rtbWrap, * html .RadToolBar_Custom .rtbItemFocused .rtbOut, * html .RadToolBar_Custom .rtbItemFocused .rtbMid, * html .RadToolBar_Custom .rtbItemFocused .rtbIn,
* html .RadToolBar_Custom .rtbItemHovered .rtbWrap, * html .RadToolBar_Custom .rtbItemHovered .rtbOut, * html .RadToolBar_Custom .rtbItemHovered .rtbMid, * html .RadToolBar_Custom .rtbItemHovered .rtbIn
{
    background-image: url('ToolBar/rtbHoverBgIE6.png');
}

.RadToolBar_Custom .rtbItemClicked .rtbWrap, .RadToolBar_Custom .rtbItemClicked .rtbOut, .RadToolBar_Custom .rtbItemClicked .rtbMid, .RadToolBar_Custom .rtbItemClicked .rtbIn,
.RadToolBar_Custom .rtbSplBtnExpanded .rtbWrap, .RadToolBar_Custom .rtbSplBtnExpanded .rtbOut, .RadToolBar_Custom .rtbSplBtnExpanded .rtbMid, .RadToolBar_Custom .rtbSplBtnExpanded .rtbIn,
.RadToolBar_Custom .rtbDropDownExpanded .rtbWrap, .RadToolBar_Custom .rtbDropDownExpanded .rtbOut, .RadToolBar_Custom .rtbDropDownExpanded .rtbMid, .RadToolBar_Custom .rtbDropDownExpanded .rtbIn,
.RadToolBar_Custom .rtbChecked .rtbWrap, .RadToolBar_Custom .rtbChecked .rtbOut, .RadToolBar_Custom .rtbChecked .rtbMid, .RadToolBar_Custom .rtbChecked .rtbIn
{
    background-image: url('ToolBar/rtbActiveBg.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .RadToolBar_Custom .rtbItemClicked .rtbWrap, * html .RadToolBar_Custom .rtbItemClicked .rtbOut, * html .RadToolBar_Custom .rtbItemClicked .rtbMid, * html .RadToolBar_Custom .rtbItemClicked .rtbIn,
* html .RadToolBar_Custom .rtbSplBtnExpanded .rtbWrap, * html .RadToolBar_Custom .rtbSplBtnExpanded .rtbOut, * html .RadToolBar_Custom .rtbSplBtnExpanded .rtbMid, * html .RadToolBar_Custom .rtbSplBtnExpanded .rtbIn,
* html .RadToolBar_Custom .rtbDropDownExpanded .rtbWrap, * html .RadToolBar_Custom .rtbDropDownExpanded .rtbOut, * html .RadToolBar_Custom .rtbDropDownExpanded .rtbMid, * html .RadToolBar_Custom .rtbDropDownExpanded .rtbIn,
* html .RadToolBar_Custom .rtbChecked .rtbWrap, * html .RadToolBar_Custom .rtbChecked .rtbOut, * html .RadToolBar_Custom .rtbChecked .rtbMid, * html .RadToolBar_Custom .rtbChecked .rtbIn
{
    background-image: url('ToolBar/rtbActiveBgIE6.png');
}

.RadToolBar_Custom .rtbItemFocused .rtbWrap,
.RadToolBar_Custom .rtbChecked .rtbWrap,
.RadToolBar_Custom .rtbDropDownExpanded .rtbWrap,
.RadToolBar_Custom .rtbSplBtnExpanded .rtbWrap,
.RadToolBar_Custom .rtbItemHovered .rtbWrap,
.RadToolBar_Custom .rtbItemClicked .rtbWrap
{
    color: #000000;
}

/* </button states> */

/* <Drop Down Arrows> */


.RadToolBar_Custom .rtbSplBtn .rtbChoiceArrow,
.RadToolBar_Custom .rtbItem .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbDropArrows.png');
}

.RadToolBar_Custom .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbExpandUp .rtbVOriented .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbUpArrows.png');
}

.RadToolBar_Custom .rtbSplBtnExpanded .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnExpanded .rtbChoiceArrow,
.RadToolBar_Custom .rtbDropDownExpanded .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbDropDownExpanded .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnHovered .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnHovered .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemHovered .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemHovered .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnClicked .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemClicked .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemClicked .rtbChoiceArrow
{
    background-color: transparent;
    background-image: url('ToolBar/rtbHoverDropArrows.png');
    background-repeat: no-repeat;
}

.RadToolBar_Custom .rtbSplBtnExpanded .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbDropDownExpanded .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnHovered .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemHovered .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Custom .rtbItemClicked .rtbExpandUp .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbHoverUpArrows.png');
}

/* </Drop Down Arrows> */

.RadToolBar_Custom_Horizontal li.rtbSeparator
{
    border-left: 1px solid #474747;
    background: #a1a1a1;
}

.RadToolBar_Custom_Vertical li.rtbSeparator
{
    border-top: 1px solid #474747;
    background: #a1a1a1;
}

* html .RadToolBar_Custom .rtbSplBtnActivator { margin-top /**/: 2px; } /* IE Quirksmode hack */

*+html div.RadToolBar_Custom .rtbIn { vertical-align: top; }
* html div.RadToolBar_Custom .rtbIn { vertical-align: top; }

*+html div.RadToolBar_Custom .rtbIn * { vertical-align: middle; }
* html div.RadToolBar_Custom .rtbIn * { vertical-align: middle; }

/* </buttons> */


/* <disabled states> */

.RadToolBar_Custom .rtbDisabled .rtbWrap,
.RadToolBar_Custom .rtbDisabled .rtbOut,
.RadToolBar_Custom .rtbDisabled .rtbMid,
.RadToolBar_Custom .rtbDisabled .rtbIn,
.RadToolBar_Custom .rtbDisabled .rtbWrap:hover,
.RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbOut,
.RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbMid,
.RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbIn
{
    background-image: url('ToolBar/rtbDisabledBg.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .RadToolBar_Custom .rtbDisabled .rtbWrap,
* html .RadToolBar_Custom .rtbDisabled .rtbOut,
* html .RadToolBar_Custom .rtbDisabled .rtbMid,
* html .RadToolBar_Custom .rtbDisabled .rtbIn,
* html .RadToolBar_Custom .rtbDisabled .rtbWrap:hover,
* html .RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbOut,
* html .RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbMid,
* html .RadToolBar_Custom .rtbDisabled .rtbWrap:hover .rtbIn
{
    background-image: url('ToolBar/rtbDisabledBgIE6.png');
}

.RadToolBar_Custom .rtbDisabled .rtbWrap { color: #999999; }

/* Opacity hack for IE */
.RadToolBar .rtbDisabled .rtbIcon,
.RadToolBar .rtbDisabled .rtbChoiceArrow
{
    filter: alpha(opacity=40)\9;
    -ms-filter: "alpha(opacity=40)"\9;
}

div.RadToolBar .rtbDisabled { opacity: 1; -moz-opacity: 1 }
.RadToolBar .rtbDisabled .rtbIcon,
.RadToolBar .rtbDisabled .rtbChoiceArrow { -moz-opacity: .4; opacity: .4; }

/* </disabled states> */

/* <background positions> */

.RadToolBar .rtbItem .rtbWrap { background-position: 0 100%; }
.RadToolBar .rtbItem .rtbOut { background-position: 100% 0; }
.RadToolBar .rtbItem .rtbMid { background-position: 100% 100%; }
.RadToolBar .rtbItem .rtbIn { background-position: 0 0; }

.RadToolBar .rtbDisabled .rtbWrap { background-position: 0 100%; }
.RadToolBar .rtbDisabled .rtbOut { background-position: 100% 0; }
.RadToolBar .rtbDisabled .rtbMid { background-position: 100% 100%; }
.RadToolBar .rtbDisabled .rtbIn { background-position: 0 0; }

/* </background positions> */

/* <drop-down> */

/* <Drop Down rounded corners and shadows> */

.RadToolBarDropDown_Custom .rtbTopFix,
.RadToolBarDropDown_Custom .rtbBottomFix,
.RadToolBarDropDown_Custom .rtbGroup
{
    background-color: #ffffff;
    /*background-repeat: repeat-y;
    background-image:none !important;*/
}

.RadToolBarDropDown_Custom .rtbBottomLeft,
.RadToolBarDropDown_Custom .rtbRoundedCorners
{
    background-image:  url('ToolBar/rtbRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadToolBarDropDown_Custom .rtbTopRight,
.RadToolBarDropDown_Custom .rtbBottomRight
{
    background-image:  url('ToolBar/rtbRoundedRight.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadToolBarDropDown_Custom div.rtbTopFix,
.RadToolBarDropDown_Custom div.rtbBottomFix
{
    border: 0;
}

/* </Drop Down rounded corners and shadows> */

div.RadToolBarDropDown_Custom
{
    border-color: #c4c4c4;
    background-color: #ffffff;


}

.RadToolBarDropDown_Custom .rtbWrap,
.RadToolBarDropDown_Custom .rtbTemplate
{
    color: #b5b5b5;
    font: normal 12px/19px "Segoe UI", Arial, Helvetica, sans-serif !important;

}

.RadToolBarDropDown_Custom .rtbItemHovered,
.RadToolBarDropDown_Custom .rtbItemHovered .rtbWrap
{
    text-decoration: underline;
}

.RadToolBarDropDown_Custom .rtbItemFocused,
.RadToolBarDropDown_Custom .rtbItemFocused .rtbWrap
{
    color: #000000;
}

.RadToolBarDropDown_Custom .rtbDisabled .rtbWrap
{
    color: #8a8a8a;
}

.RadToolBarDropDown_Custom .rtbSeparator
{
    border-color: #c9c9c9;
    background: #ffffff;
}
.RadToolBarDropDown_Custom .rtbWrap

    {

      background-color:White !important;
      padding:3px !important;
      background-image:none !important;
      font: normal 12px/19px "Segoe UI", Arial, Helvetica, sans-serif !important;
    }

/* </drop-down> */

/* </RadToolBar / Custom> */

[Kate]

Hi Tina,

Can you please clarify in you used any of our tools to customize the skin of the RadToolBar control? Please note that when you need to change the look of the rounded corners you will also need to change the sprite images that are applied in order to achieve the shape of the dropdown. I also tried replicating the issue that you describe and check what is causing the appearance that you get, but I was not able since the images that you apply for the skin are missing. I would suggest, however, that you make sure that sprite images needed for the rounded corners of the dropdown do actually apply when you change the skin to your custom one.

Greetings,
Kate
the Telerik team

[Tina]

I used the online Telerik Custom Skin Creator starting with the SiteFinity Skin.  I have all the sprites in the required directory.  Everything else works fine just not the dropdown.  I can't attached a zip file with the forms and images to this post.  Only excepts image files.

[Kate]

Hello Tina,

I tested the scenario that you describe but the rounded corners of the DropDown work as expected from my side (see the image attached). Attached to this post you can also find a simplified runnable project that I used for simple testing and that reproduces the look of the RadToolBar control from the attached image. 

Kind regards,
Kate
the Telerik team