2

we created an own color-palette and theme and uploaded that to our server. So far so good - now we try to use some of the sharepoint default images (like the big plus sign above lists for adding elements) inside of a custom visual webpart.

The question is: how do we get the location of the themed pngs? I tried this here but had to notice, that the bunch of numbers changes:

<span class="ms-list-addnew-imgSpan20">
  <img class="ms-list-addnew-img20" id="idHomePageNewItem-img"
       src="<%: Web.ServerRelativeUrl + "_catalogs/theme/Themed/B33ABC55/spcommon-B35BB0A9.themedpng") %>?ctag=2"/>
</span>
5

There are two possibilities to get the ThemedImageUrl of the spcommon.png File. You can use C# Code and the Method GetThemedImageUrl() which was allready mentioned.

But SharePoint 2013 also provides a new Control called ThemedForegroundImage. Take a look how to use it:

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" runat="server" CssClass="my-class" ID="myElementId" />

And the following HTML is the Result of this Control:

<img id="myElementId" class="my-class" src="/_catalogs/theme/Themed/1D65FA0B/spcommon-B35BB0A9.themedpng?ctag=0" />

For those how loves JavaScript. Yes it is also possible to get the ThemedImageUrl using JavaScript. Therefore you have to call the following Method which return the requested Url:

GetThemedImageUrl('spcommon.png')

I have written a blogpost about this topic. But this post is currently only available in German. But there you will find some screenshots.

http://msscorner.de/2013/07/11/how-to-use-a-themable-sharepoint-image/

| improve this answer | |
  • That's a nice solution, too :) Since i like that more than mine, you get the credit. – TGlatzer Jul 11 '13 at 9:26
  • Thanks! It is also possible to get the ThemedImageUrl using JavaScript. You only have to call the following Method which return the Url: GetThemedImageUrl('spcommon.png') – Falco O Jul 11 '13 at 9:46
1

After digging a little bit into Sharepoint Theming I found the following gem:

SPUtility.GetThemedImageUrl(SPUtility.ContextImagesRoot + "spcommon.png", "spcommon")

This will return a correctly themed image as SP itself will use it above lists.

MSDN documentation here

| improve this answer | |
0

working with this code:

SPUtility.GetThemedImageUrl(SPUrlUtility.CombineUrl(SPUtility.ContextImagesRoot, "spcommon.png"), "spcommon"); 
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.