This is a migrated thread and some comments may be shown as answers.

Best approach to use custom skins & embedded skins together

3 Answers 28 Views
Documentation and Tutorials
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 30 Aug 2016, 12:14 PM

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

3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 31 Aug 2016, 08:22 AM
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.
0
Rayne
Top achievements
Rank 1
answered on 10 Jan 2017, 03:20 PM
Why is that the default? Doesn't that defeat the purpose of applying a custom skin? I don't understand.
0
Magdalena
Telerik team
answered on 13 Jan 2017, 12:45 PM
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.
Tags
Documentation and Tutorials
Asked by
Bryan
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Rayne
Top achievements
Rank 1
Share this question
or