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

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!

Comments

  1. Teaisformugs on

    Hi,
    This looks fantastic but I am struggling to get it to work. I am copying and pasting the code here and trying to apply it to the Contacts form in CRM but am presented with this error message:
    “There was an error with this field’s customized event
    Field:window
    Event:onload
    The value of the property ‘myFormOnLoad’ is null or undefined, not a Function object.”
    Please could someone help? Are there sections of the code posted here that I should be modifying? Many thanks.

    Reply
  2. J00MZ on

    what needs to be accessed for customizing the form color itself?
    it’s obviously similiar to accessing the header at: “.ms-crm-Form-HeaderContainer”, I just can’t find it…

    Reply
  3. Paul Way on

    @J00MZ
    Yeah, that one is a little tricky. Your best bet is to use “ms-crm-InlineTab”.
    There is a small sliver that you may need to get using “ms-crm-Form tbody”
    I’m not sure what you are trying to do specifically, but if you are going for a full gradient, then you’ll need to also mark
    “.ms-crm-InlineTabContainer { background-color: transparent; }”
    If you don’t mind, post a screenshot or link when you’re done.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *