SharePoint Custom Solution Branding and Tips – Part 2

This is part 2 on how to brand your SharePoint Solution. If you haven’t read my part 1, please do so here.

Often than not, you would want to include your custom List Definition/Instance to be provisioned into your Solution file. In SharePoint 2013, they’ve changed the Site Content page drastically and you can’t really Ignore the BIG BIG icon for each List/Library within your site.

sharepoint site content list icon image

It’s fancy and it’s sleek. So how can I create one for my own solution?

As usual, there isn’t gonna be much documentation provided in MSDN. And most of the time, you just got to crack your head and dig your way out. I’m writing this post here so that you can at least Find my article when you’re googling around.

How to set Image for your List Definition / List Instance

Assuming you have already created a SharePoint 2013 Project solution and added a List Definition.

Add SharePoint “Images” mapped folder into your Project as shown below

right click add image layout folder sharepoint

Prepare TWO icons and you must ensure that the following rules are followed:

  1. Both icons must have same file extension.
  2. One icon is in 16×16 pixel size and the other one is in 96×96 pixel size
  3. File Name of the 16×16 icon must starts with small I: “it” e.g. itmyfancyicon.png
  4. File Name of the 96×96 icon must starts with small L: “lt” e.g. ltmyfancyicon.png
  5. Both file names must be exactly the same except for the first character.

To better helping you to understand, I’m including the two images used below

itmyfancyicon.png itmyfancyicon  (16×16)                  ltmyfancyicon.png ltmyfancyicon (96×96)

After meeting these rules, you need to include them into the Images mapped folder and be placed into the same Folder. (Must)

sharepoint list icon image same folder

Lastly, go to the Elements.xml file of the list definition and modify the Image Attribute to point to “it” (16×16 pixel size) image as shown below. DO NOT specify the one that starts with “L”.

http://ahcheng.com/wp-content/uploads/2016/01/sharepoint-list-definition-image-url-attribute.png

Once you specified to the small “i” image, deploy it and you should see your List is having a nice and Correct images!

http://ahcheng.com/wp-content/uploads/2016/01/sharepoint-list-definition-image-how-to-set-it-properly.png

 

 

1 thought on “SharePoint Custom Solution Branding and Tips – Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *