Branding Shared Document Library using XSLT in SharePoint 2010 step by step

Branding Shared Document Library using XSLT in SharePoint 2010 step by step 

While working on SharePoint Portal I faced urgent need for document library

Very much like out of the box SharePoint document library and same functionality

But the problem how I can style it and gain benefits from all great functionality it has.

I know there is different ways by styling the XSLT from SharePoint Designer and apply inline style for items but unfortunately some time SharePoint designer doesn't persist changes and sometimes it’s show you unclear error messages.

To solve the problem and make my changes persist I used Visual studio 2010 and SharePoint Designer 2010 and follow the pattern of trial and error till I get the solution I am looking for.

I used IE developer tool to see the CSS class name that XSLT control render then going back to XSLT and try to find the same class name.

The solution file (click here to download) contain

1.      XSLT file (customDocLibaray.xslt)
2.     CSS file  (CustomDocumentLibrary.css)

 I will use Visual studio 2010 and SharePoint 2010

 Visual Studio 2010

1. Create Empty SharePoint 2010 Project (XSLT-SharedDocument) or download.
2. Adding Mapped Folder to XSL (Template / Layouts/XSL)
3. Add XSLT file customDocLibaray.xslt
4. Delete everything from the file (customDocLibaray.xslt)

SharePoint 2010

1. Go the Web site (http://xxx/)
2. Open the Shared Document Library in Web Browser
3. Using Library settings create  slandered view :
1.  View Name : CustomLibaray
2. Select the following Column:
1. Type (icon linked to document)
2. File Size
3. Name (linked to document)
4. From Tabular view section uncheck (Allow individual item checkboxes)
5. From section item limit   enter 5 for the number of items … this for my case , you can enter any number as you wish
6. After creating the view you get custom view for shared document library as below image:

Go to any page and add web part from (categories >> List And Libraries >> Shared Documents)

From the menu select  Edit Web Part , a new window appear select the view we already create (CustomLibaray) after selecting the view your web Part page will  look like the below image

No we want start branding the Shared Document Library using SharePoint Designer 2010

1. Open  you site (http://xxx) using SharePoint Designer 2010
2. From Lists and Libraries select  Shared Document Library then from views select CustomLibaray
3. Right click Edit File in Advanced mode
4. Designer will open the view
5. From designer select the tag WebPartPages:XsltListViewWebPart as shown in image below
6. 
7. Then from Design Tap in top Menu in SharePoint  Designer  2010 select the menu Customize XSLT then Select Customize the Entire View as shown in image  bellow
8. 
9. From code behind remove all ddwrt:ghost="hide"  since it’s prevent persistence changes on XSLT.
10. On Designer select file size tag then  click edit tag as shown in image bellow ,change the class          ms-vh-div to class header-div
11. And do the same for other headers (Name and Type).
12. click on edit tag for header TD as bellow image:
13. And do the same for other header cell.

Note:

Sometimes Changing the TD class on designer will not persist the changes for that you have to change it from code file XSLT.

to avoid the persistence problem open the Code File XSLT and follow below instructions: 

1. Replace all vh-ms and vh-ms2 with value header-td
2. In header row using designer change the class for header row by                    replacing class="{concat('ms-viewheadertr',$dirClass)}" with  value class="header-row"
3. Replace ms-itmhover with rowhover
4. Finally Find the following section<xsl:when test="$Position mod 2 = 0">ms-alternating</xsl:when><xsl:otherwise></xsl:otherwise> And replace it with <xsl:when test="$Position mod 2 = 0">alternaterow</xsl:when><xsl:otherwise>row</xsl:otherwise>Here we add css class for row and for alternate row.

 Summary:

You have to replace the following classes in XSLT file:

1. header-div  replacement for  ms-vh-div 
2. header-td  replacement  for  ms-vh2 and ms-vh
3. row-hover replacement for rowhover
4. alternaterow replacement for ms-alternating
5. row is new class I add it to the gain more control on CSS
6. if you want change (here I  did not change anything) the Pager Style you can replace the following CSS classes:
1. ms-bottompaging
2. ms-bottompagingline1
3. ms-bottompagingline2

Final Steps:

1. Copy and Paste the <xsl:stylesheet tag from SharePoint Designer to the file customDocLibaray.xslt in visual  studio
2. Deploy solution
3. Go back to your site (http://xxx)
4. Edit the web Part Shared Documents
5. From Selected view select : CustomLibary
6. From Miscellaneous category add the link for your XSLT file (http://xxx/_LAYOUTS/XSL/customDocLibaray.xslt)
7.  Add the css file (CustomberDocumentLibaray.css) to style library of your application then from site settings apply it as below image
8. 

You will get this fully function Document Library:

I hope that you find it useful. 

Any comment or question is more than welcomed.