RadToolBarButton with Image and Overlaid Text?

[Benjamin]

Hi,

I am trying to put together a toolbar that uses completely custom images for the buttons. The problem I am having is that the Text for the button appears to get hidden behind the images, so all you can see is the tab. Here is my example mark-up code:

<div>

<telerik:RadToolBar ID="RadToolBar1" runat="server" CssClass="toolbar" Skin="" EnableEmbeddedSkins="false" >

<Items>

<telerik:RadToolBarButton Text="Dashboard" Value="btnDashboard" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

<telerik:RadToolBarButton Text="Summary" Value="btnSummary" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

<telerik:RadToolBarButton Text="Projects" Value="btnProjects" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

</Items>

</telerik:RadToolBar>

</div>

Is there something I am doing wrong or is simply not possible to overlay text on top of the image for the button?

Thanks,

Ben

[Alex Gyoshev]

Hi Benjamin,

You can use the following CSS to achieve this effect:

.RadToolBar .rtbIcon
{
    position:absolute;
    z-index:1;
}

.RadToolBar .rtbText
{
    position:relative;
    z-index:2;
}

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Benjamin]

Thanks for the reply Alex, I'll give it a go.

Regards,

Ben