July 17, 2008

Microsoft CRM 4.0 and CSS Styling

Further to the excellent post HERE by Stunnware,  I just wanted to add my $0.10 worth.

CRM uses CSS styling to achieve much of the look and feel of the application. Therefore, it stands to reason that you can change this look and feel to suit yourself. Well, yes and no, so here goes.

Obligatory Warning : This is an unsupported customization. If you wish to do what I have done, I suggest you take a backup of the relevant files for reference. Also, as Stunnware has pointed out, future upgrades and hotfixes may not be applied correctly once you begin customizing the core files so take a backup anyway if you intend to keep your changes. This way, you can always change back temporarily to accommodate a hot fix and then re-install the sliced/diced file when you are ready.

Proof of Concept

Is it in fact possible to change the look and feel of Dynamics?

Judge for yourself....

image

Well, yes is the answer and by the way (Yech!)

How do you change the Look and Feel?

Well, Stunnware has suggested that you change the individual styling of the classes and paste this into the <head> section of Homepage.aspx under the _root folder. This is fine, but all those classes have to be held somewhere. Well, they are...

Check out wwwroot\_grid\AppGrid.css.aspx (see below)

<%@ Page Language="c#" Inherits="Microsoft.Crm.Application.Pages.Common.CrmStyles"  %>
<%@ OutputCache Duration="60000" Location="Client" VaryByParam="lcid" %>
<%@ Import Namespace="Microsoft.Crm.Application.Pages.Common" %>
 
table.ms-crm-ListControl
{
behavior: url(/_static/_grid/grid.htc) url(/_static/_grid/appgrid.htc) url(/_static/_grid/presence.htc);
border: solid 1px #6699CC;
height: 100%;
width: 100%;
table-layout: fixed;
background-color:#FFFFFF;
}
 
table.ms-crm-ListControlEx
{
behavior: url(/_static/_grid/grid.htc) url(/_static/_grid/appgrid.htc)  url(/_static/_grid/presence.htc);
height: 100%;
width: 100%;
table-layout: fixed;
background-color:#FFFFFF;
}
.ms-crm-List-Data
{
table-layout: fixed;
width: 100%;
behavior: url(/_static/_grid/appgrid_defaultdata.htc);
}
 
.ms-crm-ListArea
{
height: 100%;
width: 100%;
table-layout: fixed;
background-color:#FFFFFF;
}
.ms-crm-List-DataBody
{
HEIGHT:100%;
}
 
.ms-crm-List-DataBodyEx
{
HEIGHT:auto;
}
 
.ms-crm-List-DataArea
{
OVERFLOW-X:auto;
OVERFLOW-Y:auto;
width:100%;
height:100%;
background-color: red;
/*background-color: #FFFFFF;*/
}
 
.ms-crm-List-DataAreaEx
{
OVERFLOW-X:auto;
height:100%;
behavior:    url(/_static/_grid/rowsbeforescrolling.htc);
}
 
 
 
.ms-crm-List-RefreshButton
{
table-layout:        fixed;
height:                20px;
width:                16px;
margin-bottom:        -20px;
table-layout:        fixed;
position:            relative;
display:            none;
}
 
.ms-crm-List-RightMarker
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right: 2px;
<% } else { %>
padding-left: 2px;
<% } %>
}
 
 
.ms-crm-List-Paging
{
color:        #666666;
<% if (CrmStyles.IsRightToLeft) { %>
text-align: left;
<% } else { %>
text-align: right;
<% } %>
 
}
 
a.toolbarbutton
{
text-decoration: none;
border: none;
}
 
a.toolbarbutton:link img
{
text-decoration: none;
border: none;
}
 
a.toolbarbutton:visited img
{
text-decoration: none;
border: none;
}
 
a.toolbarbutton:active img
{
text-decoration: none;
border: none;
}
 
a.toolbarbutton:hover img
{
text-decoration: none;
border: none;
}
 
td.ms-crm-List-Sortable
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right: 8px;
text-align:right;
<% } else { %>
padding-left: 8px;
<% } %>
cursor: hand;
}
 
th.ms-crm-List-Sortable
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right: 8px;
text-align:right;
<% } else { %>
padding-left: 8px;
<% } %>
cursor: hand;
}
 
img.ms-crm-List-Sortable
{
vertical-align: middle;
visibility: hidden;
<% if (CrmStyles.IsRightToLeft) { %>
filter:FlipH();
<% } %>
}
 
nobr
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
<% if (CrmStyles.IsRightToLeft) { %>
text-align:right;
<% } %>
}
 
.ms-crm-List-Header
{
width: 100%;
height: 21px;
background-color: #F0F0F0;
table-layout: fixed;
border-bottom:1px solid #999999;
}
 
.ms-crm-List-DataColumnHeader
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right: 8px;
<% } else { %>
padding-left: 8px;
<% } %>
}
 
.ms-crm-List-Row
{
padding-top: 1px;
margin-bottom: 1px;
height: 21px;
border-bottom: 1px solid #C4DDFF;
}
 
.ms-crm-List-DataCell
{
border-bottom: 1px solid #c4ddff;
}
 
td.ms-crm-List-Disabled
{
border-bottom: 1px solid #dddddd;
cursor:default;
color: #999999;
}
 
.ms-crm-List-ResizeBar
{
cursor:        col-resize;
behavior:    url(/_static/_grid/columnresize.htc);
}
 
tr.ms-crm-List-StatusBar
{
height: 22px;
background-color: #F0F0F0;
}
 
