Transparent Content Editor Webpart

One of our client come to us with a nice flash webpage design and starting to grumbling about how hard to maintain its content. They asked us for a solution which has stylist design and easy to maintain. I browsed through his website (the flash) and start thinking about how can Sharepoint solves his problem. Then, I come to the conclusion that the only thing we need is to apply background to Sharepoint’s page and modify transparency in webpart bos. The reason is, any webpart in Sharepoint actualy a DIV content. Hence, using appropriate style we can modify its stylishness. As usual I will use the simplest example to get you to the idea, whilst leaving other implementation on your own decision. Take a look at Content Editor Webpart (CE) Content editor webpart is basic webpart in Sharepoint. It only renders the HTML content inside DIV without performing any processing. It has “Rich Text Editor” (RTE) tools which generate the HTML content - so very easy for the editing process. An empty CE is a DIV with information and links its property editor. So when Webadmin click the link, it will show the RTE. Subsequently, edited CE is also a DIV with paragraph inside. The difference is class for the DIV, empty CE using “UserGeneric” class while edited CE using “ms-wpBody” class. Start Applying Background Background can be applied to the body or only to the content table. In this example I will guide you to apply background to content table. The class responsible for content table style is “ms-bodyareaframe” , add images background to the style. Create PNG for DIV’s Overlay Since back coloring DIV won’t suffer any good, then we will use PNG alpha transparency for the DIV. Create a PNG with any color for the transparency; a small pixel is enough, since we will use it as background. Recall for IE Filter in ms-wpBody class [http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters_transitions_entry.asp] Since IE 4.0 and above, we can apply various multimedia-style visual effect to the web page. We are going to utilize AlphaImageLoader and Alpha method from the filter. CE contents are boxed in DIV with ms-wpBody style. We will override default style from Sharepoint, so in HEAD section we add new ms-wpBody class.