Hmmm, what to do. There are plenty of techniques discussed on the web for achieving this outcome, but often the basis for these techniques is to start with clean, web-standards compliant HTML. That's certainly not what SharePoint provides - I needed to work with the HTML that is created by the mixture of master pages and user controls, and did not want to override standard elements for this styling exercise. One aim was to minimize the changes, if any, to the master page.
After a few minutes (hours?) experimentation I derived the jQuery statements to apply rounded corners to the menu. This of course also required adding references to the jQuery and jQuery.round libraries in the master page - so it was necessary after all to change that page!
The statements were:
$("div.ms-quickLaunch h3.ms-standardheader span div.ms-quicklaunchheader").css("background-color", "#c1ecff").corner("top 7px");
$("table.ms-recyclebin:last td").corner("bottom 7px");
These statements, together with modifications to some of the other CSS styles, resulted in the following look for the quick launch menu:
But then I came across a very annoying behaviour. Imagine the following scenario:
- I view a page containing this menu in one tab in IE7
- Then I open another tab in IE7 and navigate around any page in that second tab
Not an unusual behaviour really. But on returning to the first tab displaying the SharePoint page with menu, this is what the menu then looked like:
window.onfocus = ReapplyQuickLaunchCorners;
$("div.ms-quickLaunch h3.ms-standardheader span div.ms-quicklaunchheader>div").remove();
Not a nice solution (OK, it's a hack!) but it works and I ran out of time.
So where am I leading with this post - well, just to illustrate the great things you can do with jQuery to mould SharePoint. Sometime I'll blog about using jQuery for AJAX calls to the MOSS profile search web services, but that's for another time.....