Overview

Introduction to SAS Web Application Themes

SAS Web Application Themes provide a way to define a consistent look and feel across SAS Web applications. You can use themes to apply uniform visual customizations and company branding to all SAS Web applications that support the theme infrastructure. A typical custom theme might include a banner with a standard corporate color scheme and company logo, a navigation bar with colors that coordinate with the banner, and new colors for borders and title bars.

Theme Components

A theme is a collection of resources that control the appearance of a SAS Web application. The following figure shows the components of a theme:

Components of a Theme

Theme components: templates, images, descriptors, CSS

Here is an explanation of each theme component:

theme templates

are HTML fragments that render specific portions of pages in SAS Web applications. The templates contain dynamic substitution variables of the form %VARIABLE-NAME that are replaced by application-specific values when the templates are used in SAS Web applications.

cascading style sheets

determine the colors, fonts, backgrounds, alignment, and spacing for page elements in SAS Web applications. A cascading style sheet (CSS) is a standard mechanism for defining consistent and reusable presentation for Web-based content.

theme descriptors

are XML files that describe the style sheets, templates, and images that make up a theme.

images

include graphics for icons, a company logo, and banner and page backgrounds. You can incorporate your own customized graphics files as part of a new theme. Images can be in any format supported in the browser, including GIF, PNG, and JPEG.

Note: The application title that appears in the banner of the SAS Web application is not part of the theme. You also cannot use themes to change the application name that appears in the title bar of the browser window.

The SAS Default Theme

The initial theme that is installed with the theme infrastructure is named Default. This theme is typically used as the basis for creating new themes, so you should understand its structure before you attempt to create a custom theme. Specifications for the Default theme are provided in SAS-config-dir\Lev1\Web\Utilities\SASThemeExtensions\specs\Default\index.html.

How Custom Themes Are Created and Deployed

The SAS-config-dir\Lev1\Web\Utilities\SASThemeExtensions directory contains the scripts and resources needed to create a new theme:

The NewTheme script creates a directory structure for your new theme, and populates it with configuration files that are modified to create a new theme definition. The new theme is based on the SAS default theme that is shipped with the software.
The specs directory provides documentation for the general color palette and color and image guidelines that are specific to each user interface component. This document is useful when you are designing and defining your custom theme.

Developing a custom theme involves creating CSS files, image files, theme template files, and theme descriptor files. It is possible to create a new theme by authoring these files from scratch, but the task is laborious and requires a thorough understanding of Web page design. The theme infrastructure provides a templating mechanism to simplify the process.

Instead of editing CSS and theme descriptor files directly, template files (extension .vtl) are provided that contain key and value pairs that isolate the elements of the theme that you are likely to want to customize. In addition, context files (extension .vctxt) enable you to create a centralized set of definitions for key values that you can use in place of explicit values to simplify the process of maintaining the template files. When you use the SAS Deployment Manager to rebuild the SAS Web Application Themes, the context files are merged into the template files to create a complete set of shared and product-specific style sheets and theme descriptors. The build process also packages your new theme into the sas.themes.ear archive file that you deploy to make themes available in your production environment.

Once the theme archive is deployed, users can use the Preferences page in their SAS Web application to apply the new theme (or any of the other themes in the archive). You can also specify the custom theme as the default for all SAS Web applications. This means that the theme is applied automatically for users who do not make a selection on the Preferences page.

Note: Previously, SAS Web Report Studio 3.1 used product-specific branding. Product-specific branding is not available for SAS Web Report Studio 4.3. Use themes to create branding in SAS Web Report Studio 4.3. A few properties for branding that existed in SAS WebReport Studio 3.1 are supported in SAS Web Report Studio 4.3. For information about these properties and usage, see Customizing Report Styles for SAS Web Report Studio in SAS Intelligence Platform: Web Application Administration Guide.