Create and Deploy a Custom Theme

  1. From the main menu of the SAS Theme Designer 3.2 for Flex, select Filethen selectNew.
  2. In the New Theme window, enter a name for your custom theme and select Base theme. Click OK.
    Note: Spaces and most of the special characters are not allowed in the theme name. The theme name can include alphabetic letters, digits, an underscore ( _), and a dollar sign ($).
    Note: Initially, three base themes are available (SAS Light, SAS Dark, and SAS Corporate). You cannot modify these predefined base themes. The SAS Corporate theme enables you to replace the Banner logo. No other custom changes are supported for the SAS Corporate theme. After you create and save a custom theme, you can use that theme as a basis for future themes. Such dependent relationships among themes are dynamic. For example, if you change ThemeA, that change affects all themes that are based on ThemeA (except for any design elements that are explicitly specified in the dependent themes).
    In the right pane, notice that a sample application that uses the selected base theme is displayed. The right pane provides an automatic, instant preview as you work.
  3. In the upper left portion of the User Interface Components pane, select a component. Use the controls in the lower left pane to make changes to the selected interface component. The impact of each change is instantly shown in the sample application in the right pane.
    Note: All of the customizable design elements are listed in the User Interface Components pane. The sample application on the right contains examples of all of the available components.
    Note: Changes that you make to certain user interface components affect other components. For example, if you change the color for button, the colors for tabs and accordion will change. You can also customize the colors for the tabs and accordion, and override the inherited colors for those items.
  4. Repeat step 4 for each interface component whose appearance you want to alter. To save you work at any time, select Filethen selectSave from the main menu.
    Tip
    To revert the settings for a particular interface component (undoing all of your unsaved changes to that component in the current session), select the component in the User Interface Components pane and then click Reset to Defaults in the lower left pane. As a result, the settings that were initially loaded for this session are reapplied.
  5. When you are ready to deploy the new theme, select Filethen selectSave and deploy from the main menu. In the confirmation message box, click OK.
    Note: At run time, both the target theme and its base theme must be available. Each custom theme contains only information about how it differs from its base theme. The base theme is deployed simultaneously with the custom theme; both themes must be available to the consuming applications. If you have additional layers of nesting (for example, a custom theme that depends on another custom theme that in turn depends on a base theme), then all dependent themes must be available. If you deploy a theme whose base theme is not deployed, the application auto-deploys the base theme.
    Note: You cannot deploy a theme for only a particular application, or for only a particular set of users. All deployed themes are available to all eligible applications, and to all users.
  6. To verify the results:
    1. In a separate browser, launch an eligible application.
    2. Access the application’s preferences settings (for example, select Filethen selectPreferences from the application’s main menu).
    3. On the All SAS Applications page in the Preferences window, select the new custom theme from the Themes drop-down list. Click OK.
    4. If the appearance of the consuming application does not change immediately, log off and log in to the application to view the application with the new theme.
      Tip
      You can work iteratively and view results in the consuming application. In the SAS Theme Designer 3.2 for Flex, make changes to the custom theme, and then save and deploy the theme. On your desktop, switch to the browser window where a consuming application is running and simply refresh the page. It is not necessary to relaunch the consuming application.
      Tip
      It is a good practice to thoroughly review the effects of the custom theme on each consuming application.
Copyright © SAS Institute Inc. All rights reserved.