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?
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;
}
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!
