iMadalina on .Life

Yes, just as the title reads:
- no custom webparts
- only css styles and images
- any webpart

Lately I have been searching the web for solutions regarding rounded corner webparts. I want to be able to use this solution on any site - so JPEG images as corners are out of question, since I need the webpart displayed on any background. PNG only work in IE7 and above, so first drawback is at the corner.

If you tried working on this much desired skin, you know that the tag layout of the webpart header is not very complex, so you need to play around with CSS selectors and margins and tricks, but none of these combined really does it.

Well here is my trick: the next image is the left corner of the webpart.




If you set this image as background for a TD, the image will stretch as far as the cell goes, so it won't overlap the right corner of the webpart header. You have to make it wide enough for (almost) any resolution/page width/webpart width to display correctly. One the other hand though, many sites today have a fixed width of the main area content, so there you go - you can anticipate how wide the webpart can get.

You also need the right corner image:

Of course, you can use an image that has rounded corners both at the top and the bottom.

And here are the classes:

.ms-WPHeader
{
 background-color:transparent;

}

tr.ms-WPHeader TD /* right corner */
{
 background-color:transparent;
 background-image:url('wpright2.png');
 background-repeat:no-repeat;
 background-position:right top;
 text-align:left;
 vertical-align:top;
 width:35px;
 height:26px;
 margin-top:-1px;
 overflow:visible;
 margin-right:10px;
}

.ms-standardheader.ms-WPTitle /* left corner */
{
 background-color:transparent;
 background-image:url('wpleftlarge.png');
 background-repeat:no-repeat;
 text-align:left;
 padding-left:25px;
 height:25px;
 }

.ms-standardheader.ms-WPTitle A:link, .ms-standardheader.ms-WPTitle A:visited /* title area */
{
 background-color:transparent;
 background-image:none;
 }

.ms-WPHeader DIV /* right corner action arrow */
{
 background-color:transparent;
 background-image:none;
 
 text-align:left;
 width:14px;
 
 overflow:hidden;
 vertical-align:bottom;
 margin-right:10px;
 margin-top:-1px;
 border:0px;
}

.ms-WPHeader TD /* gets rid of the blue bottom border (present in default style)
      under the web part header*/
{
 border: 0px;
}

The IE result:

The Mozilla result:

In Mozilla there is one issue: the webpart actions arrow on the right doesn't recognize the right margin value, so it's right on the edge.

And there you have it. Unfortunately with the drawback of a wide image load, fortunately a solution.