Improve user experience by styling and coloring Microsoft Dynamics CRM 2013/2015 Forms on the fly

Introduction

I have a requirements to add some background colors, alignments and fonts to Microsoft dynamic CRM form. I believe this is very important since the default themes in Microsoft dynamic CRM 2013/2015 are colorless with same background for all sections.

Before:



After:

Background

You need to have a basic understanding of Microsoft dynamic CRM customization, Javascript and stylesheet.

The Solution

I have started looking on the internet and I found a good solution written by Hassan Kazemi. The problem with this solution was any styling will be applied for all items on the page for example all sections, all tabs...Etc.

I tried to expand Hassan Kazemi idea by dealing with form items separately. Therefore you will have more flexibility on the form to play with color, fonts, background, padding or any styling options.

The basic idea is to create a custom style sheet file and load this file on (form load) JavaScript event to override the original style sheet on fly.

How to apply

1. Determine the Item you want to apply style sheet on it.
   • Using Google chrome press F12 to open developer tools
     
     
   
   
   • Click on search icon from developer tools
     
     
   
   
   • Select the item that you want to change the style for it.
     
     
   
   
   • Copy the CSS path for the item selected item
     
     
   
   
   • Paste the item in Notepad
     
     
   
   
   • Write down the new style for the item
     
     
   
   
   • Repeat the above steps for any items you want update their style.
   • The content of Notepad will be added in the next step
2. Create style sheet.
   • Setting → customization → solutions then open your solution or select customize the system
     
     
   
   
   • Select web resources
     
     
   
   
   • Press New then fill the required field as in the below snapshot.
     
     
   
   
   • Select Text editor, copy and paste the style from Notepad in step 1, Then Save and Publish.
     
     
3. Load the style sheet using JavaScript.
   • Select form properties
     
     
   
   
   • Click add under the Form Libraries section
     
     
   
   
   • Select New to create new custom JavaScript library or select your exist custom JavaScript library.
     
     
   
   
   • Fill the fields as in the snapshot and select text editor.
     
     
   
   
   • Copy and paste the below function and press OK.
     JavaScript

     function LdCSS() {
     var path="/WebResources/new_custom.css";
     var head = document.getElementsByTagName('head')[0];
     var link = document.createElement('link');
     link.rel = 'stylesheet';
     link.type = 'text/css';
     link.href = path;
     link.media = 'all';
     head.appendChild(link);
     }

     
     
   
   
   • Press Add
     
     
   
   
   • Select Add under Event Handlers for form on load event.
     
     
   
   
   • Write down the function name.
     
     
   
   
   • Press Ok → Ok → Save and Publish.
     
     

Now you can refresh the form page and get the style applied. So, Go ahead and enjoy with an intuitively colored screen.

Points of Interest

This solution working fine with on-premises dynamic CRM only. Unfortunatly it is not working with CRM online.

References

https://www.linkedin.com/pulse/how-colorize-microsoft-dynamics-crm-20132015-crm-consultant