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

Toolbar skin

5 Answers 107 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Naisha
Top achievements
Rank 1
Naisha asked on 08 Dec 2011, 12:08 PM
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

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 08 Dec 2011, 02:09 PM
Hello,

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

Thanks,
Princy.
0
Naisha
Top achievements
Rank 1
answered on 11 Dec 2011, 09:09 AM
Hi,
10x for the answer' but there is still problem if the text contains 2 liens.
pls see attached.
0
Kate
Telerik team
answered on 12 Dec 2011, 12:15 PM
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
0
Naisha
Top achievements
Rank 1
answered on 12 Dec 2011, 01:55 PM
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> */
0
Kate
Telerik team
answered on 14 Dec 2011, 02:06 PM
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
Tags
ToolBar
Asked by
Naisha
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Naisha
Top achievements
Rank 1
Kate
Telerik team
Share this question
or