Branding a CRM 2011 application

The Dynamics CRM 2011 application, along with the XRM framework, enables us to model a varied requirement set with a high degree of customization. But there are instances when CRM is used adjacent with another LOB application, either as sections inside of CRM 2011, or outside of it. In such a case, the user experience should be as streamlined as possible. Dynamics CRM approaches this issue by providing the style sheets that crm uses as part of the sdk (sdk\resources\styleguide), so that other applications can be brought in line with CRM. In situations where other LOB applications take precedent (or their UI cannot be modified), what are the options for the CRM customizer?

Unsupported modifications to the rescue!
A few assumptions/ caveats before we go down this road:

1. The crm application is installed on-premise (you have access to the web files)
2. The changes are unsupported. Future rollups/ updates from MS could wipe out the changes
3. Many of the changes could be global in nature, so test the new styles completely before moving it to production

Dynamics CRM uses css to style the various pieces in the application. Some of the styles are available in the css files, and some are generated during run-time by the code-behind. The approach is to figure out the element that I want to re style, note down the css class and the webfile it is a part of, and make the necessary changes to those css webfiles. Here are some examples of the changes, and the sections I edited to get it to work.

1. Border color for selected dashboard item

        File \CRMWeb\ _forms\controls\form.css.aspx

TABLE.ms-crm-Form-SubGrid-Layout-Selected,

TABLE.ms-crm-Form-AssociatedGrid-Layout

{

border:                                                 2px #8ab728 solid;

}

TABLE.ms-crm-Form-Chart-Layout-Selected

{

border:                                                 1px #8ab728 solid;

}

2. Active header panel background color for view

     File \CRMWeb\ _forms\controls\form.css.aspx

TR.ms-crm-Form-SubGrid-viewRow

{

background-color:   #bef14f;

}

3. Background color and text color for view sort columns, with modified divider color

     File \CRMWeb\_common\styles\theme.css.aspx

.ms-crm-List-Header

{

<% = this.GetStyleCss(CrmTheme.Current.Grid.Header) %>

background-image: url("null");

background-color:   #76d3ee;

color: #3e4d6b;

}

File \CRMWeb\_grid\ AppGrid.css.aspx (for text color):

label.ms-crm-List-Sortable

{

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

<% if (CrmStyles.IsRightToLeft) { %>

text-align:right;

<% } %>

color: #3e4d6b;

}

    File \CRMWeb\_common\styles\global.css.aspx  – for white color dividers between the columns.

             .ms-crm-ImageStrip-resize{background:#ffffff;width:2px;height:14px;overflow:hidden;}

 .ms-crm-ImageStrip-bar_line{background:#ffffff;width:2px;height:14px;overflow:hidden;}

4. View module panel background color

     File \CRMWeb\_common\styles\theme.css.aspx

        .ms-crm-List-Title

        {

        <% = this.GetStyleCss(CrmTheme.Current.Grid.TitleArea) %>

        background-color:   #84b38e;

        color: #3e4d6b;

        }

        span.ms-crm-View-Name

        {

        <% = this.GetStyleCss(CrmTheme.Current.Grid.ViewName) %>

        color: #3e4d6b

        }

5. Navigation section header background and text color

       File \CRMWeb\appnav\appnavbar.css

div.ms-crm-NavBar-Title

{

border-bottom: 1px dotted #A5ACB5;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b73c0, endColorstr=#2361a1);

}

nobr.ms-crm-NavBar-Header-Title

{

vertical-align: middle;

font-weight:    <%= WebUtility.GetFontResourceForStyle("General.Bold.font_weight")%>;

font-size:      <%= WebUtility.GetFontResourceForStyle("General.14px.font_size")%>;

color                      :          white;

overflow              :       hidden;

text-overflow:  ellipsis;

display  : block;

}

6. Navigation section items background color and selected color

       File \CRMWeb\appnav\appnavbar.css

LI.ms-crm-NavBar-Subarea

{

height : 16px;

line-height : 16px;

margin-left: 3px;

margin-right: 3px;

padding: 1px;

background-color: #c4d1f5;

}

LI.ms-crm-NavBar-Subarea-Hovered

{

padding: 0px;

border: 1px solid #61A6E4;

}

LI.ms-crm-NavBar-Subarea-Selected

{

padding: 0px;

border: 1px solid #A7CDF0;

background-color: #2361a1;

}

7. Active List Tool background color in dashboards

       File CRMWeb\_static\css\1033\Cui.css

.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-cg-t{

color:#3e4d6b;

background-color:#bef14f;

}

8. Active/ Default background color tabs

       For selected tab:

.ms-cui-tt-s > .ms-cui-tt-a{

border-color:#b6babf;

background-color: #c2f259;

color:#601704 !important;

}

       For all tabs:

.ms-cui-tt-a{

margin-top:20px;

color:#6c6e70 !important;

border:1px solid transparent;

border-bottom:0px;

display:block;

cursor:default;

background-color: #0578bc;

color:#f8fa5b !important;

}

Here is a sample re-branded landing page. With changes to about 5 files, we are able to get our dynamics crm user interface aligned with an external application's UI. The image below also has changes to the logo, which is an important part of user experience (here is a good example for changing the logo).

There is a feature request in MS Connect (ID 480469) that talks about custom logos, and is a possibility in a future release. So if you have some time, please go to MS Connect and vote for it!

Before I bid adieu, let me reiterate that these changes are unsupported, meaning a rollup update could not only replace the files, but might change the way the css is rendered. Thanks for reading!