Advanced SharePoint Customization: Changing the Multi-Upload Control for Document Libraries

On November 18 2005 I posted that I had figured something out and would post the solution later that day. Evidently I didn’t get around to posting the solution. Karma kicked in today as I found myself with this issue once more – this time however I am posting the solution.

Problem:
When customizing a theme (This can be SPS.css(SPS2003) OWS.css(WSS2.0) OWSPers.css(MySite/Personal) or a custom theme.css you may have run into a problem trying to customize the “Tree View” for the Multi-Upload on a document library. The problem is that the tree-view of the control is using the same class as applied to the side-navigation (.ms-navframe).

In case you are wondering what I am talking about go to a document libary. Click upload document. Then click the Upload Multiple Documents Link. The left column where your file structure is listed. This is the area we are trying to customize.

3 Step Solution
You need to remove ANY REFERENCE to background-color or background-image from .ms-navframe (NOTICE: .ms-navframe is in the stylesheet twice so REMOVE one of them).
You need to use the class .ms-nav to manipulate the side-navigation bar background colour/image.
You need to change .ms-uploadcontrol to change the background-color/image of the multi-upload tree-view Remember: If you are pointing to a custom CSS in SPS2003, the DEFAULT SPS.CSS file is still being referenced and such you need to modify the background properties (remove) them from this file as well.

The reason?
For those that need a little extra explanation, there is some javascript on the multi-upload page which says “We are going to use the class .ms-navframe by default”. However if you remove the background properties completely from the .ms-navframe selector, THEN we will let you use the .ms-uploadcontrol class to manipulate the multi-upload tree-view.

In a perfect world I would think the .ms-upload class would be applied to the upload control by default no? Psst MS.

You may also like...

1 Response

  1. Erik Swenson says:

    Shane,

    I just ran into this yesterday as well. My fix was to change the BG color of the ms-navframe to what I wanted the tree view to be. I then add a 1px X 1px repeating bg image that I wanted to be shown in the side navigation area. However this approach does eliminate the option to have a different bg image in that area. The reason why this works is because the tree view does not display bg images.

    Thanks!

I would love to hear from you.

%d bloggers like this: