How to Apply Skins to Icons

Customizing the Appearance Using Styles and Skins 20-23 To create a custom alias: 1. Create a selector class for the alias. For example, you can add an alias to set the color of a link when a mouse cursor hovers over it: .MyLinkHoverColor:alias {color: CC6633;} 2. To include the alias in another selector, add a pseudo-element to an existing selector to create a new selector, and then reference the alias using the -tr-rule-ref:selector property. For example, you can create a new selector for the af|menuBar::enabled-link selector to style the hover color, and then reference the custom alias, as shown in Example 20–13 . Example 20–13 Referencing a Custom Alias in a New Selector af|menuBar::enabled-link:hover { -rt-rule-ref:selector.MyLinkHoverColor:alias; }

20.3.6 How to Configure a Component for Changing Skins Dynamically

To configure a component to dynamically change the skin, you must first configure the component on the JSF page to set a scope value that can later be evaluated by the configuration file. You then configure the skin family in the trinidad-config file to be dynamically set by that value. To conditionally configure a component to set the skin family: 1. Open the main JSF page such as the index.jspx or a similar file that contains the component that will be used to set the skin family. 2. Configure the page to display the skin family by using the sessionScope component. Example 20–14 shows an af:selectOneChoice component that takes its selected value, and sets it as the value for the skinFamily attribute in the sessionScope component on the index.jspx page. Example 20–14 Using a Component to Set the Skin Family af:selectOneChoice label=Choose Skin: value={sessionScope.skinFamily} autoSubmit=true af:selectItem value=blafplus-rich label=blafplus-rich af:selectItem value=blafplus-medium label=blafplus-medium af:selectItem value=simple label=simple af:selectItem value=richDemo label=richDemo af:selectItem value=mySkin label=mySkin af:selectOneChoice The Refresh button on the page resubmits the page. Every time the page refreshes, the EL expression is evaluated and if there is a change, the page is redrawn with the new skin. To conditionally configure a component for changing skins at runtime: In the trinidad-config.xml file, use an EL expression to dynamically evaluate the skin family: