ToolBarButton Images with CSS

[Josh]

Hello,

I am trying to use the CSSClass properties of the RadToolBarButton to use theme-specific images on them. I can get the base image to appear, but it always remains, even though I have the hovered class defined. I have tried both of the following:

Using the :hovered sub-class of 'a'

<telerik:RadToolBarButton runat="server" Width="20px" ImageUrl="~/images/transparent.gif"
    CssClass="pageNext" ></telerik:RadToolBarButton>

a.pageNext img.rtbIcon
{
    background:transparent url('pageNext.gif') no-repeat 0 0;
    margin-left: 2px;
}
a.pageNext:hovered img.rtbIcon
{
    background:transparent url('pageNextHovered.gif') no-repeat 0 0;
}

Using separate classes:

<telerik:RadToolBarButton runat="server" Width="20px" ImageUrl="~/images/transparent.gif"
    CssClass="pageNext" HoveredCssClass="pageNextHovered" ></telerik:RadToolBarButton>

a.pageNext img.rtbIcon
{
    background:transparent url('pageNext.gif') no-repeat 0 0;
    margin-left: 2px;
}
a.pageNextHovered img.rtbIcon
{
    background:transparent url('pageNextHovered.gif') no-repeat 0 0;
}

Both produce the same result: pageNext.gif appears, but is not replaced by pageNextHovered. 'transparent.gif' is a blank 16x16 image which causes the img.rtbIcon class to be rendered. Is this possible to do?

Thanks in advance.

[Cori]

Hello Josh,

Using your second approach, it should look like this:

.pageNextHovered img.rtbIcon
{
    background:transparent url('pageNextHovered.gif') no-repeat 0 0 !important;
}

The reason for removing a is because the HoveredCssClass is applied to the li item, not the a element.

I hope that helps.

[Josh]

Hi Cori,

That worked. Thanks for the help.