Modifying CSS Classes for Web Interfaces (Old Design) 

Use

If you have the necessary experience with the relevant technologies (CSS and HTML), you can modify the CSS classes to adapt the design of the Business Server Pages generated by the Web Interface Builder to suit your requirements.

Prerequisites

An application for editing cascading style sheets is registered on your client PC (file name extension .CSS). If you do not have a special editor, a simple text editor is also suitable.

Procedure

Edit CSS Classes

...

       1.      In the Web Interface Builder, choose  (Goto → MIME Objects). The MIME Repository Browser dialog box appears. The MIME objects that have already been assigned to the Web interface are listed here.

       2.      Choose Import CSS Template. The system generates a copy of the predefined style sheet (custom.css) and adds an entry to the list of MIME objects.

       3.      Select the new list entry and choose  Edit. The system starts the application that is registered on the client PC to edit cascading style sheets.

       4.      Only comment out the classes that you want to modify. Make the required changes and save. The system automatically transfers your changes as a new active version of the style sheet.

For more information, see CSS Classes for Web Interfaces (Old Design).

Reuse Changed CSS Classes

Changes made to the delivered CSS classes only affect the Web interface that you are currently editing. Other Web interfaces are not affected by the changes. However, you can assign a changed style sheet to other Web interfaces so that the changes you make centrally are applied to all assigned Web interfaces. To do this, proceed as follows:

...

       1.      In the Web Interface Builder, open a Web interface for editing to which you want to assign a style sheet of another Web interface (master interface).

       2.      If you want to display the list of properties for the page and their values, double-click on an element of type page.

       3.      For the attribute Additional CSS File in the Value of an Attribute column, choose the input help (F4). The MIME Repository Browser dialog box appears. The MIME objects that have already been assigned to the Web interface are listed here.

       4.      Choose Other Folder. The system lists the Web interfaces that are available in the system.

       5.      Select the master interface with the style sheet that you want to assign to the current Web interface. The system displays the MIME objects of the Web interface you entered in the MIME Repository Browser.

       6.      Select the list entry that represents the style sheet of the master interface and confirm. The system assigns the style sheet of the master interface to the current Web interface.

       7.      Repeat the last steps for each page of the Web interface.

HTML style sheets can only be assigned to one individual page and not a Web interface as a whole. If you want to modify the layout of a planning application that includes several HTML pages, you have to assign the required style sheet to each page of the Web interface individually.

Example

To change the appearance of a tab page, you have to modify the following CSS classes:

●     sapTbsTabSel

●     sapTbsTabBlk

●     sapTbsTab

●     sapTbsLnk

●     sapTbsWhl

In order to apply the changes, you have to search for the appropriate classes in the style sheet, activate them by removing the comment rows and then set the required attribute values.

Result

The planning application that you generate on the basis of the current Web interface (using the Web Interface Builder) uses the format definitions of the style sheets you have assigned and modified for the graphical formatting of the page elements.