ToolBarButton Images with CSS

3 posts, 1 answers
  1. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 16 Feb 2011 Link to this post

    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.
  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 18 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 18 Feb 2011 Link to this post

    Hi Cori,

    That worked. Thanks for the help.
Back to Top