{"id":3,"date":"2010-05-02T16:50:10","date_gmt":"2010-05-02T14:50:10","guid":{"rendered":"http:\/\/www.itidea.nl\/wordpress\/?p=3"},"modified":"2015-09-08T20:33:17","modified_gmt":"2015-09-08T18:33:17","slug":"customize-rating-icons-for-sharepoint-2010","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/customize-rating-icons-for-sharepoint-2010\/","title":{"rendered":"Customize rating icons for SharePoint 2010"},"content":{"rendered":"<div id=\"scid:0767317B-992E-4b12-91E0-4F059A8CECA8:845939cd-74c0-4b2b-a491-082a6692869c\">In SharePoint 2010 the rating icons are default displayed as stars:\u00a0<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"57\" class=\"alignnone size-full wp-image-5\" title=\"ratingstars\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/ratingstars.png\" alt=\"\" \/>\u00a0<\/div>\n<div>Of course these can be changed: with SharePoint Designer, but better with a feature.<\/div>\n<div>There are four images used to display the ratings:<\/div>\n<ul>\n<li>2 images for displaying rating:<br \/>\nratings.png<br \/>\n<img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"16\" class=\"aligncenter size-full wp-image-91\" title=\"Ratings\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratings.png\" alt=\"\" srcset=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratings.png 448w, https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratings-300x10.png 300w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><br \/>\nratingsrtl.png<br \/>\n<img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"16\" class=\"aligncenter size-full wp-image-96\" title=\"Ratingsrtl\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratingsrtl.png\" alt=\"\" srcset=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratingsrtl.png 448w, https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/Ratingsrtl-300x10.png 300w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><\/li>\n<li>2 images for hovering\/selecting rating (enlarged):<br \/>\nratingsempty.png <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" class=\"size-full wp-image-92 alignnone\" title=\"RatingsEmpty\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/RatingsEmpty.png\" alt=\"\" \/><br \/>\nratingsnew.png <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" class=\"alignnone size-full wp-image-93\" title=\"RatingsNew\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/RatingsNew.png\" alt=\"\" \/><\/li>\n<\/ul>\n<p>You can find these images in the 14 hive, images folder.<br \/>\nMake your custom icons (16&#215;16), I prefer (the free) Paint.NET program. Just open the original icons, save them with another name and make your own of them.<\/p>\n<h4>How to change these images by SharePoint Designer<\/h4>\n<div>Open the site in SharePoint Designer.<\/div>\n<div>Select Site Options in the ribbon:<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"76\" height=\"119\" class=\"size-full wp-image-85 alignnone\" title=\"SiteOptions\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/SiteOptions.png\" alt=\"\" \/><\/div>\n<div>\u00a0<\/div>\n<div>\u00a0In the Tab parameters you can find the locations of the images by name value pairs. Here you can change the images to your own ones. Recycle application pool to see the changes.<\/div>\n<h4>How to change these images by a feature<\/h4>\n<p>Create an empty SharePoint 2010 project with Visual Studio 2010 and add a site collection scoped feature.<br \/>\nAdd a SharePoint Images Mapped folder and add your images to this folder. Note: Visual Studio adds a subfolder with the name of your project to your and SharePoint\u2019s images are not messed up, nice!<\/p>\n<p>Add an event receiver to your feature to set the properties of the images.<br \/>\nUncomment the FeatureActivated method and add code:<br \/>\nSPSite site = properties.Feature.Parent as SPSite;<br \/>\nSPWeb web = site.RootWeb;<br \/>\n\/\/preserver original ones<br \/>\nweb.AllProperties[&#8220;ratings_imagestripurl_original&#8221;] = web.AllProperties[&#8220;ratings_imagestripurl&#8221;];<br \/>\nweb.AllProperties[&#8220;ratings_newratingiconurl_original&#8221;] = web.AllProperties[&#8220;ratings_newratingiconurl&#8221;];<br \/>\nweb.AllProperties[&#8220;ratings_emptyiconurl_original&#8221;] = web.AllProperties[&#8220;ratings_emptyiconurl&#8221;];<br \/>\n\/\/set new ones<br \/>\nweb.AllProperties[&#8220;ratings_imagestripurl&#8221;] = &#8220;_layouts\/images\/ITIdea.CustomRatings\/RatingsFC.png&#8221;;<br \/>\nweb.AllProperties[&#8220;ratings_newratingiconurl&#8221;] = &#8220;_layouts\/images\/ITIdea.CustomRatings\/RatingsNewFC.png&#8221;;<br \/>\nweb.AllProperties[&#8220;ratings_emptyiconurl&#8221;] = &#8220;_layouts\/images\/ITIdea.CustomRatings\/RatingsEmptyFC.png&#8221;;<\/p>\n<p>web.Update();<\/p>\n<p>Uncomment the FeatureDeactivating method and add code:<br \/>\nSPSite site = properties.Feature.Parent as SPSite;\ufffd<br \/>\nSPWeb web = site.RootWeb;\ufffd<br \/>\nweb.AllProperties[&#8220;ratings_imagestripurl&#8221;] = web.AllProperties[&#8220;ratings_imagestripurl_original&#8221;];\ufffd<br \/>\nweb.AllProperties[&#8220;ratings_newratingiconurl&#8221;] = web.AllProperties[&#8220;ratings_newratingiconurl_original&#8221;];<br \/>\nweb.AllProperties[&#8220;ratings_emptyiconurl&#8221;] = web.AllProperties[&#8220;ratings_emptyiconurl_original&#8221;];<br \/>\nweb.AllProperties.Remove(&#8220;ratings_imagestripurl_original&#8221;);<br \/>\nweb.AllProperties.Remove(&#8220;ratings_newratingiconurl_original&#8221;);<br \/>\nweb.AllProperties.Remove(&#8220;ratings_emptyiconurl_original&#8221;);<\/p>\n<p>web.Update();<\/p>\n<p>Deploy and activate the feature and recycle the application pool.<br \/>\nThe new custom rating icons are visible and ready to use!<br \/>\nWhen you deployed the feature, check the Site Options in SharePoint Designer and you will see the original and newly added properties:<\/p>\n<p style=\"text-align: center;\"><a href=\"file:\/\/\/C:\/Users\/A.T.J.%20Boerboom\/AppData\/Local\/Temp\/WindowsLiveWriter1286139640\/supfiles66E4B5\/image14.png\"><\/a><img loading=\"lazy\" decoding=\"async\" width=\"244\" height=\"124\" class=\"aligncenter size-full wp-image-97\" title=\"SiteOptionsProperties\" src=\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2010\/05\/SiteOptionsProperties.png\" alt=\"\" \/><br \/>\nAfter deactivating the feature the original images are set again (and iisreset).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In SharePoint 2010 the rating icons are default displayed as stars:\u00a0 \u00a0 Of course these can be changed: with SharePoint Designer, but better with a feature. There are four images used to display the ratings: 2 images for displaying rating: &#8230; <a class=\"more-link\" href=\"https:\/\/www.itidea.nl\/index.php\/customize-rating-icons-for-sharepoint-2010\/\">Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[42,21,6],"class_list":["post-3","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2010","tag-sharepoint-2010","tag-sharepoint-designer-2010","tag-visual-studio"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":36,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":2032,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/3\/revisions\/2032"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}