The SAP Theme Editor
By Inge Winkler-Hansen, SAP User Experience, SAP AG – February 21, 2003
The mySAP Enterprise Portal offers customers design flexibility to adapt the look and feel of the portal to reflect their own corporate branding. Modifying the portal's visual design is easy with the SAP Theme Editor, a Web-based tool which supports customers in the redesign process, saving time and money.
Introduction
Individuality. It's how we as human beings tell each other apart. It's not just physical characteristics, but also personal style that makes each person unique. For a corporation, this personal style is its branding. SAP knows that an enterprise portal should be outfitted in the customer's branding, not ours. That's why flexibility has been one of the foremost product design goals in the development of the mySAP Enterprise Portal.
Each portal is shipped with several theme templates that can either be used as is or modified by the customer to fit a his branding needs. These templates have been created by usability and design experts to ensure that they are aesthetically pleasing as well as highly usable. Using these themes as a starting point, the colors, imagery, and other design agents are easily modified with SAP's Theme Editor, a powerful tool that can be used directly in the portal.
From Standard to Custom Design
Using the Theme Editor and one of the predefined templates, a customized visual design of the mySAP Enterprise Portal can be achieved with excellent results in a matter of hours. The Theme Editor even makes comprehensive design changes possible without expertise in Web programming or scripting languages.
Changes made to the design of the mySAP Enterprise Portal using the Theme Editor are also secure during the upgrade process. Once a new design has been created, customers do not need to completely redesign the portal after installing support packages or upgrading to a newer release. However, customers can easily modify, extend, diversify, or restyle their portal design at any time to fit their company's evolving needs.
Some companies are quite complex and have many different faces. Therefore, the mySAP Enterprise Portal allows not just one customized design, but as many designs as the customer needs. A company with several distinct internal divisions can create a number of variations of one standard design. A holding company, for example, might want to have radically different designs for each subsidiary.
A Tour on the SAP Theme Editor
Now let's take a closer look at the SAP Theme Editor. You will see that modifying the design of mySAP Enterprise Portal with the Theme Editor is fast and easy. In most cases, a good Web designer – armed with corporate branding rules and a little knowledge of the portal – should be all that's required.
Goals of the Theme Editor
The main goal of the Theme Editor is to support cost-efficient customer branding. For this purpose, SAP provides a technological infrastructure and tools, of which the Theme Editor is one, to support customers in this goal. The current Theme Editor offers a certain amount of design flexibility that is achieved by:
- Placing all design information in cascading style sheets (CSS) instead of writing it directly into the code.
- Using only central style sheets in all HTMLB controls and in the portal outer frame.
- Shipping predefined design variants (theme templates) of the portal from which customers can choose.
At SAP, we also use the Theme Editor to create special designs for show cases and trade fares. Below is an example of the mySAP Enterprise Portal 6.0 in the SAP Chrome theme. The next image shows the same screen after changing the design for an IDES showcase.
Figure 1: Portal standard design SAP Chrome (click image for larger view)
Figure 2: Example of a customized design (click image for larger view)
A Look at the Theme Editor
The Theme Editor allows a designer or administrator to copy and then modify predefined theme templates to create a new design. The term "design" is used here to refer to the colors and imagery of a Web application. With the Theme Editor, an authorized user can change the look-and-feel of an application without having to be an HTML expert.
Changes made to the design using the Theme Editor are also safe during the
upgrade process. It is not necessary to recreate the customized design after
installing support packages or upgrading to a newer release. Designs can be
downloaded at any time either to backup the design or to upload a design to
another instance of the Web application.
Below is an image of the entry screen of the Theme Editor, from which one can
select between predefined theme templates and customized designs. (In the example
below, no customized designs have been created yet.)
Figure 3: Design selection screen showing all available theme templates (click image for larger version)
A clearly defined number of styles, such as background colors, font colors, and images are presented on the user interface (see below for more information). Users can immediately check their changes in the preview area.
The Theme Editor creates the CSS files for all platforms and browser versions that SAP supports. Note that style sheets cannot be edited directly; this reduces the risk of errors and conflicts between different CSS versions. The following example shows the user interface from which the look of the masthead control can be changed.
Figure 4: The masthead in the SAP Streamline design (click image for larger version)
Let's assume you want to replace the SAP logo with your own corporate logo. In the example above, the section shows the logo styles. If you hover with the mouse over the styles, a red rectangle appears in the preview area around the part of the element that is influenced by this style. The next screen shows the red rectangle around the logo image.
Figure 5: Finding out which style influences which part of the masthead (click image for larger version)
Using the browse button next to the URL to Logo style, you can upload your logo. Since this logo is wider, you have to change the style Width of Logo, too. Immediately, you will see your logo in the preview area.
Figure 6: The masthead with your logo (click image for larger version)
After saving your theme, users can then select the newly created theme with the portal personalize function.
Figure 7: Personalizing the portal (click image for larger version)
If you choose myTheme in the next screen as shown below, your theme is activated and you will see your company logo on each portal screen.
Figure 8: Choosing myTheme
Figure 9: Working in your theme (click image for larger version)
Customer branding with the Theme Editor works for controls that use central style sheets. If an attribute is defined directly in the HTML code or if a style sheet is used that is not known by the Theme Editor, it cannot be changed with this tool.
HTMLB Controls and the Theme Editor
The look of most visible HTMLB controls can be adapted with the Theme Editor. Their attributes can be found in the SAP HTMLB Guidelines on the SAP Design Guild Website. Note that this document refers to the mySAP Enterprise Portal 5.0. Also note that the browser platform determines which attributes can be edited or not. In general, the branding options for Netscape 4.7 are more restricted than those for other Web browsers.
Stand-alone Version of the Theme Editor
The Theme Editor as a tool for adapting the portal design runs in the mySAP Enterprise Portal, but it can also be used outside the portal. As of mySAP Enterprise Portal EP 5.0 Support Package 5, this stand-alone version is shipped as part of the Portal Development Kit. Currently, customization functionality is provided for:
- SAP Portal Style Editor for partners and external design companies
- Version 3.0 of the SAP Business Intelligence System
(BI customers who are interested in a preliminary version of the stand-alone tool can find more information about it here.)
Limitations of the Theme Editor
The Theme Editor exclusively changes values in style sheets and replaces image files. This means that only attributes and images which are controlled by style sheets can be changed, such as colors, fonts, spacing, background images, etc. As no HTML code is changed, layout changes (for example, changing the position of the detailed navigation) are not possible with the Theme Editor.
Ease of Use and Cost-Efficiency
The Theme Editor is a cost-effective branding solution for the mySAP Enterprise Portal. It is best suited for customers who want a "conservative" approach to portal branding without changing the layout of the portal. While the branding options are pre-determined and in some ways restricted by the Theme Editor, this tool offers two big advantages: No technical knowledge is needed to adapt the design and custom designs are protected when the portal is upgraded.
