CSS Classes for Web Interfaces 

Definition

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

Use

You can change the format definitions contained in the CSS classes to modify the layout of the Business Server Pages generated by the Web Interface Builder to your preferences.

You can format the pages so that the color and font correspond to your company’s corporate design guidelines. But other modifications are also possible, for example, changed spacing and font sizes if the generated Web applications are used on monitors with very 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 yourself. 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.

Structure

The style sheet delivered by SAP contains the class definitions listed below and additional style strings of individual HTML tags. The different columns have the following meaning:

·        HTML tag: HTML tag the appearance of which is modified by the specified CSS classes compared with the HTML standard

·        SAP class: Central CSS class delivered by SAP with the Web Application Server

·        Additional style strings: Format definitions for the specified HTML tags

·        Derived BPS class: CSS class specially delivered for using the Web Interface Builder, which is derived from the SAP class entered in the same row and modifies this

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
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	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 completely switch on or off the effect of individual classes by including or excluding the appropriate classes in the style sheet in a comment.

·        For elements for which a derived BPS class exists, you should make the modifications in this derived class (and not in the higher-level SAP class).

·        Do not create your own CSS classes as these will not be taken into account by the Web Interface Builder’s program logic and will therefore not have an effect on the layout of the Business Server Pages generated in the Web Interface Builder.