Microsoft Dynamics CRM designers and developers may have noticed that a Style Guide for Microsoft Dynamics CRM 2013 was not released in the CRM 2013 SDK (Software Development Kit), though Style Guides were sometimes released in prior versions of the Dynamics CRM SDK. However, advancements in current versions of browser developer tools allow you to do many of the things the Style Guides gave you help with... and more!
Developers want to have reusable CSS files (Cascading Style Sheets) that they can reference to achieve the same look and feel as our application. The product does not provide these resources. We also do not support referencing the CSS files used in our application, because these files can change without notice via Update Rollup or Service Pack installations, or major version upgrades, and affect the UI of anyone referencing (reusing) them.
Here we describe a technique which allows you to create a reference page which includes copies of CSS files used in the application. You can then create your own CSS web resources and use them in your custom UI. The goal is that your UI has no dependencies on resources in the application. So, when things in the application change, your UI (User Interface) will not be affected.
If you have access to the application, getting examples of our styles is rather straight forward using the Microsoft Windows Internet Explorer F12 Developer Tools or similar developer tools associated with supported versions of other browsers supported by Microsoft Dynamics CRM, including Google Chrome, Mozilla Firefox, and Apple Safari:
1. Select the UI element that you want to emulate using an HTML web resource; for example, let’s consider a lookup dialog:
2. Press F12 and open your supported browser's Developer Tools (Here, we're using the Internet Explorer 10 Developer Tools)3. Using the HTML tab, select the element and choose View > Source > Element source with style:
For this particular control, you may need to drill down into the body element of the iFrame:
This gives you some detail about the styles used in Microsoft Dynamic CRM 2013. Consider it a starting point for creating a web resource with the same look and feel as the Dynamics CRM 2013 UI.
As long as you separate your HTML web resources from any part of the CRM application, there is nothing within these suggestions that is not supportable:
Please let us know what you think of this technique and what other information you need to create user interface elements that blend in well with the Microsoft Dynamics CRM UI.
Greg NicholsSenior Premier Field EngineerMicrosoft Corporation