AAron nAAs

All MindsharpBlogs

AAron's SharePoint notepad

My Links

Archives

Blog Stats

My Sites

A Single Web Part Can Change It's Chrome

Here is an interesting trick for SharePoint 2003 (v2). You can modify the Chrome (the look) of a web part at scopes of global, page and even single web part level. Changing the appearance of ONE web part (without affecting the others on the same page) is tricky, but possible.

You can change the look of web parts globally by modifying the global style sheets (CSS).

You can modify the look of web parts on a specific page by creating <style> entries in a content editor web part on that page.

You can modify the look of a single web part by putting instance level styles on the page.

For an example of changing the appearance of one web part, put the following HTML code into a Content Editor Web Part:

Hey, I've got a RED title and border!
<style>
   #MSOZoneCell_WebPart_WPQ_ TABLE TR TD TABLE TR TD .ms-WPTitle SPAN { COLOR: #cc0033 }
   #MSOZoneCell_WebPart_WPQ_ TABLE TR TD.ms-WPBorder { BORDER-TOP-WIDTH: 2px; BORDER-LEFT-WIDTH: 2px; BORDER-LEFT-COLOR: #cc0033; BORDER-BOTTOM-WIDTH: 2px; BORDER-BOTTOM-COLOR: #cc0033; BORDER-TOP-COLOR: #cc0033; BORDER-RIGHT-WIDTH: 2px; BORDER-RIGHT-COLOR: #cc0033 }
</style>

Notice how _WPQ_ is used in the id of the “Zone Cell“ id references. Content Editor web parts provide the feature to automatically replace _WPQ_ to the unique identifier for the web part to allow you to keep HTML and Javascript (names, classes, ids, ...) from colliding with that of other web parts. So, if the above mentioned html is put into a Content Editor web part then the page may contain:

Hey, I've got a RED title and border!
<style>
   #MSOZoneCell_WebPartWPQ3 TABLE TR TD TABLE TR TD .ms-WPTitle SPAN { COLOR: #cc0033 }
   #MSOZoneCell_WebPartWPQ3 TABLE TR TD.ms-WPBorder { BORDER-TOP-WIDTH: 2px; BORDER-LEFT-WIDTH: 2px; BORDER-LEFT-COLOR: #cc0033; BORDER-BOTTOM-WIDTH: 2px; BORDER-BOTTOM-COLOR: #cc0033; BORDER-TOP-COLOR: #cc0033; BORDER-RIGHT-WIDTH: 2px; BORDER-RIGHT-COLOR: #cc0033 }
</style>

That HTML will cause CSS styles that apply ONLY to the 3rd web part on the page (order indeterminate and controlled by SharePoint). The difficult problem with this was to get the proper CSS anchor to affect only the items you want. If all tags had ids and styles, you could easily style whatever you wanted. In SharePoint's case, there just aren't enough. That is why the MSOZoneCell_WebPart_WPQ_ id is needed. It's one of the only unique identifiers that can be used to isolate the single web part. The rest of the tag stack (TABLE TR TD TABLE TR TD .ms-WPTitle SPAN) is to further isolate the tag within the web part that I want to affect.

I used a user control container (like SmartPart) to display web user controls, and had the control output a style chunk like the above (with _WPQ_) to highlight itself in RED when it needs to GRAB the user's attention. The user control container did need to know to do the replacement of _WPQ_ before output. (By the way, I also had the web part hide itself if the control chose to output an empty string).

Another thing I tried was to put a Content Editor Web Part on the page with hardcoded WPQ numbers. So, I would view the page source and find that the 4th web part (WPQ4) was the one I cared about. I then put a chunk of code in the Content Editor Web Part referencing the #MSOZoneCell_WebPartWPQ4 id, and the other web part was affected (without it's knowledge). This does work, but is subject to SharePoint's renumbering web parts... especially when you add or move web parts around the page. It also shifts the numbers when you go into edit page mode.

Note: This technique can be used to work relatively gracefully, especially if you have no other choices. But be warned, it is easy to abuse and cause you problems if you assume web part ordering.

posted on Friday, July 20, 2007 3:23 PM

Feedback

# re: A Single Web Part Can Change It's Chrome 9/20/2007 4:46 PM Gavin

Hey Aaron,

Have you come across a MOSS 2007 equivalent way of doing this? I'm actually trying to figure out if it's possible to border with images to give a rounded corners look and feel to webparts....

Cheers
Gavin

# Overriding the webpart container 10/23/2007 2:17 PM Chad

Has anyone figured out how to override the webpart container rendering? I want to custom draw it so that all the corners are rounded and I have an icon on the top left of ther webpart.

Title  
Name  
Url
CAPTCHA
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments