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 Design pane.

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

3. Click "New Style Sheet Resource." The Browse dialog box opens. Only files with a CSS extension appear.

4. Find and select the cascading style sheet you want to use.

5. Click Open to add the style sheet to the list of style sheet resources. The Style Sheet Resource Properties box opens, so you can change the name or other properties of the style sheet.

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 - 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 Locate Object folder.

To edit a style sheet resource

1. Expand "Resources" in the Design pane.

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

3. Select a style sheet resource.

4. Do one of the following:

To refresh a style sheet resource

To update a file you have copied as a shared resource, you can refresh the style sheet resource.

1. Expand "Resources" in the Design pane.

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

3. Select a style sheet resource.

4. Click Refresh. The Open dialog box appears.

5. Select the CSS file to refresh your style sheet resource and click Open. The style sheet resource is updated.

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 IBM® Lotus® Domino(TM) Designer supports. The HTML tags automatically map to IBM® Lotus® Notes®. 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