Buttons on non-white background

4 posts, 0 answers
  1. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 05 Sep 2009 Link to this post

    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
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 07 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 07 Sep 2009 Link to this post

    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
  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 07 Sep 2009 Link to this post

    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.
Back to Top