Customer Branding and Style Editor

Style Editor | HTMLB Controls and Style Editor

Portal software must reflect the customer’s corporate identity and branding guidelines. For this reason, we provide a technological infrastructure and tools to support customers in this goal. The current portal release offers a certain amount of design flexibility that allows our customers to fulfill their branding needs.

This flexibility is achieved by:

• Placing all design information into cascading style sheets (CSS) instead of writing it directly into the code. As far as possible, images are defined with the CSS attribute background-image.
• Using only central CSS in all HTMLB controls.
• Shipping predefined design variants (color templates) of the portal among which our customers can choose.
• Providing the Style Editor tool for supporting branding activities at the customers' sites.

Below you see the portal with the Mango and Polarwind standard design and the same portal with a customized design.

Figure 1: Portal standard design Mango and Polarwind

Figure 2: Example of a customized design

Top

Style Editor

The Style Editor is a Web-based tool, which allows a designer or administrator to copy and then modify any of our predefined color templates to create a new design. With the Style Editor, an authorized user can change the look-and-feel of the portal without having to be an HTML expert. For example, no knowledge about CSS attribute names is required. Below, you see the entry screen of the Style Editor, where users can select between predefined and customized designs, provided the customer created such.

Figure 3: Design selection screen showing all available color templates

A clearly defined number of styles, such as the background colors, font colors, or images are presented on the user interface. Users can immediately check their changes in the preview area.

The Style Editor creates the CSS files for all platforms and browser versions that SAP Portals supports. Note that style sheets cannot be edited directly. The following example shows the user interface for changing the look of the tabstrip control.

Figure 4: Customizing the tabstrip control

Note: Customer branding with the Style Editor works for central CSS only. Imagine that a customer wants to change the light blue color of the standard design to a light yellow all over the portal content area. If you as a developer defined an area with a light blue background directly in your code, the customer has no chance to change this color. Therefore, use central rendering mechanisms only.

Top

HTMLB Controls and Style Editor

The look of most visible HTMLB controls can be adapted with the Style Editor. See section Editability in Style Editor on the More Info page for the respective HTMLB controls.

Controls that use common styles only, such as the standard font color, are not presented in the Style Editor. Examples for these controls are the checkbox, the dropdown list box, and the radio button. The look of these controls can be customized by changing common styles, such as text, links, or cursor definitions.

Browser Platforms

There is a difference with respect to which attributes can be edited or not on different browser platforms. In general, the options for Netscape 4.7 are more restricted than those for other Web browsers.

The following controls cannot be changed for Netscape 4.7 as target platform:

• Cursor: Cursor for clickable and non-clickable elements
• Input Field: Background color of editable and non-editable input fields
• Button: Buttons have the default HTML look (gray and 3D); only the font type and size can be changed via common styles
• Text Edit: The default HTML element is used; only the font type and size can be changed via common styles

For details with respect to specific controls, see section Editability in Style Editor on the More Info pages.

Common Styles

There are so-called common styles, which affect more than one control in the content area. We list these styles here, in order to avoid redundant lists for each control.

While for Internet Explorer 5 and above, the common styles affect the controls cursor, input field, link and text, for Netscape 4.7 common styles affect only link and text.

Table 1: Common styles for controls and different browsers platforms

Top