Custom Skin border not applied

3 posts, 0 answers
  1. Rayne
    Rayne avatar
    261 posts
    Member since:
    Sep 2010

    Posted 10 Jan 2017 Link to this post

    I'm trying to add a custom skin to my site and I'm having some issues. I used the theme builder to modify the Silk skin. In my webapp, I added global settings to web.config to set the skin and EnableEmbeddedSkins = false. The site uses ASPNET themes, so I put all the custom CSS files in the App_Themes Theme folder. For all the controls it looks like it applied fine. 

    It also appears to have applied to the Grid, but I have this obnoxious black border around all my grids. If I inspect the element in the browser, it looks like .RadGrid from WebResource.axd is overriding the custom .RadGrid_ADEMGreen style, because I can uncheck the border from that class and the custom one is applied correctly. I've attached a snapshot of this from the dev tools.

    If this is the case, what else is being overridden by the embedded styles? How do I fix this?

  2. Rayne
    Rayne avatar
    261 posts
    Member since:
    Sep 2010

    Posted 10 Jan 2017 Link to this post

    After further investigation, it looks like the custom style is not being applied properly at all to the Grid, not just the border. I globally set the RenderMode to Lightweight so that isn't the problem.

    I read in another thread that that the stylesheets are loaded first, so the embedded styles from Web Resources overrides those and it was recommended to change the order of specificity using RadStylesheetManager. But why? I put all the styles in the Themes folder as instructed in the documentation.

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 13 Jan 2017 Link to this post

    Hello Rayne,

    You can use the RadStylesheetManager to specify the order in which styles are loaded. For that you can use the OrderIndex property.  This way you can ensure that the custom styles are loaded after the base ones. Thus, the appearance you have defined would be applied.


    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top