Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Toolbar skin

Not answered Toolbar skin

Feed from this thread
  • Itai avatar

    Posted on Dec 8, 2011 (permalink)

    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
    Attached files

    Reply

  • Princy MVP avatar

    Posted on Dec 8, 2011 (permalink)

    Hello,

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

    Thanks,
    Princy.

    Reply

  • Itai avatar

    Posted on Dec 11, 2011 (permalink)

    Hi,
    10x for the answer' but there is still problem if the text contains 2 liens.
    pls see attached.
    Attached files

    Reply

  • Kate Kate admin's avatar

    Posted on Dec 12, 2011 (permalink)

    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
    Attached files

    Reply

  • Itai avatar

    Posted on Dec 12, 2011 (permalink)

    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-image:  url('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> */

    Reply

  • Kate Kate admin's avatar

    Posted on Dec 14, 2011 (permalink)

    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
    Attached files

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Toolbar skin
Related resources for "Toolbar skin"

[   ASP.NET ToolBar Features  |  Documentation  |  Demos  |  Telerik TV   |   Self-Paced Trainer   |  Step-by-step Tutorial  ]