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

Custom Skin

3 Answers 68 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Tina
Top achievements
Rank 2
Tina asked on 19 Oct 2012, 01:15 PM
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> */

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 24 Oct 2012, 08:37 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tina
Top achievements
Rank 2
answered on 24 Oct 2012, 12:53 PM
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.
0
Kate
Telerik team
answered on 29 Oct 2012, 02:27 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ToolBar
Asked by
Tina
Top achievements
Rank 2
Answers by
Kate
Telerik team
Tina
Top achievements
Rank 2
Share this question
or