Create and Deploy a Custom Theme
-
Log
on to SAS Theme Designer 3.5 for Flex. The address for the application
is:
http://machine:port/SASThemeDesignerForFlex
.
-
When prompted by the
application to choose a task, select
Create a Theme.
-
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, and spaces.
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.
Five predefined base themes are available (
SAS
Light,
SAS Dark,
SAS
High Contrast,
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. For
these two themes, the application banner is available for browsing
and selecting a logo. In release 3.5, you can customize the two splash
screens when SAS Blue Steel or SAS Corporate are selected as the base
theme.
The SAS High Contrast
theme improves the accessibility of the text and interface for visually
impaired users. The SAS Light or the SAS Dark theme can be customized
more extensively, saving 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 Theme A, that change affects all themes that
are based on Theme A (except for any design elements that are explicitly
specified in the dependent themes).
-
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 the accordion
change. You can also customize the colors for the tabs and accordion,
and override the inherited colors for those items.
-
Repeat step 4 for each
interface component whose appearance you want to alter. To save you
work at any time, select
FileSave 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.
-
When you are ready to
deploy the new theme, select
FileSave 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.
-
-
In a separate browser,
launch an eligible application.
-
Access the application’s
preferences settings (for example, select
FilePreferences from the application’s
main menu).
-
On the
Global
Preferences page in the
Preferences window,
select the new custom theme from the
Theme drop-down
list. Click
OK.
-
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.5 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.