Styling The Folders In Doc Lib Using JQuery and CSS

Objective:

In your SharePoint site, sometimes you need to stylize how the folders look like so that they no longer reflect the typical folder hierarchy layout. You can use a new image, color and font style in a specific document library view or in a web part page 

For example:

• We want to replace folder icon with a custom image
• We want the title font to be bold and with larger size

How to:

First let's prepare url to the new folder icon file. I uploaded "fact.gif" into Images library:
        http://{YourServerName}/publishingImages/fact.gif

Since we don't want to affect the entire SharePoint farm, we will use JQuery script to target specific page. You can use the script by registering the script file using ScriptLink control, or by putting the follwoing script inside a Content Editor Web part (CEWP).

1. To change the folder type icon only:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
_spBodyOnLoadFunctionNames.push("changeFolderUI");

function changeFolderUI() {
jQuery("a[href*='?RootFolder=']").find("img").attr("src", "http://{YourServerName}/publishingImages/fact.gif");
}

</script>

2. To change the folder name and add icon to it:

(This can be useful when hiding the Type field, allowing only folders to have icons in Name field)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>

_spBodyOnLoadFunctionNames.push("changeFolderUI");

function changeFolderUI() {
jQuery("a[href*='?RootFolder=']:not(:has(img))")
.css("font-weight", "bold")
.css("font-size", "16px")
.before("<img alt='arrow' src='{YourServerName}/publishingImages/fact.gif'/>");

}</script>




You can also step forward and apply multiple custom styling into folders depending on a folder name.
Have fun!