Home > Work > #SP2010 web part rounded corners #SharePoint #PS2010 #ProjectServer #MSProject #in

#SP2010 web part rounded corners #SharePoint #PS2010 #ProjectServer #MSProject #in

At one of my clients I was asked to document how we achieved rounded corners on web parts. So as a result, I figured a blog post about it would be useful.

Now when I first implemented this (almost 2 years ago!) as the 2010 product RTM’d, I based it on the only blog post around at the time:

    The end result looks like this:

ChromeTitleAndBorder

NB: Please note that this version is slightly modified from the version supplied on the blog link above.

In my implementation I was using the jQuery version available at the time:

  • jQuery 1.5.1
  • jQuery UI 1.8.13

Although jQuery UI is not required, it is always good to have for those awesome calendar pop-ups just in case.

This may work with the newer versions of jQuery, but I haven’t tried it out yet.

Example CSS, JavaScript and rounded corner image files are provided at the bottom of the post.

So without further ado, lets go through how to achieve the rounded corners in SharePoint 2010:

What does the code actually do?

With every page refresh, the JavaScript code, determines where all the web parts on the page are and injects appropriate mark up (<DIV>) above and below each web part, ready to be styled by CSS.

Step 1. Upload your reference files

Personally I like to store all my custom files within the Style Library within SharePoint, but they can live anywhere within SharePoint as long as all users have read access to them.

So lets take a look at what we are storing.

Standard Plug-In Files:

  • jquery-ui-1.8.13.custom.css
  • jquery-1.5.1.min.js
  • jquery-ui-1.8.13.custom.min.js

You can download this version here:

The latest versions are available here:

Custom Files

  • <custom JavaScript file>.js
  • <custom CSS file>.css

These files are where we will implement the JavaScript and CSS code to produce the rounded corners on each web part.

Corner Image Files

The following files are used to create the rounded corner affect. To keep multi-browser support we are using this method, but you could replace them with CSS3 styling by changing the CSS code to achieve the same result.

  • WPBottomLeft.gif
  • WPBottomRight.gif
  • WPTopLeft.gif
  • WPTopRight.gif

Example files are provide below.

Step 2. Add your Master Page file references

Initially add the following references into <head> section of your Master Page, preferably just before the end tag </head>

<link type="text/css" href="/Style Library/jquery-ui-1.8.2.custom.css" 
rel="Stylesheet" />

<script src="/Style Library/jquery-1.4.2.min.js" 
type="text/javascript"></script>

<script src="/Style Library/jquery-ui-1.8.2.custom.min.js" 
type="text/javascript"></script>

Now the above references are just standard plug-ins available from the jQuery website, but we also need to add some of our own JavaScript / jQuery magic, which of course needs its own reference file.

<script src="/Style Library/<customJavaScriptFile>.js" type="text/javascript"></script>

We also need to reference a custom CSS file, so that we can associate the corner images we will be using etc…

Publishing Feature enabled?

Now if you are using the Publishing feature, you can place your custom CSS via the Site Settings interface:

Site Actions > Site Settings > Under Look and Feel – Click “Master Page”

Under the “Alternate CSS URL”, enter the URL for your custom CSS file, for example:

  • /style library/<customCSSFile>.css
    NB: This will ensure it is the last CSS file referenced within the Master Page to allow for overrides.

Publishing Feature not-enabled?

If you you do not have the publishing feature enabled (Office 365 P1 or SharePoint Foundation 2010 for example), you can add the reference into the Master Page also.

<link type="text/css" href="/Style Library/{customCSSFile}.css" 
rel="Stylesheet" />

Step 3. Adding the code

So now that we have our JavaScript, jQuery and CSS files setup in the Master Page, we can edit out custom files with the following code:

CSS Code (customCSSFile.css)

/* Web Part Chrome Styles – START */

.wpContainer {
padding-bottom:0px !important;
}
.wpTitleBorder, .wpBorderOnly {
background-color:#fff !important;
border-left:1px solid #c6c6c5 !important;
border-right:1px solid #c6c6c5 !important;
}
.ms-WPHeader td {
background-color:#ffffff !important;
border:0 !important;
padding:0 !important;
padding-top: 3px !important;
border-bottom: 1px #CECFCE solid !important;
}
h3.ms-WPTitle {
/* color:#36424a !important; */
font-size:15px !important;
font-weight:normal !important;
margin:-3px 0 0 0px !important;
padding:0 14px 4px 4px !important;
}
h3.ms-WPTitle a {
/* color:#36424a !important; */
font-size:15px !important;
font-weight:normal !important;
}
h3.ms-WPTitle nobr {
white-space:normal !important;
}
.ms-WPHeader td div.ms-HoverCellInActive {
margin:0 !important;
*padding:0 0 2px 0 !important; /* IE <8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive {
margin:0 !important;
*padding:0 0 2px 0 !important; /* IE <8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive img {
margin:0 0 2px 0 !important;
*margin:0 !important; /* IE <8 fix */
}
.ms-WPHeader img.ms-HoverCellInActive { /* Firefox */
padding:0 0 2px 0 !important;
}
.ms-WPHeader td .ms-HoverCellActiveDark {
border:0 !important;
margin:0 !important;
padding:0 0 2px 0 !important;
}
td.ms-WPBorder, td.ms-WPBorderBorderOnly {
border:0 !important;
padding:0px 0px !important;
}
.ms-WPBody {
font-family:Tahoma, arial, sans-serif !important;
font-size:11px !important;
padding:0 !important;
}
.ms-WPBody td, .ms-WPBody TD DIV, .ms-WPBody TD DIV A {
font-family:Arial, Tahoma, sans-serif !important;
font-size:11px !important;
}
.wpCornersTop {
background:url('/blog/Style Library/Images/WPTopRight.gif')
 top right no-repeat !important;
height:10px !important;
padding-right:10px !important;
}
.wpCornersTop div {
background:url('/blog/Style Library/Images/WPTopLeft.gif')
 0 0 no-repeat !important;
height:10px !important;
}
.wpCornersBtm {
background:url('/blog/Style Library/Images/WPBottomRight.gif')
 bottom right no-repeat !important;
height:11px !important;
padding-right:11px !important;
}
.wpCornersBtm div {
background:url('/blog/Style Library/Images/WPBottomLeft.gif')
 0 0 no-repeat !important;
height:11px !important;
}

