Blog Categories

Subscribe to RSS feed


Styling Web Parts in SharePoint 2010 (Add round corners via CSS)

In previous versions of SharePoint it was impossible to add corners to a Web Part with just CSS (unless you were building sites for only the latest browsers). The best way was to style a container DIV on the Page Layout and put a Web Part Zone inside. Then, a Web Part in that zone would appear to have round corners. This method greatly reduces the flexibility of SharePoint because there can only be one Web part in each Zone for the effect to work.

Styling Web Parts in SharePoint 2010 has become much easier than in MOSS 2007. There are several reasons for this and I will highlight a few.

The addition of a style class on a cell that contains the entire Web Part gives a big advantage to adding styles. In MOSS this did not exist. This is helpful because now you can simply add a border, background image or color to the container cell with the class “s4-wpcell-plain” and it will be applied around and behind the body and header of the Web Part.

Another new addition is a style class on the last cell in the header of a Web Part. The one that contains the dropdown arrow for the menu. This allows you to target this cell and add a background image like a top right corner. Before you could not target this cell specifically which made it difficult to put a top right round corner image in that cell. The new class that has been added to this cell is: ms-WPHeaderTdMenu. The cell that contains the Web Part title now has a class of: ms-WPHeaderTd. There are a few more cells with the classes ms-WPHeaderTdSelection and ms-wpTdSpace but they only seen when the page is in edit mode so it is unnecessary to style these.

With these additions round corners and gradient backgrounds can easily be added to Web Parts without having to change the Page Layouts or create custom Web Parts.

Tags: , ,

Leave a Reply