CSS Classes for Web Interfaces (Old Design) (SAP Library

CSS Classes for Web Interfaces (Old Design)

Definition

Cascading style sheets (CSS) are used to format HTML pages and make the logical separation of content and external layout easier. Cascading style sheets contain classes, the attributes of which determine the format definition of HTML elements. SAP delivers predefined classes for formatting the Business Server Pages generated by the Web Interface Builder. These are described below.

Use

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

Example

You can format the pages so that the color and font correspond to your company’s corporate design guidelines. Other modifications are also possible, for example, changed spacing and font sizes if you want to use the generated Web applications on monitors that have different resolutions.

The CSS classes for Web interfaces are contained in a predefined style sheet that is delivered as an object in the MIME Repository. You cannot change the predefined style sheet. But you can assign a copy of this predefined style sheet to a Web interface opened in the Web Interface Builder and then edit the style classes contained in the copy. For more information, see Modifying CSS Classes for Web Interfaces (Old Design).

Structure

The style sheet delivered by SAP contains the class definitions listed below and additional style strings of individual HTML tags.

The SEM-BPS design variants listed in the table are based on the old SEM-BPS design.

The different columns have the following significance:

● HTML tag: HTML tag, the appearance of which is modified by the specified CSS classes as compared to the HTML standard.

● SAP class: Central CSS class delivered by SAP with the Web Application Server. If a derived BPS class is not available, this class is used in the generated Web interface; if you want to change the style of your Web interface, you can modify this class.

● Additional style strings: Differences in format definitions between SAP and BPS classes.

● Derived BPS class: CSS class delivered specifically for implementation in the Web Interface Builder. This class is derived from the SAP class. If a derived BPS class is available, this class is used in the generated Web interface; if you want to change the style of your Web interface, you can modify this class.

HTML Tag	SAP Class	Additional Style Strings	Derived BPS Class	Description
General
body	sapBdy			document body
textarea	sapTedWhl			document
a	sapBtnStd			pushbutton (Internet Explorer)
Tab pages
td	sapTbsTabSel			active tab
td	sapTbsTabBlk			space between tabs
td	sapTbsTab			inactive tab
a		text-decoration:none	bpsTbsLnk	hyperlink on inactive tab
table	sapTbsWhl			table (1x1) for selected element
Texts, hyperlinks
span, a	sapTxtStd, sapTxtH1, sapTxtH2, sapTxtH3,			text (span), hyperlink (a)
span, a	sapTxtEmp, sapTxtLbl, sapTxtLblSml, sapTxtLeg, sapTxtRef			text (span), hyperlink (a)
span	sapLnk			hyperlink (inside of <a>)
Group fields
table	sapGrcWhl			outermost table (1x1)
table	sapGrpWhlBox			inner table (2 rows: header area, data area)
table	sapGrpHdr			header area (table, 1 row)
td	sapGrpTtlBox			table cell in header area
div	sapGrpBdyBox			group body
Input layout (old SEM-BPS design)
table	sapTbvStd		bpsLay	table for input layout
td	sapTbvHdrAlt		bpsLayHdrAlt	header area cells in lead columns, cells for foot notes, empty layout, layout error
td	sapTbvHdrAlt	text-align: right	bpsLayHdrAltKfg	header area cells in data columns
td	sapTbvHdrStd		bpsLayHdrStd	header area cells (output layouts)
td	sapTbvCellStd	text-align: right	bpsLayCellStd	data area cells (incl. totals), header area cells (input layouts)
Input layout (new SEM-BPS design)
td			bpsLay2chaText	header area cells in the lead columns
td			bpsLay2stdItemCol	header area cells in data columns
td			bpsLay2aggItemCol	header area cells in data columns, totals columns
td			bpsLay2stdItem	lead column cells (also in new rows): standard header area cells
td			bpsLay2aggItem	lead column cells (also in new rows): totals cells
td			bpsLay2HLevel0, bpsLay2HLevel1, bpsLay2HLevel2, bpsLay2HLevel3	lead column cells (also in new rows): hierarchy cells
td			bpsLay2stdData	data area cells (also in new rows): standard cells
td			bpsLay2stdDataOdd	data area cells (also in new rows): color change cells
td			bpsLay2aggData	data area cells (also in new rows): totals cells
input	sapEdfTxtEnbl	text-align: right	bpsLayEdfKfg	input of key figure values in data cells
input	sapEdfTxtEnbl	background-color: #FFD8D8; text-align: right	bpsLayEdfKfgErr	input error with key figure values
input	sapEdfTxtEnbl		bpsLayEdfChvl	input of characteristic values in lead column
input	sapEdfTxtEnbl	background-color: #FFD8D8	bpsLayEdfChvlErr	input error with characteristic values
select	sapDdlWhl		bpsLayDdl	characteristic value selector
span	sapDdlTxt		bpsLayDdlTxt	row in dropdown box
select	sapDdlWhl	background-color: #FFD8D8	bpsLayDdlErr	input error in characteristic value selector
Selectors
select	sapDdlWhl		bpsSelDdl	selector
span	sapDdlTxt		bpsSelDdlTxt	row in dropdown box
select	sapDdlWhl	background-color: #FFD8D8	bpsSelDdlErr	input error in characteristic value selector
input	sapEdfTxtEnbl	text-align: right	bpsSelEdf	input field for selector
input	sapEdfTxtEnbl	background-color: #FFD8D8; text-align: right	bpsSelEdfErr	input error in selector
table			bspSelGrp	table to include radio buttons
td			bspSelGrpTxt	text for radio buttons
Selector for hierarchies
table	sapTreWhl			general hierarchy
div	sapTreNl1, sapTreNl2, sapTreNl3, sapTreNl4			hierarchy levels
div			bpsTreSel	selected entry
span	sapTreExpNc			nodes (no symbol; not used)
span	sapTreExpOp			nodes (symbol "expanded"; not used)
span	sapTreExpClo			nodes (symbol "collapsed"; not used)
span			bpsTreOpt	text of a hierarchy entry

Note the following when modifying the classes:

● You can switch individual customer-defined classes on or off by including or excluding the appropriate classes in a comment in the style sheet.

● For elements that have a derived BPS class, you should make any modifications in this derived class (and not in the higher-level SAP class).

● For more information about using these classes, see the HTML source code of the Web page.

● You cannot change the CSS class that the Web interface uses without modifying the generated BSP application. To modify the style, use the standard classes mentioned above.