Share

CRM 2011–Changing the Form Header and Footer Colors by

CRM 2011 has a beautiful default theme.  Microsoft has already organized the CRM 2011 folder structure to support themes, but currently only supplies the Silver theme.  Office 2010 on the other hand contains Silver, Blue, and Black.

themes

 

Today we aren’t going to modify the entire theme, but modify the form header and footer.  The code I’m going to include is a small gradient, but you could choose a solid background or any color you’d like.  I was going to use a Clemson, I mean Customer Effective, Orange, but instead focused more on the blue theme look.

 

Before

before

 

After

after

 

Adding our CSS Web Resource

Granted this change was very minor, but you could do about anything you wanted to with it.  To accomplish this basic change you must first upload a CSS web resource (I named mine new_header.css) with the following styling:

.ms-crm-Form-HeaderContainer{
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);
}

.ms-crm-Form-Footer{
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);
   background-image: none;
}

Note: The filter property is an IE specific CSS attribute.  It isn’t supported in any other browsers (they will just ignore it), but Internet Explorer 7+ supports it just fine.

 

Modifying the OnLoad

Our next step is to modify the onLoad to inject the CSS file.  We’ll do this by adding the following JavaScript to a web resource:

function load_css_file(filename){
   var fileref = document.createElement("link")
   fileref.setAttribute("rel", "stylesheet")
   fileref.setAttribute("type", "text/css")
   fileref.setAttribute("href", filename)
   document.getElementsByTagName("head")[0].appendChild(fileref)
}

function myFormOnLoad(){
   load_css_file('/WebResources/new_header.css');
}

 

Changing the Form Properties

Finally we need to change the form properties to include this JavaScript web resource in the library and add our “myFormOnLoad” function to the OnLoad Event for the Form:

image

 

Conclusion

After going through this blog, hopefully you will see how easy it is to change the form header, footer, or anything else.  By embedding a CSS file, our ideas are our only limits.  Hope you enjoy!