table.ms-crm-List-StatusBar
{
width: 100%;
height: 22px;
table-layout: fixed;
width: 100%;
border-top:1px solid #999999;
}
 
 
.ms-crm-List-Index
{
width: 100%;
color: #000000;
cursor:    hand;
text-align: center;
table-layout: fixed;
border-top:    1px solid #999999;
height: 20px;
padding-top:4px;
background-color: #F0F0F0;
behavior: url(/_static/_grid/appgrid_jumpbar.htc);
}
.ms-crm-List-IndexItem
{
font-weight:        <%= GetFontResourceForStyle("AppGrid.css.aspx.TD.previewLabel.font_weight")%>;
color:                #000088;
}
.ms-crm-List-SelectedIndex
{
font-weight:        bold;
color:                #000088;
}
.ms-crm-List-DefaultIndex
{}
 
.ms-crm-List-Message
{
padding:1;
width:100%;
height:100%;
text-align:center;
COLOR: #999999;
behavior: url(/_static/_grid/appgrid_defaultdata.htc);
}
 
.ms-crm-List-PreviewLabel
{
vertical-align:    top;
font-weight:    <%= GetFontResourceForStyle("AppGrid.css.aspx.TD.previewLabel.font_weight")%>;
overflow:        hidden;
text-overflow:    ellipsis;
behavior:        url(/_static/_forms/styles/mouseover.htc);
}
.ms-crm-List-Spacer
{
width: 2px;
}
 
TD.previewData
{
vertical-align:     top;
overflow:        hidden;
text-overflow:    ellipsis;
behavior:        url(/_static/_forms/styles/mouseover.htc);
}
 
TD.previewDataNum
{
vertical-align:     top;
overflow:        hidden;
text-overflow:    ellipsis;
behavior:        url(/_static/_forms/styles/mouseover.htc);
direction:        ltr;
<% if (CrmStyles.IsRightToLeft) { %>
text-align: right;
<%} %>
}
 
TD.previewDataDatetime
{
vertical-align:     top;
overflow:        hidden;
text-overflow:    ellipsis;
behavior:        url(/_static/_forms/styles/mouseover.htc);
direction:        ltr;
<% if (CrmStyles.IsRightToLeft) { %>
text-align: right;
<%} %>
}
 
SPAN.previewDirSpan
{
direction:        ltr;
behavior:        url(/_static/_forms/styles/mouseover.htc);
}
 
.ms-crm-List-PreviewRow
{
padding:    5px;
height:        auto;
}
 
.ms-crm-List-Preview
{
width: 100%;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #999999;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#EAF1FF);
}
 
.ms-crm-List-PreviewCell
{
cursor: default;
padding-bottom: 2px;
border-bottom: 1px solid #dddddd;
<% if (CrmStyles.IsRightToLeft) { %>
padding: 0px 17px 2px 0px;
<% } else { %>
padding: 0px 0px 2px 17px;
<% } %>
}
 
TR.ms-crm-List-SelectedRow
{
padding-top: 1px;
margin-bottom: 1px;
height: 21px;
background-color: #a7cdf0;
color: #000000;
border-bottom: 1px solid #c4ddff;
}
 
SPAN.gridLui
{
text-decoration:    underline;
cursor:                hand;
}
 
IMG.ms-crm-Lookup-Item
{
height:                16px;
width:                16px;
vertical-align:        top;
<% if (CrmStyles.IsRightToLeft) { %>
margin-right:        2px;
margin-left:        5px;
<% } else { %>
margin-left:        2px;
margin-right:        5px;
<% } %>
}
 
IMG.ms-crm-Lookup-PresenceItem
{
height:                12px;
width:                12px;
margin-top:            2px;
vertical-align:        top;
<% if (CrmStyles.IsRightToLeft) { %>
margin-right:        2px;
margin-left:        5px;
<% } else { %>
margin-left:        2px;
margin-right:        5px;
<% } %>
}
 
 
col.ms-crm-List-NonDataColumnHeader
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right:0px;
<% } else { %>
padding-left:0px;
<% } %>
}
.ms-crm-List-StatusBar-Label
{
<% if (CrmStyles.IsRightToLeft) { %>
padding-right:8px;
<% } else { %>
padding-left:8px;
<% } %>
}
nobr.num
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
}
 
nobr.datetime
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
}

So, rather than adding the following to the Homepage.aspx page as suggested in this article which is technically fine.

<script language="JavaScript">
var nobrElements = document.getElementsByTagName("nobr");
 
if ((nobrElements != null) && (nobrElements.length > 0)) {
 
    for(var index in nobrElements) {
        var nobr = nobrElements[index];
 
        if ((nobr.className == "num") && (nobr.parentElement != null) && (nobr.parentElement.tagName == "TD")) { 
            nobr.style.textAlign = "right";
        }
    }
}
</script>

You need to add the following to AppGrid.css.aspx instead.

nobr.num
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
/*
Added by XXX 17/07/2008 - Alligns numbers - right
*/
text-align:right;
}
 

In my opinion, this method is much neater because you can keep all of your customizations in one place. You can remove the customizations very easily by renaming your cut and shut file to BAK and renaming your backup file to it's original designation. You dont have to interfere with the underlying code of the Homepage.aspx.

Jul 17, 2008 2:58:01 PM | CRM Configuring, CRM Development, CRM General, Javascript Snippets, Personal Comment

The comments to this entry are closed.

NEXT POST
Cannot promote E-mail in Dynamics because message is too big Problem If you receive e-mail messages from time to time that you cannot track in CRM 4.0. and you receive an error message stating the message is too big (even if it is only a one word email) then this...
PREVIOUS POST
Type Id's Poking around in the code, I found this under : wwwroot\_static\_common\scripts\Global.js var None = 0; var Account = 1; var ActivityMimeAttachment = 1001; var ActivityParty = 135; var ActivityPointer = 4200; var Annotation = 5; var AnnualFiscalCalendar = 2000; var...

ChocolateChip_Wookie

A systems developer with two children.

The TypePad Team

Search

Recent Comments