CRM 2011- Changing the Form Header and Footer Colors

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

image

 

After

image

 

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!

Post by: Paul Way, Customer Effective 

2 thoughts on “CRM 2011- Changing the Form Header and Footer Colors”

  1. Hi,

    I seem to have a problem using CRM Administrator user. When I open the form with other users, I can see the new colored header, but if I open the same form with CRM administrator, then it does not work.

    The page loads the header.css but it ignores the .ms-crm-Form-HeaderContainer.

    Any ideas?
    Tnx,
    L.

  2. I followed your instructions on changing the colours of header and footer with slight changes (I don't change the footer). The css file seems to get injected properly, and the script runs without errors, still no changes appear on the form.
    I work with latest rollup update CRM 2011, IE 8.
    I'm quite inexperienced in css, so naturally it somehow seems to me that the problem is in the css code. )))
    Could you clear out if I can use any other properties (apart from filter) safely.
    Also, what is this other library 'Library.js' you use in the form properties?

Comments are closed.

Show Buttons
Hide Buttons