Custom Skin

4 posts, 0 answers
  1. Tina
    Tina avatar
    31 posts
    Member since:
    Sep 2007

    Posted 19 Oct 2012 Link to this post

    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> */
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tina
    Tina avatar
    31 posts
    Member since:
    Sep 2007

    Posted 24 Oct 2012 Link to this post

    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.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Oct 2012 Link to this post

    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.
Back to Top