APPLICATION DESIGN


Creating style sheets as shared resources
Cascading style sheets (CSS) give you the ability to control many aspects of your page layout, including headers, links, text, fonts, styles, color, and margins. You can browse your local file system for a CSS, turn it into a shared resource, and then insert it into a page, form, or subform.

To create a new style sheet resource

1. Expand "Resources" in the Applications navigator.

2. Select "Style Sheets" from the list of resources.

3. Click "New Style Sheet." The Style Sheet Resource Properties box opens, so you can set the name and application where the style sheet will be stored.

To insert a style sheet resource into a page, form, or subform

1. Open a page, form, or subform.

2. Place the cursor where you want to add the style sheet. To insert the style sheet in the HTML Header, open the Programmer's pane, select the HTML Head Content event, and click in the script area.

3. Choose Create - Resource - Insert Resource. The Insert Resource dialog box appears.

4. Select the database containing the style sheet. The default is the current database.

5. Select "Style Sheets" as the resource type.

6. In the Available resources section, highlight the style sheet resource to add.

7. Click OK.

8. (Optional) To view the name of the inserted style sheet resource or to change to another style sheet resource, choose Style Sheet - Style Sheet Properties. The Style Sheet Properties box appears with the name of the style sheet resource. To select a different style sheet resource, click the Browse folder.

To edit a style sheet resource

1. Expand "Resources" in the Applications navigator.

2. Select "Style Sheets" from the list of resources.

3. Select a style sheet resource.

4. Click "Open With" and select an editor to open the style sheet resource.

Styling for JavaScript controls

The default styling for JavaScript controls is through the following Cascading Style Sheet (CSS) file on the Domino server:


Where domino\data\domino\js\dojo is the Dojo directory under the Domino data directory. Take care if you modify this file.

Table of supported CSS properties

The following table shows the Cascading Style Sheet properties that IBMR LotusR Domino(TM) Designer supports. The HTML tags automatically map to IBMR LotusR NotesR. For example, this tag automatically maps to Notes:


Use this key to read the table:
Note the following:
List of PropertiesDocument
<Body>
Layer
<DIV>
Paragraph
<P>
List Item
<LI>
Table
<TABLE>
Cell
<TD>
Graphic
<IMG>
background-color YesYesN/SN/SYesYesN/A
background-imageN/SN/SN/AN/A
background-repeatN/SN/SN/AN/A
border-bottom-widthN/AN/AYesYesYesYesYes
border-color shorthandN/AN/AYesYesYesYesYes
border-left-widthN/AN/AYesYesYesYesYes
border-right-widthN/AN/AYesYesYesYesYes
border shorthandN/AN/AYesYesYesYesYes
border-style shorthandN/AN/AYesYesYesYesYes
border-top-widthN/AN/AYesYesYesYesYes
border-top-color N/AN/AYesYesYesYesYes
border-top-styleN/AN/AYesYesYesYesYes
border-width shorthandN/AN/AYesYesYesYesYes
colorYesYesYesYesYesYesYes
font-familyYesYesYesYesYesYesYes
font-sizeYesYesYesYesYesYesYes
font-styleYesYesYesYesYesYesYes
font-weightYesYesYesYesYesYesYes
heightN/AYesN/AN/AN/AN/AN/A
leftN/AYesN/AN/AN/AN/AN/A
margin-bottomN/AN/AYesYesYesN/AYes
margin-leftN/AN/AYesYesYesN/AYes
margin-rightN/AN/AYesYesYesN/AYes
margin shorthandN/AN/AYesYesYesN/AYes
margin-topN/AN/AYesYesYesN/AYes
padding-bottomN/AN/AYesYesYesN/AYes
padding-leftN/AN/AYesYesYesN/AYes
padding-rightN/AN/AYesYesYesN/AYes
padding shorthandN/AN/AYesYesYesN/AYes
padding-topN/AN/AYesYesYesN/AYes
positionN/AYesN/AN/A N/AN/AN/A
text-decorationYesYesYesYesYesYesYes
topN/AYesN/AN/AN/AN/AN/A
widthN/AYesN/AN/AN/AN/AN/A
z-indexN/AYesN/AN/AN/AN/AN/A

See Also