Using Your Own Style Sheet (New Design) 

Use

If you want to adapt the visual appearance of a Web interface to your own requirements, you can create your own Theme based on the SAP Theme.

We recommend that you create copies of the standard SAP style sheet first, make these known to the Web Interface Builder and then modify them to suit your own requirements.

Note that you cannot use this procedure if you are using the SAP Enterprise Portal style sheet. You have to edit this in the theme editor in the portal.

Prerequisites

You are using the new design (see Design Templates for Web Interfaces).

Activities

The following example assumes that you want to use the standard SAP style sheets used by the Web Interface Builder as the basis of your modifications. These always contain one SAP Theme that is used for formatting all components (except the planning layout) and one or more Web browser-specific SAP BI Style Sheets that are used for formatting the planning layout.

In this example, we use the following standard SAP style sheet as the template:

■      SAP Theme sap_standard

■      SAP BI style sheet BWReports_ie6.csswhich corresponds to this SAP Theme.

Copy SAP theme

...

       1.      In the ABAP Editor (SE38), call program BSP_UPDATE_MIMEREPOS and choose  Execute.

Make the following settings.

                            a.      Enter the MIME Repository path.

In this example we use:

/SAP/PUBLIC/BC/UR/Design2002/themes/sap_standard.

When you specify the path, note that it is case sensitive.

                            b.      Choose the Export to disc. option.

       2.      Choose  Execute. A dialog box appears in which you can select a target directory on your local PC.

Note that this folder must be empty.

The export begins after you confirm the target directory. The export may take a few minutes. Check the content of the target folder in order to monitor the progress.

       3.      Call program BSP_UPDATE_MIMEREPOS and choose  Execute.

Make the following settings.

                            a.      Enter the path of the target MIME Repository.

In this example we use:

/SAP/BC/BSP/SAP/PUBLIC/CUSTOMTHEME.

                            b.      Choose the Import from disc. option.

       4.      Choose  Execute. A dialog box appears in which you can select a root directory on your local PC.

The import begins after you confirm the root directory. The import may take a few minutes.

Copy SAP BI style sheet

       5.      In the object navigator (transaction SE80), open the MIME Repository and navigate to the appropriate SAP BI style sheet.

In this example we use:

/SAP/BW/BEx/StyleSheets/BWReports_ie6.css.

In the context menu of the style sheet, choose Upload/Download → Download. A dialog box appears in which you can select a target directory on your local PC. The export begins after you confirm the target directory.

Repeat this step for all Web browser types that you want to support. The last few characters in the name of the style sheet indicate the type.

IE6 = Microsoft Internet Explorer 6

N6X = Netscape Communicator 6

A style sheet without a Web browser-specific ending is used by default for all other Web browsers.

       6.      In the object navigator (transaction SE80), open the MIME Repository and navigate to the directory for your customer-specific Theme.

In this example, we created a directory customtheme under the following path:

/SAP/BC/BSP/SAP/public/customtheme

In the context menu of the directory, choose Import MIME Objects. A dialog box appears in which you can select a file. Choose the style sheet that you exported and modified locally. Choose Open. The import starts.

Check that the name of the style sheet corresponds exactly to the following example: BWReport_ie6.css.

Including your own themes in the Web Interface Builder

       7.      In the Web Interface Builder, call your Web interface.

In the context menu of the root node, choose Change Properties. In the Theme Path field, enter the path of the directory for the customer-defined changes to the Theme (/SAP/BC/BSP/SAP/public/customtheme, in this example).

       8.      Choose  to generate the Web interface.

Test the result

       9.      Execute the Web interface. You should see the same visual appearance as before, but this time the system uses the copy.

   10.      You can check the result by displaying the source code and searching using the name of the CSS class. These should contain the path to your directory that contains the customer-defined changes to the Theme (.../customtheme, in this example).

The input help for the Theme Path field does not show this path.