none
How to compile themed images *without* referencing them in Themable CSS?

    Question

  • Hi,

    I can't seem to find a way to deploy images into the Style Library and have them compiled into themed variations when not referenced in CSS living in the Themable folder. These would be images that are not referenced in CSS, but rather surfaced via controls like ThemedForegroundImage.

    Would be ideal to be able to deploy images into a particular folder and have them always included in the composed look compilation process when a look/feel is applied. Currently I have to create dummy entries in my Themable CSS for each of these images so that the theming engine picks up on them.

    Thanks

    Tuesday, December 11, 2012 6:22 PM

Answers

  • That's how the themable engine works, it's through CSS that is in the style library under themable folder.

    You then create a class called .foregroundImages and add a background-image link to the same image you used the ThemedForegroundImage control in the master page.

    You will then add the recolor image information in front like you would and specifying the same themekey.

    ThemeKey for ThemedForegroundImage

    Hope this helps


    Benjamin Niaulin Blog: http://bniaulin.wordpress.com

    Twitter: @bniaulin

    Thursday, December 20, 2012 4:43 AM

All replies

  • That's how the themable engine works, it's through CSS that is in the style library under themable folder.

    You then create a class called .foregroundImages and add a background-image link to the same image you used the ThemedForegroundImage control in the master page.

    You will then add the recolor image information in front like you would and specifying the same themekey.

    ThemeKey for ThemedForegroundImage

    Hope this helps


    Benjamin Niaulin Blog: http://bniaulin.wordpress.com

    Twitter: @bniaulin

    Thursday, December 20, 2012 4:43 AM
  • Hi Benjamin,

    Yes I understand how it works with theming engine. I was trying to think of other scenarios where you may have inline imagery that you want to bind to some theme property, but are *not* referenced in the themable CSS. Currently the only way I can see to accomplish this is by adding dummy entries into the themable for each image that I want to be compiled when the theme is applied.

    Thanks

    Friday, December 21, 2012 8:53 PM
  • Hi Mark,

    I know what you mean but even the inline images using ThemedForegroundImage need the .foregroundImages CSS class to assign the associated ThemeKey as hashOverride. The requirement for recoloring images based on a theme property is only through CSS.

    I don't know if I am misunderstanding the question. What I mean to say is that anything related to the Themable engine like ThemedForegroundImage is done only through CSS in the Themable folder.


    Benjamin Niaulin Blog: http://bniaulin.wordpress.com

    Twitter: @bniaulin

    Friday, December 21, 2012 9:03 PM
  • Fair enough... What got me thinking about this was trying to figure out how they were getting the out-of-the-box themed site logo. I couldn't find a reference to it anywhere in the core CSS so I figured there must be some other mechanism in which that logo is getting compiled. Took another poke through Styles/Themable and found a themedforegroundimages.css file. So they've put a bunch of dummy image entries in there (including siteIcon.png) for all images they want to theme and reference inline, but aren't referenced as background images anywhere in corev15.css.

    Thanks

    Friday, December 21, 2012 9:20 PM