Prettify Entity Form in CRM 2013

Form changes, to make it better,
JS:
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:
.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; }

Stephanus' Blog

You may find the look and feel of entity forms in CRM 2013 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-10), 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:

CSS code:

View original post

Advertisements

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