Give your Microsoft CRM 2013 Online Some Style…

 

Microsoft has done well with CRM 2013 by making it easier for us to train – its simplified interface really cleans up a lot of the confusing options for your sales force.  However, the style sheets for CRM 2013 Online aren’t editable.  They are shared by all users on the same server, and as such, there are some issues if you have an older salesforce.   (Update:  Sorry, CRM 2015/16 has a new dom, and this script no longer works)

For example, there are no “lines” defined between rows in views.  And the fonts used are really small – some of the sales teams we work with have great salesmen in the 50+ age range – really hard for them to “see”.  Consider the following list.  It’s very hard to see where you are at with larger datasets, or smaller screens.

 

As such, we have created a Greasemonkey script (We use Tamper Monkey) for use with Microsoft CRM 2013 Online.  It greatly enhances the CSS, and makes it much easier for sales staff to see their data.  Enhancements include:

 

• We added lines within views to separate each row.  We also increased the font size by 1 step to make it easier to see:

 

• We added underlines separating each row on forms.  We also increased font size, as well as provide a “light grey” background for Section headings:

 

• Finally, we added the Left Navigation script that Jared Johnson created.  You can see his original post/idea here: Jared Johnson – CRM 2013 Left Navigation Script 

 

We’ve begun rolling this out to all of our customers – and they really like it.  Enjoy!

_____________________________

// ==UserScript==
// @name TractionCRM BetterCRM Navigation – https://tractioncrm.com – Special Thanks To:  Magnetism Solutions
// @namespace http://www.magnetismsolutions.com
// @include
// @version 1
// @grant none
// ==/UserScript==

function addCss(cssString) {
var head = document.getElementsByTagName(‘head’)[0];
var newCss = document.createElement(‘style’);
newCss.type = “text/css”;
newCss.innerHTML = cssString;
head.appendChild(newCss);
}
addCss(“TD.ms-crm-ReadField-Normal {border-bottom: 1px solid rgb(229, 229, 229) !important;}”);
addCss(“.ms-crm-Inline-Value {border-bottom: 1px solid rgb(229, 229, 229) !important; font-size: 15px !important; font-weight: normal !important;}”);
addCss(“.ms-crm-List-DataCell, .ms-crm-List-DataCell-Lite, .ms-crm-List-DataCell-Associated-Lite, .ms-crm-List-Data A.ms-crm-List-Link {font-size: 12px !important; border-bottom: 1px solid rgb(229, 229, 229) !important;}”);
addCss(“.ms-crm-InlineTabHeader {color: 1px solid rgb(0,0,0) !important; background-color: rgb(230,230,230) !important; font-weight: bold !important;}”);
addCss(“.ms-crm-Form {color: rgb(0,0,0) !important; “);

 

addCss(“.navActionGroupContainer, .navActionListContainer{overflow-x:hidden;overflow-y:auto;width:215px;height: -moz-calc(100% – 40px);height: -webkit-calc(100% – 40px);height:calc(100% – 40px);}.nav-scrl{overflow:hidden;position:static;}”
+ “.nav-scrl{overflow:hidden;position:static;}” + “.nav-scrl-left-lnk,.nav-scrl-right-lnk{display:none!important;}” + “.nav-scrl-view{overflow:hidden;}” + “.nav-scrl-cont{margin-left:5px!important;}” +
“.nav-tabBody{width:200px!important;}” + “.nav-subgroup,.nav-group{display:list-item;float:left;}” + “.nav-layout,.nav-groupContainer{display:inline-block;width:200px;}” + “.navActionButtonContainer{margin-bottom:5px;}” +
“.navActionListContainer{left:198px;overflow:auto;top:40px;width:135px;}” + “.navEmptyActionButtonSmall img{float:left;margin-top:5px;}” + “.navEmptyActionButtonSmall .navActionButtonLabel{display:inline-block;overflow:visible;white-space:normal;width:126px;}” +
“.navActionButton.selected:after{border:none;}”);
Mscrm.ScrollInputHandler.prototype.attachScrollEventHandlers = function (handler) {
}