Toolbar skin

6 posts, 0 answers
  1. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 08 Dec 2011 Link to this post

    Hi, 
    I tried to set the height of an item to 100px, but than the text go to down.
    what should I need to change in the css?

    10x
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Dec 2011 Link to this post

    Hello,

    Try the following CSS.
    CSS;
    <style type="text/css">
     .rtbIn
      {
         line-height: 24px ! important;
      }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 11 Dec 2011 Link to this post

    Hi,
    10x for the answer' but there is still problem if the text contains 2 liens.
    pls see attached.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Dec 2011 Link to this post

    Hi Itai,

    I tested your code with the latest version of the controls and I am not able to get the appearance that you do. Please refer to the attached image that demonstrates the look that I get. I also pasted the code that I used for testing:
    <telerik:RadToolBar runat="server" ID="radtoolbar">
                <Items>
                    <telerik:RadToolBarButton Text="toobBar Button" ImageUrl="../images/Paste.png" Height="100px" ImagePosition="AboveText">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
    In case this does not help, can you please elaborate a bit more on your scenario - the version of the controls that you use, the browser where you encounter this appearance? If you could send us some sample code that we could test would be very helpful as well. 

    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
  6. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 12 Dec 2011 Link to this post

    This is the code in the aspx file:
       
    <telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical"
          Skin="Main" EnableEmbeddedSkins="False">
      <Items>
      <telerik:RadToolBarButton runat="server" Text="Dashboard"
              ImageUrl="~/img/Main/dashboard-icon.png" ImagePosition="AboveText" ></telerik:RadToolBarButton>
      <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Sep1"></telerik:RadToolBarButton>
      <telerik:RadToolBarButton runat="server" CheckOnClick="true" CheckedCssClass="NewChk" 
      CheckedImageUrl="~/img/Main/orders-icon-selected.png" Checked="true" Text="Orders" ImageUrl="~/img/Main/orders-icon.png" ImagePosition="AboveText"></telerik:RadToolBarButton>

    and this is the css file code:




    /* <RadToolBar / Default> */
     
    /* <tool wrapper> */
     
    /* <horizontal> */
     
    .RadToolBar_Main .rtbOuter
    {
        border: 0px;
    }
     
    .RadToolBar_Main .rtbMiddle
    {
        border: 0px;
        /*background: #fafafa url('ToolBar/rtbControlBg.png') repeat-x 0 100%;*/
    }
     
     
     
    /* </horizontal> */
     
    /* <vertical> */
     
    .RadToolBar_Main_Vertical .rtbMiddle
    {
        /*background: #fafafa url('ToolBar/rtbVerticalControlBg.png') repeat-y 100% 0;*/
        background: #fafafa url('ToolBar/left-menu-strip.png') repeat-y 100% 0;
        width:147px;
         
        vertical-align:top;
         
    }
     
    .RadToolBar_Main_Vertical .NewChk
    {
        background: #fafafa url('ToolBar/left-menu-strip-selected.png') repeat-y 100% 0;
        width:147px;
    }
     
     
    /* </vertical> */
     
    /* </tool wrapper> */
     
    /* <buttons> */
     
    .RadToolBar_Main .rtbWrap,
    .RadToolBar_Main .rtbTemplate
    {
        font: normal 15px Tahoma, Arial, sans-serif;
        color: #4f4849;
        /*color: Red;*/
     
    }
     
    /* <button states> */
     
    .RadToolBar_Main .rtbSplBtnFocused .rtbWrap, .RadToolBar_Main .rtbSplBtnFocused .rtbOut, .RadToolBar_Main .rtbSplBtnFocused .rtbMid, .RadToolBar_Main .rtbSplBtnFocused .rtbIn,
    .RadToolBar_Main .rtbItemFocused .rtbWrap, .RadToolBar_Main .rtbItemFocused .rtbOut, .RadToolBar_Main .rtbItemFocused .rtbMid, .RadToolBar_Main .rtbItemFocused .rtbIn,
    .RadToolBar_Main .rtbItemHovered .rtbWrap, .RadToolBar_Main .rtbItemHovered .rtbOut, .RadToolBar_Main .rtbItemHovered .rtbMid, .RadToolBar_Main .rtbItemHovered .rtbIn
    {
        background-color: transparent;
        background-repeat: no-repeat;
        /*background-image: url('ToolBar/rtbHoverBg.png');*/
    }
     
    .RadToolBar_Main .rtbItemClicked .rtbWrap, .RadToolBar_Main .rtbItemClicked .rtbOut, .RadToolBar_Main .rtbItemClicked .rtbMid, .RadToolBar_Main .rtbItemClicked .rtbIn
    {
        background-color: transparent;
        background-repeat: no-repeat;
        /*background-image: url('ToolBar/rtbClickedBg.png');*/
    }
     
    .RadToolBar_Main .rtbSplBtnExpanded .rtbWrap, .RadToolBar_Main .rtbSplBtnExpanded .rtbOut, .RadToolBar_Main .rtbSplBtnExpanded .rtbMid, .RadToolBar_Main .rtbSplBtnExpanded .rtbIn,
    .RadToolBar_Main .rtbDropDownExpanded .rtbWrap, .RadToolBar_Main .rtbDropDownExpanded .rtbOut, .RadToolBar_Main .rtbDropDownExpanded .rtbMid, .RadToolBar_Main .rtbDropDownExpanded .rtbIn,
    .RadToolBar_Main .rtbChecked .rtbWrap, .RadToolBar_Main .rtbChecked .rtbOut, .RadToolBar_Main .rtbChecked .rtbMid, .RadToolBar_Main .rtbChecked .rtbIn,
    .RadToolBar_Main li.rtbChecked .rtbWrap:hover, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbOut, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbMid, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbIn
    {
        background-color: transparent;
        background-repeat: no-repeat;
        /*background-image: url('ToolBar/rtbActiveBg.png');*/
    }
     
    .RadToolBar_Main .rtbItemFocused .rtbWrap,
    .RadToolBar_Main .rtbItemHovered .rtbWrap
    {
        color: #000;
    }
     
    .RadToolBar_Main .rtbDropDownExpanded .rtbWrap,
    .RadToolBar_Main .rtbSplBtnExpanded .rtbWrap,
    .RadToolBar_Main .rtbChecked .rtbWrap,
    .RadToolBar_Main .rtbItemClicked .rtbWrap
    {
        color: #fff;
    }
     
    /* </button states> */
     
    /* <Drop Down Arrows> */
     
     
    .RadToolBar_Main .rtbSplBtn .rtbChoiceArrow,
    .RadToolBar_Main .rtbItem .rtbVOriented .rtbChoiceArrow,
    .RadToolBar_Main .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbDropArrows.png');
    }
     
    * html .RadToolBar_Main .rtbSplBtn .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbItem .rtbVOriented .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbDropArrows.gif');
    }
     
    .RadToolBar_Main .rtbExpandUp .rtbChoiceArrow,
    .RadToolBar_Main .rtbExpandUp .rtbVOriented .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbUpArrows.png');
    }
     
    * html .RadToolBar_Main .rtbExpandUp .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbExpandUp .rtbVOriented .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbUpArrows.gif');
    }
     
    .RadToolBar_Main .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,
    .RadToolBar_Main .rtbSplBtnClicked .rtbChoiceArrow,
    .RadToolBar_Main .rtbItemClicked .rtbVOriented .rtbChoiceArrow,
    .RadToolBar_Main .rtbItemClicked .rtbChoiceArrow
    {
        background-color: transparent;
        background-repeat: no-repeat;
        background-image: url('ToolBar/rtbClickedDropArrows.png');
    }
     
    * html .RadToolBar_Main .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbSplBtnClicked .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbItemClicked .rtbVOriented .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbItemClicked .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbClickedDropArrows.gif');
    }
     
    .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
    .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,
    .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
    .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbClickedUpArrows.png');
    }
     
    * html .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
    * html .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbClickedUpArrows.gif');
    }
     
    /* </Drop Down Arrows> */
     
    .RadToolBar_Main_Horizontal li.rtbSeparator
    {
        /*border-left: 1px solid #939393;
        background: #f7f7f7;*/
    }
     
    .RadToolBar_Main_Vertical li.rtbSeparator
    {
        /*border-top: 1px solid #939393;
        background: #f7f7f7;*/
        /* ITAI */
        background-image: url('ToolBar/saparate-line-left-menu.png')  ;
        width: 147px;
        height:3px;
        padding-left:3px !important;
         
         
    }
     
    /* </buttons> */
     
     
    /* <disabled states> */
     
    .RadToolBar_Main .rtbDisabled .rtbWrap:hover,
    .RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbOut,
    .RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbMid,
    .RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbIn
    {
        background-image: none;
    }
     
    .RadToolBar_Main .rtbDisabled .rtbWrap { color: #888 }
     
    .RadToolBar_Main .rtbDisabled .rtbChoiceArrow,
    .RadToolBar_Main .rtbDisabled .rtbWrap .rtbChoiceArrow
    { background-image: url('ToolBar/rtbDropArrows.gif')\9 }
     
    @media screen and (-webkit-min-device-pixel-ratio:0/* WebKit alpha + opacity/cleartype bug, like IE wasn't enough... */
    {
        .RadToolBar_Main .rtbDisabled .rtbWrap { color: #888; }
         
        .RadToolBar_Main .rtbDisabled .rtbChoiceArrow,
        .RadToolBar_Main .rtbDisabled .rtbWrap .rtbChoiceArrow
        {
            background-image: url('ToolBar/rtbDropArrows.gif');
        }
    }
     
    /* </disabled states */
     
    /* <drop-down> */
     
     
    /* <Drop Down rounded corners and shadows> */
     
    .RadToolBarDropDown_Main .rtbTopFix,
    .RadToolBarDropDown_Main .rtbBottomFix,
    .RadToolBarDropDown_Main .rtbGroup
    {
        background-image: url('ToolBar/rtbDropDownBg.png');
        background-color: #fff;
        background-repeat: repeat-y;
    }
     
    .RadToolBarDropDown_Main .rtbBottomLeft,
    .RadToolBarDropDown_Main .rtbRoundedCorners
    {
        /*background-image:  url('ToolBar/rtbRoundedLeft.png');*/
        background-color:blue;/* transparent; */
        background-repeat: no-repeat;
    }
     
    .RadToolBarDropDown_Main .rtbTopRight,
    .RadToolBarDropDown_Main .rtbBottomRight
    {
        background-imageurl('ToolBar/rtbRoundedRight.png');
        background-color: Red;/* transparent; */
        background-repeat: no-repeat;
    }
     
    .RadToolBarDropDown_Main .rtbTopFix,
    .RadToolBarDropDown_Main .rtbBottomFix,
    .RadToolBarDropDown_Main .rtbRoundedCorners .rtbFirst
    {
        border-color: Fuchsia;/* #979797;*/
    }
     
    .RadToolBarDropDown_Main_rtl .rtbBottomLeft,
    .RadToolBarDropDown_Main_rtl .rtbRoundedCorners
    {
        background-image: url('ToolBar/rtbRoundedLeft_rtl.png');
    }
     
    .RadToolBarDropDown_Main_rtl .rtbTopRight,
    .RadToolBarDropDown_Main_rtl .rtbBottomRight
    {
        background-image: url('ToolBar/rtbRoundedRight_rtl.png');
    }
     
    .RadToolBarDropDown_Main_rtl div.rtbTopFix,
    .RadToolBarDropDown_Main_rtl div.rtbBottomFix,
    .RadToolBarDropDown_Main_rtl .rtbGroup
    {
        background-position: 100% 0;
    }
     
    /* </Drop Down rounded corners and shadows> */
     
    .RadToolBarDropDown_Main
    {
        border-color: #828282;
        background-color: #fff;
        background-image: url('ToolBar/rtbDropDownBg.png');
    }
     
    .RadToolBarDropDown_Main .rtbWrap,
    .RadToolBarDropDown_Main .rtbTemplate
    {
        font: normal 15px Tahoma, Arial, sans-serif;
        color#4f4849;
        /*color: Green;*/
    }
     
    .RadToolBarDropDown_Main .rtbItemHovered,
    .RadToolBarDropDown_Main .rtbItemFocused,
    .RadToolBarDropDown_Main .rtbItemHovered .rtbWrap,
    .RadToolBarDropDown_Main .rtbItemFocused .rtbWrap
    {
        background-image: url('ToolBar/rtbDropDownHover.png');
    }
     
    .RadToolBarDropDown_Main .rtbDisabled .rtbWrap
    {
        color: #999;
    }
     
    .RadToolBarDropDown_Main .rtbSeparator
    {
        /*border-color: #939393;
        background: #f7f7f7;*/
        background-image: url('ToolBar/saparate-line-left-menu.png');
        width: 147px;
     
     
    }
     
    /* </drop-down> */
     
    /* </RadToolBar / Default> */
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Dec 2011 Link to this post

    Hello Itai,

    I tried to reproduce the issue that you describe but unfortunately I am still not able to get the appearance that you do. Here I have attacher my testing page as well as am image that represents what I get. Can you please try to modify it so that I can get the look that you currently experience and help you out?

    Thank you very much in advance.

    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
UI for ASP.NET Ajax is Ready for VS 2017