To reference a static resource using the $Resource global variable, provide the name of the static resource in an expression: {! $Resource[StaticResourceName] }. For example, if you have a getCustomLogo method that returns the name of an image uploaded as a static resource, reference it like this: <apex:image value="{!$Resource[customLogo]}"/>.
public class ThemeHandler { public ThemeHandler(ApexPages.StandardController controller) { } public static Set<String> getAvailableThemes() { // You must have at least one uploaded static resource // or this code will fail. List their names here. return(new Set<String> {'Theme_Color', 'Theme_BW'}); } public static List<SelectOption> getThemeOptions() { List<SelectOption> themeOptions = new List<SelectOption>(); for(String themeName : getAvailableThemes()) { themeOptions.add(new SelectOption(themeName, themeName)); } return themeOptions; } public String selectedTheme { get { if(null == selectedTheme) { // Ensure we always have a theme List<String> themeList = new List<String>(); themeList.addAll(getAvailableThemes()); selectedTheme = themeList[0]; } return selectedTheme; } set { if(getAvailableThemes().contains(value)) { selectedTheme = value; } } } }
<apex:page standardController="Account" extensions="ThemeHandler" showHeader="false"> <apex:form > <apex:pageBlock id="ThemePreview" > <apex:stylesheet value="{!URLFOR($Resource[selectedTheme], 'styles/styles.css')}"/> <h1>Theme Viewer</h1> <p>You can select a theme to use while browsing this site.</p> <apex:pageBlockSection > <apex:outputLabel value="Select Theme: " for="themesList"/> <apex:selectList id="themesList" size="1" value="{!selectedTheme}"> <apex:actionSupport event="onchange" rerender="ThemePreview"/> <apex:selectOptions value="{!themeOptions}"/> </apex:selectList> </apex:pageBlockSection> <apex:pageBlockSection > <div class="custom" style="padding: 1em;"><!-- Theme CSS hook --> <h2>This is a Sub-Heading</h2> <p>This is standard body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque neque arcu, pellentesque in vehicula vitae, dictum id dolor. Cras viverra consequat neque eu gravida. Morbi hendrerit lobortis mauris, id sollicitudin dui rhoncus nec.</p> <p><apex:image value="{!URLFOR($Resource[selectedTheme], 'images/logo.png')}"/></p> </div><!-- End of theme CSS hook --> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>
There are only two dynamic references to the $Resource global variable on this page, but they show how to access both stylesheet and graphic assets. You could use a dynamic reference in every <apex:image> tag on a page and completely change the look and feel.