Web Part with Rounded Corners

I’ve frequently used Heather Solomon’s post on creating rounded web part corners for web part titles for WSS and MOSS. However, I discovered that the classes changed slightly in SharePoint 2010. I’ve made some modifications to Heather’s classes which should help you render your new web part titles.

/* Provides the repeating background for the majority of the header. */
.ms-WPHeader td{
   background: url('WPHeaderMiddle.jpg') repeat-x;
   margin: 0;
   padding: 0;
   height: 30px;
}

/* Removes any background from the drop down arrow and the checkbox on the right side of the header, as well as the spacer cells before and after the header. */
.ms-WPHeader .ms-WPHeaderTdSelection,
.ms-WPHeader .ms-WPHeaderTdMenu,
.ms-WPHeader .ms-wpTdSpace {
   background-image:none;
}

/* Right rounded corner */
.ms-WPHeader TD h3 {
   background: url('WPHeaderRight.jpg') no-repeat top right;
   margin: 0;
   padding: 7px 7px 0px 0px;
   height: 30px;
   color: #FFFFFF;
}

/* Left rounded corner */
.ms-WPHeader .ms-WPHeaderTd span:first-child {
   background: url('WPHeaderLeft.jpg') no-repeat top left;
   padding-top: 7px;
   padding-left: 25px;
   height: 30px;
}

/* Gets rid of the underline that shows up under the header */
tr.ms-WPHeader td{
   border-color: transparent;
}
About Admin

Owner of Savvy Technical Solutions

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.