Multiple Webpart CSS Customizations on the same page

It is very important for web graphic designers to understanding how Sharepoint works to the extend that they at the very least understand whats straight forward to do in MOSS 2007 and what will entail a heavy amount of customization.

One of my clients decided that since they had their own design team in place they would do the designs themselves and then pass on some PSDs for us so that we could then incorporate the look and feel by customizing the css. So far so good. The designs they gave were also great but I had one problem with it.

One of the PSDs they sent had two webparts with different colour combinations. I found
Heather Solomon's CSS Reference Chart for SharePoint 2007 as a great starting point for overriding the look and feel but if I overode the css classes supplied by MOSS 2007, then it would change the look and feel of both the webparts. That presented a significant problem for me. I created a sample page on my test server and added a couple of Content Editor webparts inside one web zone, saved the page and opened it using Firefox. And I used firebug to see how the HTML was rendered. (Internet Explorer users can use IE Developer Toolbar). This is the default look and feel of the Sharepoint webparts using the default.master.


I then added a css specifically for this page because I did not want to customizations to effect any other part of the system.

<style type="text/css" media="all">
@import "test2.css";
</style>

Inspecting the two webparts in Firefox and you can see that .ms-WPHeader controls the look and feel of the header which come css. I start by overriding the background colour of .ms-WPTitle and place it in my css.

.ms-WPHeader {
   background:silver;
}

The net result is that my two webparts now looks like this.




As you can see from the image above that overriding ms-WPHeader from the core.css changings the background colour for the headers of both the webparts. The next thing to do is override the headers for the webparts individually. Again, inspecting Firefox, you will note that Sharepoint has associated ids to both your webparts. If there are no other webparts on this page then they will be called MSOZoneCell_WebPartWPQ1 and MSOZoneCell_WebPartWPQ2.

I change

.ms-WPHeader {
   background:silver;
}

into

#MSOZoneCell_WebPartWPQ1 .ms-WPHeader {
   background:silver;
}

and

#MSOZoneCell_WebPartWPQ2 .ms-WPHeader {
   background:orange;
}

with the net result being that my webparts will now look like this.



There is one major problem with this approach. We have no control over the ids associated to the webparts. If you were to add another webpart to the page, those ids might also change. Thats something you need to keep in mind. In my case, it was a one of thing for one specific page in the site and it worked fine for me.