Create and Deploy a Custom Theme

  1. Log on to SAS Theme Designer 3.3 for Flex. The address for the application is: http://machine:port/SASThemeDesignerForFlex.
  2. When prompted by the application to choose a task, select Create a Theme.
  3. In the New Theme window, enter a name for your custom theme and select one of the predefined base themes. Click OK.
    Note: Most special characters are not allowed in the theme name. The theme name can include alphabetic letters, digits, an underscore ( _), spaces, and a dollar sign ($).
    Note: Four predefined base themes are available (SAS Light, SAS Dark, SAS Blue Steel, and SAS Corporate). The SAS Corporate and the SAS Blue Steel themes enable you to replace the Banner logo with a customized logo, and save the theme with a different name. No other custom changes are supported for these two themes. You can customize the SAS Light or the SAS Dark theme more extensively, and save the customized theme with a different name. After you create and deploy 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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 Global Preferences page in the Preferences window, select the new custom theme from the Theme 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.3 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.