Prettify Entity Form in CRM 2013/2015

For CRM Online, please see this post.

You may find the look and feel of entity forms in CRM 2013/2015 a bit too plain.

The following customisation attempts to “prettify” them using CSS loaded using JavaScript.

What the CSS does:

  1. give a background colour and borders to the form header to make a better distinction between header and body,
  2. give borders to sub-grids on the form to make them more prominent, and
  3. make long field labels drop into the second line instead of fade out (as highlighted in yellow).

I have tested this to work with Internet Explorer (8-11), Chrome, and Outlook.

The code is provided as-is, please use at your own risk.

Before (standard CRM):

Prettify Entity Form in CRM 2013 - before

After (with customisation applied):

Prettify Entity Form in CRM 2013 - after

JavaScript code for loading the CSS – simply update the cssfilename below and  include the JavaScript file in your form, or include it in your existing JavaScript library:

function LoadCSS(path) {
 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);
}

LoadCSS("/WebResources/cssfilename");

CSS code for CRM 2013:

.ms-crm-InlineEditLabel { white-space: normal !important; }
.ms-crm-InlineEditLabel .ms-crm-Inline-GradientMask { background-image: none !important; filter: none !important; }
.ms-crm-ListArea { border: 1px solid #999; width: auto !important; }
.ms-crm-Form-SubGrid-Layout-Lite { background: #F3F3F4; padding-top: 2px; border: 1px solid #999; border-bottom: 1px solid #ccc; }
#formHeaderContainer { border-top: 1px dotted #999; background: #F3F3F4; border-bottom: 1px dotted #999 !important; padding-left: 5px; padding-right: 5px; }

CSS code for CRM 2015:

.ms-crm-InlineEditLabel, .ms-crm-InlineEditLabelText { white-space: normal !important; }
.ms-crm-InlineEditLabel .ms-crm-Inline-GradientMask { background-image: none !important; filter: none !important; }
.ms-crm-ListArea { border: 1px solid #999; width: auto !important; }
.ms-crm-Form-SubGrid-Layout-Lite { background: #F3F3F4; padding-top: 2px; border: 1px solid #999; border-bottom: 1px solid #ccc; }
#formHeaderContainer { border-top: 1px dotted #999; background: #F3F3F4; border-bottom: 1px dotted #999 !important; padding-left: 5px; padding-right: 5px; padding-bottom: 3px; }
#formHeaderContainer .collapsibleArea { background: #fff; }
.navTabButton { float: right; }
.navBarTopLevelItemIE8Fix { max-width: 200px !important; }
Advertisements

20 thoughts on “Prettify Entity Form in CRM 2013/2015

  1. I added this to my CRM but it only removed the fade. It didn’t wrap the long text. Any suggestions?

  2. Hello, Good Tip, thanks. Can you get to overwrite the style of fields input area?
    Thank you again

  3. Should put out this change is unsupported and may result in Microsoft giving you limited support on any problems you have with the form at a future date.

    looks good though

  4. I added this webresource in On-premise, it’s work perfectly. When I gothrough the same entity in my outlook client the CSS is not padding in the Form. Please advise how to sort out this.

  5. Thank you. I’ve adjusted the code to change the header. However, it does not seem to work with a “pop out” form? Any suggestions?

  6. Doesn’t appear to work in CRM 2013 or CRM 2015. Appears to be loading but not applying the style change. Would prefer not to modify controls.cs.aspx directly. Any ideas? Using on-premise, latest available versions.

    1. Hi Ronald, I have updated the CSS to work with CRM 2013, 2015, and Online. Please give it another go.

  7. I tried on MS CRM 2015 SP1 online but the approach did not work. Please let me know if Online needs any additional changes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s