SharePoint Web Part Rounded Corners - CSS and no inheritance :)
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.
Hi thanks for this very nice tip. I was able to achieve the desired rounded corners display. But I’m having an issue where if a user doesn’t have enough permissions (e.g. reader -no action arrow), it will not show the right corner. Do you have a workaround for that?
Yes, there is a work around.
If you add ‘margin-right:10px;’ to the .ms-standardheader.ms-WPTitle class, the right corner will be round if the action arrow isn’t visible. The trick you have to pull is find out when the arrow isn’t shown.
To accomplish this, you have to write some javascript that looks in the page to find if the right corner of webparts is there. Here it is:
//find all WPHeaders in IE (DIV)
var arr = document.getElementsByTagName(“DIV”);
var str = 0;
for (i = 0; i < arr.length; i++) {
if(arr[i].className == ‘ms-HoverCellInActive’)
str = str + 1;
}
In Mozilla the right corner is not rendered as DIV, so you need to look for the IMG elements with the same className. So you need to look at the browser in javascript code and then write separate codes for IE and other browsers.
Next, you have to build a separate stylesheet for the “no action arrow” scenario and use javascript again to switch between stylesheets based on the value of str.
There it is. They say it’s robot labor, but it really isn’t.
thanks for the tutorial on how to get rounded corners for the header, madalina!
can you explain how you’d get a rounded footer/bottom to a web part?
Hi Norm,
I don’t think rounded corners for the bottom are possible to achieve. On the bottom of the webpart you have a single TD element. So what you can do is maybe round one of the corners, but not both.
This has been very helpful and we’ve implemented this in one of our designs but can you tell me why it looks less than beautiful in edit mode?
Thanks,
Marcy
It’s not that bad… it only shows the left corner rounded, and the right one square
This is an awesome post! Thank you so much!
- Celina
Hi. This has been a very helpful post. But after following the css above, i still didnt see my right corner. But it is actually there, its just been covered by the long left image. How do you overcome this ?
Hi Affendi,
The left image does not overlap the right corner. If you apply the styles to an unbranded (new) site, you will see that the right corner displays correctly. Maybe in the site you are applying the changes to the styles overlap with other css classes that already exist in your skin. You can try to put my clsses at the end of your *.css file, as the last changes made to an object are the ones applied.
Hi Madalina,
Thanks for posting this. It saved my day!
Cheers
Jag
Hi,
Great Post!. But i have one query.
The scenario is : I have created one MOSS 2007 publishing site. In this site i have created few Custom Web Parts. Now in each webpart i want the same output as u have described here.
And i am able to get the same output when user is logged in as Administrative. Now when user is having anonymous access at that time the dropdown will not display and cause of that the right side corner is not going to be display. I want to display that right side curve image when user is having anonymous access. Can u help me for this.
The answer is in the comments above. Good luck!
Hi, nice post! To fix the overlap, you can just set margin-right:7px; for the right corner action arrow, so it´s not pushes things out to the right.
Christian Stahl, Sweden
Hi Madalina,
This is brilliant, and works perfectly :-). The only problem i am having is when i add Document Library and Task webparts, the border underneath the header still exists.
I have tried adding border: 0px to the ms-standardheader.ms-WPTitle but no luck. Can you help me solve this
Thanks KC
Hi KC,
As i can’t input screenshots in here, I assume that the border you are talking about is the upper border of the Task list top bar (Title, Assigned To etc).
would be TH.ms-vh2 . If you add this class in the stylesheet and give the background-image style the ‘none’ value, the border dissapears.
To get rid of this border, I looked at the styles with IE Toolbar and found that the class to be blamed
I hope this is what you are talking about.
When I have a control that I don’t know how to style, I use IE Toolbar to look at all the styles that influence it and them modify the “responsible” one. IE Toolbar is a great tool.
Madalina,
Thanks! I was using the IE Toolbar, just looking at the wrong class
KC
Thanks for posting this.. Made my life better…