Best approach to use custom skins & embedded skins together

4 posts, 0 answers
  1. Bryan
    Bryan avatar
    9 posts
    Member since:
    May 2013

    Posted 30 Aug 2016 Link to this post

    Hi,

     

    So I am upgrading the UI of an old product that has a combination of Webcontrols and Web.UI controls. I plan to bring the older controls up to date but need to keep support and CSS for the older controls in place. 

    The older controls use a combination of skins and lots of bad css. 

    I will be using theme builder to create a custom skin and using lightweight rendering and EnableEmbeddedSkins="False" for new controls. 

    I have done one control so far and I am getting issues with the embedded skins overwriting my new skin using the WebResources.axd

    I know I can use important to override but that's a very bad approach, especially on a large project... Is there a good approach to increase the specificity for the new skin files so all their properties are applied over the existing base properties where applicable.

    I was thinking of using an ID to prefix all new skin selectors with and wrapping each updated control  in a div of that id.. not 100% this is a good approach though.

    eg..

    #newControls .RadGrid_MyMetro{ ... }

     

    and then give updated controls a div wrapped around it with ID="newControls" or something like that.

    1. will this work throughout the project

    2. Are there better approaches?

     

    Thanks

  2. Magdalena
    Admin
    Magdalena avatar
    441 posts

    Posted 31 Aug 2016 Link to this post

    Hi Bryan,

    Custom styles are loaded before our inbuilt styles by default. For that reason your custom styles are overwritten by inbuilt styles. If you would like to change an order of applying CSS files, you can refer these styles in RadStyleSheetManager and set OrderIndex property to StyleSheetReference.

    Regards,
    Magdalena
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Rayne
    Rayne avatar
    248 posts
    Member since:
    Sep 2010

    Posted 10 Jan in reply to Magdalena Link to this post

    Why is that the default? Doesn't that defeat the purpose of applying a custom skin? I don't understand.
  4. Magdalena
    Admin
    Magdalena avatar
    441 posts

    Posted 13 Jan Link to this post

    Hello Rayne,

    Our inbuilt skins are referred dynamically depend on the used controls and skin so applying our inbuilt styles as last is expected. Setting the OrderIndex property does not make applying custom styles difficult.

    The other option is to add a "html" forward to all selectors in the custom theme to make them stronger. This can be achieved simple by replacing the string ".Rad" with "html .Rad".

    Do not hesitate to contact us if you have other questions.

    Regards,
    Magdalena
    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