I spent over a week making this work…email me if you need images. cyberbrutus@gmail.com
You can change Chrome Setting to show or hide the header.
This script finds all the web parts on a particular page and injects CSS that rounds the corners. I placed it in Master Page to avoid pasting code over and over again..
Step one: Save the following JS in a javascript file. Name it ‘RoundedCorners.js’ Make sure you have JQuery installed !
function RoundTheCornersJQuery(){
// 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”.
try
{
$(“div[id^=WebPart]“).not(‘div[id=WebPartAdderUpdatePanelContainer]‘).parent().parent().parent().parent().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
var wpDisplay;
$(“.wp”).each(function(){
wpDisplay = $(this).css(“display”);
if(wpDisplay!=”none”){
if($(this).hasClass(“wpTitleBorder”)){
$(this).before(‘<div><div></div></div>’).after(‘<div><div></div></div>’);
}
else if($(this).hasClass(“wpBorderOnly”)){
$(this).before(‘<div><div></div></div>’).after(‘<div><div></div></div>’);
}
}
});
}
catch(err)
{
}
}
Step 2:
Add the following script to the page where you want rounded corners. I have JQuery and RoundedCorners.js file installed in ‘Scripts Library’ folder. Change the folder name accordingly.
<script type=”text/javascript”>
if(typeof jQuery==”undefined”){
var jQPath=”/Scripts Library/”;
document.write(“<script src=’”,jQPath,”jquery-1.4.4.min.js’ type=’text/javascript’><\/script>”);
}
</script>
<script type=”text/javascript”>
var jsPath=”/Scripts Library/”;
document.write(“<script src=’”,jsPath,”RoundedCorners.js’ type=’text/javascript’><\/script>”);
_spBodyOnLoadFunctionNames.push(“RoundTheCornersJQuery”);
</script>
Step 3: Sit back and enjoy !
Thanks for the post… Your solution help me a lot..