Buttons on non-white background

[Clive Hoggar]

Hi
I am using the excellent form decorator control in default skin on a page which has a
stone coloured background.
The result is white corners around buttons where the rounding has been done. Is there
any way to set the background colour of the button so that the square corners are effectively invisible?

Thanks

Clive

[Martin]

Hi Clive Hoggar,

I am happy you like our RadFormDecorator. Now straight on your question:

It seems to be an issue on our side - we have forgotten to remove the white backgorund from the corners of that skin, and we will certainly fix it. In the meantime, you may use the image sprite for the decorated buttons as an external resource. I have removed the white corners for you, and I believe the solution is a good one. Here is the CSS:

.RadForm_Default.rfdButton a.rfdSkinnedButton,
.RadForm_Default.rfdButton input[type="button"].rfdDecorated,
.RadForm_Default.rfdButton input[type="reset"],
.RadForm_Default.rfdButton input[type="submit"].rfdDecorated,
.RadForm_Default.rfdButton button
{
 background-image: url('ButtonSprites.gif') !important;
 color: #000000;
}

.RadForm_Default.rfdButton a.rfdSkinnedButton,
.RadForm_Default.rfdButton a.rfdSkinnedButton *
{
 _background-image: url('ButtonSprites.gif') !important;
}

The sprite itself is attached to the mesage. Make sure the url in the CSS is correct in your project, and do not remove the !important flag, otherwise the sprite will load from the assembly, not externally. The "_" background property in the second selector is for IE6.

Kind regards,

Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Clive Hoggar]

Hi Martin

Thanks for your response.
I inserted the css code in my styles/main.css file, downloaded the buttonsprites.fig file 
to my images/buttons file and adjusted the url to the correct relative path, but it did not seem to
change anything. I also tried the absolute url in case that was an issue but no change.

Should this work on my development machine immediately or do I need to re-boot, restart IIS, clear some
cache...?

I have made sure the browser has no cached copy of pages

Thanks

Clive

[Martin]

Hello Clive Hoggar,

The code should work, I have tested it extensively, so please check:

1. The filename of the image sprite - the admin changes the casing of the attached files, and prefixes them with a number
2. Check if the URL to the image sprite in the CSS if okay
3. Not required at all, but if none of steps 1 and 2 helps, you may restart IIS and clear the browser's cache.

And finally, if the problem persists, send me a small running project, and I will fix the skin the issue for you.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.