Make Desired Changes to the Styles, Graphics, and Theme Templates

Changing Colors

To make style changes to specific page features, you must first identify the component key associated with that feature and then locate the CSS template file that sets the value for that key.

For example, suppose your new theme design calls for changing the color for the title text in the banner at the top of SAS web applications. The Banner specifications at the Themes website SAS-configuration-directory

\Lev1\Web\Utilities\SASThemeExtensions\specs\Default

\Components\html\Banner.html show that the context key for the title text is Banner_Title_Text_Color and it displays its context value.

Each Themes web page displays the context keys and context values.

Steps for Defining and Deploying a New Theme 155

You can specify a new color explicitly, as follows:

Banner_Title_Text_Color=#e69b00

Because components.theme-name.vtl is a CSS template file, another option is to use the generic color values that are defined in the theme-name.vctxt file in the \Velocity\Stylesheets\_shared\contexts\themes subdirectory of the work area for the new theme. For example, you might specify the following value instead of an explicit value:

Banner_Title_Text_Color=${Color53}

The corresponding color value is substituted in the resulting CSS when the new theme is built.

The general form for using a context value in a template file is

${context-value-name}. Using context values instead of explicit values can make it easier to maintain the theme because you can change all component keys that use a given value by making one change to the context file.

Changing Graphics

Image files are located in three subdirectories located in the

SAS-configuration-directory\Lev1\Web\Utilities\SASThemeExtensions

\specs\Default folder. These subfolders are: Common, Components, and WRS. The properties of each image are defined in the Theme Descriptors files.

The process for customizing images is similar to that for customizing styles. For example, suppose your new theme design calls for changing the background image for the banner at the top of SAS web applications. A review of the Banner specifications at SAS-configuration-directory\Lev1\Web\Utilities

\SASThemeExtensions\specs\Default\index.html shows that the image key for the banner background is banner_background. A search for that string in the work area for the new theme shows the following IMAGE element in the ComponentsThemes.vtl file in the Velocity\ThemeDescriptors\custom

\theme-name subdirectory of the work area:

<Image name="banner_background" ... file="BannerBackground.gif"/>

You can change the image used for the banner background image in either of the following ways:

n by replacing the existing BannerBackground.gif file in the themes

\theme-name\images\Components subdirectory of the work area with a revised image with the same name. Make sure that the new image has the following criteria:

o The filename of the new graphic is identical to the filename of the graphic being replaced.

o The new graphic is in the same format as the original image (for example, .jpg or .gif).

o The dimensions of the new graphic and its pixels are same as the graphic being replaced.

If you need to change the size, filename, or the image format of the graphic, modify the theme descriptor. For example, if you replace the logo.gif file with a new file called myLogo.jpg that has a width of 300 pixels and height of 70 pixels, modify the ComponentsThemes.vtl file as follows:

<Image name="logo" description="My Logo" altTextKey="desktop.logo.text"

appliesTo="ALL" width="300" height="70" file="myLogo.jpg"/>

156 Chapter 12 / Administering SAS Web Application Themes

n by changing the FILE= attribute in the IMAGE element in the

ComponentsThemes.vtl context file to point to a different image file.

Note: You should not change the value of the NAME= attribute in the IMAGE element. SAS web applications depend on the NAME= attributes remaining constant.

Another common image change is to replace the SAS logo in the standard banner with your organization's logo. You can change the graphic used for the banner logo either by replacing the existing logo.gif file in the themes

\theme-name\images\Components subdirectory of the work area with a copy of your logo with that filename or by changing the target of the FILE= attribute for the IMAGE element in the ComponentsThemes.vtl context file for which the NAME= attribute has the value logo.

When customizing images, you should ensure that the replacement graphics have approximately the same dimensions as the original graphics. Otherwise, the images might disrupt the appearance of the applications in which they are used.

Changing Theme Templates

You should make changes to theme templates only in situations where you want to change the layout of a page element (for example, to change the logo's placement in the banner or to adjust the padding between rows in a menu). If you decide to alter a theme template, proceed with caution. SAS web

applications rely on the template structure being consistent with the versions that are shipped with the software. Improper changes to theme templates might prevent SAS web applications from functioning properly. In particular, do not change the dynamic substitution variables in theme templates because SAS web applications expect the existing values.

Dynamic substitution variables should not be changed in theme templates because SAS web applications expect the existing values. However, if you need to change a dynamic substitution variable, here is an example where

%BANNER_TITLE is the dynamic substitution variable:

<td nowrap id=”bantitle”

class="banner_title">%BANNER_TITLE</td>

Note: When a new release of themes is installed at your site or an upgrade is performed, the existing theme template files are replaced by the new theme template files. If you have customized theme template files and want to retain them for future use, copy them to a different location before the installation or upgrade.

Additional Considerations

Another change that you might want to make when creating your new theme is to update the theme_displayName= element in the

theme-name.themeDescriptor.vctxt file in the Velocity\ThemeDescriptors

\contexts subdirectory of the work area. Provide a descriptive name for the new theme. The name is used in the selection list of available themes in the Preferences page in SAS web applications.

Steps for Defining and Deploying a New Theme 157