Apply background image to RadFilter's Apply button

[Vasu]

Hi,

I am trying to apply an image and repeat that as background for the apply button, I am using the same CSS which I used for regular buttons.

.button 
{
background:url("design/nav.gif") 0 0 repeat-x;
color: #fff;
border: solid 1px #DFDFDF;
font-weight: bold;
padding:5px 10px;
width:auto;
cursor:pointer;
}

But I am not getting my image repeated, any suggestions would be very helpful.

Thanks,
Vasu

[Shinu]

Hi,

I tried to achieve your scenario and here is the sample code.

CSS:

.rfButton
 {
     background:url("../Images/Plus.png") 0 0 repeat-x !important; // please make sure that image is loading correctly
 }

Hope this will help you.
Thanks,
Shinu.

[Vasu]

Hi Shinu,

Thank you very much for the response. Your reply helped me identify the problem which is I haven't provided the image URL correctly which now I corrected but I still have problem with as the background image doesn't apply completely to the width of the button, means I can still see some part of the button with Vista skin. Did you by any chance come across this situation or when you tried, the Apply button looks good for you. Find below the CSS code I have been using:

    .rfApply input /* or .rfButton is the class to be used for applying style to Apply button of RadFilter*/
    {
        background: url("../style/design/nav.gif") 0 0 repeat-x !important;
        color: #fff !important;
        border: solid 1px #DFDFDF !important;
        font-weight: bold !important;
        padding: 5px 10px !important;
        width: auto !important;
        height:26px !important;
    }

P.S: See attached screenshot where my CSS setting is not completely applied to Filter button.

Thanks,
Vasu

[Shinu]

Hi,

Try the following CSS.

.RadFilter_Default .rfApply a, .RadFilter_Default .rfApply input
   {
       background-image:none !important;
   }

Thanks,
Shinu.

[Vasu]

Hi Shinu,

First of all thank you for the response.

I couldn't get the functionality of applying background: url (which was my actual problem) if I make background-image as none. But I have noticed (also attached) the button with no background-image still shows some part of gray color in button. Do you think it's a bug to be notified to Telerik team?

Also attached nav.gif file if you would like to play around and see for yourself how it appears on the Apply button.

Thanks,
Vasu

[Venelin]

Hi Vasu,

Please try the following approach.

ASPX:

<telerik:RadButton ID="RadButton" runat="server" Text="Custom buttont"
            ButtonType="LinkButton" CssClass="cutom_button" Height="35">
</telerik:RadButton>

CSS:

.RadButton.rbLinkButton.cutom_button {
    background: url('nav.gif') 0 0 repeat-x;
}

NOTE: Try to avoid using !important when possible. Better approach is to increase the selector specificity by adding elements, pseudo elements, classes etc.

I hope this helps.

Regards,
Venelin
Telerik