Recently I faced with the following problem: we had requirement for particular custom web part: its header should have appropriate color (which differs from default color of all another web parts headers). During investigation I found that there are not so much solutions, which match all our requirements. It is relatively easy to change header color of all web parts on your site: you just need to play with “ms-WPHeader” style as described here. But it is not so easy to apply change on particular web parts. E.g. solution described here assumes that you should create custom class – inheritor of WebPartZone (ASP.Net WebPartZone, not Sharepoint WebPartZone which is sealed) and custom Chrome type. It is interesting solution, but with it you will need to use custom classes everywhere you want to customize header of the web part. Also it assumes that all web parts from WebPartZone will have the same chrome (which is better comparing with the case of all web parts, but not perfect still).
Another solution shows how to use Content Editor web part in order to add a style which will be uniquely identify header of one particular web part (because of using identifier “MSOZoneCell_WebPartWPQ2” in style) and apply css style to this header. This is also interesting solution – unfortunately it requires manual actions.
In ideal I would want to have control over web part header occurrence inside web part itself. And of course changes made to this web part should not affect all other web parts.
I tried several ways to achieve the result (both server side and client side). E.g. I tired to use Control Adapter for WebPartZone – where you can override Render() method and add additional styles to the header (technically web part header is “tr” element as you will show below). It works but requires modification of .browser files and complicated regex manipulation. Also overridden Render() method when you render control to the string and then replace something in this string can affect performance.
After playing a bit with client side solution (using jquery) I decided to combine server side and client side approaches.
First of all we need to add jquery reference on our master page (into head section):
In order to understand what it does lets consider what is actually web part in document object model:
As shown on the picture it stops on the following element:
(parentUntil() method doesn’t include the element itself which matches condition). The rest is simple: we find all descendent “tr” elements which have “ms-WPHeader” class and change their css “background-color” property to the “Orange”:
That’s all: after this you will have possibility to specify web part header color in the code of web part itself.