/* Web Part Chrome Styles - STOP */

JavaScript / jQuery Code (customJavaScriptFile.js)

function wrapWebParts() {

//Find all divs (div.ms-WPBody) with an ID beginning
//with "WebPart". All web parts have unique IDs assigned
//to them, and they begin with "WebPart". Then traverse up
//the HTML document 4 levels and add the class "wp".

  $('td[id*=MSOZoneCell_WebPart]').children("table").addClass("wp");

//For web parts with the Title and Border chrome,
//add the class "wpTitleBorder" to the element
//with class "wp".

  $(".ms-WPBorder").parents(".wp").addClass("wpTitleBorder");

//For web parts with the Border Only chrome, add the class
//"wpBorderOnly" to the element with the class "wp".

  $(".ms-WPBorderBorderOnly").parents(".wp").addClass("wpBorderOnly");

//Find all table cells that have an ID beginning with
//'"MSOZoneCell" and add the class "wpContainer".

  $("td[id^=MSOZoneCell]").addClass("wpContainer");

//For web parts with the chrome type Title and Border or Border Only,
//add containers that can be used for rounded corners and other
//treatments

  //alert($(".wpTitleBorder").length);
  $(".wpTitleBorder").before('<div class="wpCornersTop"><div></div></div>')
     .after('<div class="wpCornersBtm"><div></div></div>');

  $(".wpBorderOnly").before('<div class="wpCornersTop"><div></div></div>')
     .after('<div class="wpCornersBtm"><div></div></div>');

  $("img[src*=/_layouts/images/blank.gif]")
    .attr("style", "display: none;");

  $('div[class=wpCornersBtm]').each(function() {
    var mainWPTable = $(this).prev();
    var inlineWidthStyle = mainWPTable.attr("style");
    var realWidthSplit = "";
    var realWidth = "";

    if (inlineWidthStyle != undefined) {
      realWidthSplit = inlineWidthStyle.split(":");
       realWidth = realWidthSplit[1].toLowerCase();
       realWidth = realWidth.replace("px", "");
       realWidth = parseInt(realWidth, 10);
       realWidth = realWidth + 13;

       $(this).attr("style", "width: " + realWidth + "px");
       $(this).prev().prev().attr("style", "width: "
          + realWidth + "px");
    }

  });

}

$(document).ready(function(){
   wrapWebParts();
});

And Finally…

The end result is this:

ChromeTitleAndBorder

If we break this down, the jQuery code has discovered each web part on the page, added a <div> above and below the web part and then the CSS has styled it with the supplied image files referenced in the style sheet.

WPImageExample

The code also takes into account the chrome type being used on the web part:

This results in the following:

Chrome Type: None

ChromeTypeNone

Chrome Type: Title and Border

ChromeTitleAndBorder

Chrome Type: Title Only

ChomeTypeTitleOnly

Chrome Type: Border Only

ChromeTypeBorderOnly

Code Downloads:

About these ads
  1. SJR
    November 30, 2012 at 23:19

    Very nice, I am stuck with IE8 and this approach worked for me after spending many hours with PIE… etc. Anyway to make the background a solid color? I changed this bit: .wpTitleBorder, .wpBorderOnly {
    background-color:#f2f2f2 !important;
    But I am left with white lines at the top and bottom. Awesome work thanks for sharing!!!

    -SJR

  2. SJR
    December 3, 2012 at 01:45

    Perhaps if I made those white pixels in the images transparent, the background of the webparts could be something other than white?

    Thx again,
    -SJR

  3. Bill Burke
    February 11, 2013 at 20:03

    Thanks for the post. I am a little confused. The standard files to download are;
    jquery-ui-1.8.13.custom.css
    jquery-1.5.1.min.js
    jquery-ui-1.8.13.custom.min.js

    But the Master Page file references are;

    I’ve tried this and changing the Master Page files references to the downloaded file names with no luck… can you assist? -bill

  4. Bill Burke
    February 11, 2013 at 20:04

    Sorry stripped out Master Page References… let me try again

    link type=”text/css” href=”/Style Library/jquery-ui-1.8.2.custom.css”
    rel=”Stylesheet”

    script src=”/Style Library/jquery-1.4.2.min.js”
    type=”text/javascript”></script

  5. November 13, 2013 at 11:12

    Reblogged this on Mute Expressions and commented:
    Great Post!

  6. November 13, 2013 at 11:13

    Reblogged this on The Geeky Code-Run and commented:
    Great Post!

  1. April 26, 2012 at 08:17

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,655 other followers

%d bloggers like this: