Creating style sheets as shared resources

About this task

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.

Parent topic: Designing pages
Related reference:
Designing pages
Designing forms

To create a new style sheet resource

Procedure

  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

Procedure

  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

Procedure

  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

About this task

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

domino\data\domino\js\dojo\ibm\domino\widget\layout\css\domino-default.CSS

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

About this task

The following table shows the Cascading Style Sheet properties that Domino Designer supports. The HTML tags automatically map to Notes®. For example, this tag automatically maps to Notes:

BODY {Font-Family: Arial; Color: Blue}

Use this key to read the table:

Yes = property is supported

N/A = not applicable

N/S = not supported

Note the following:

  • A property set via the style sheet resource takes precedence over a conflicting property set in the element's properties box.
  • Border-top-color and border-color are applied to all four sides of the element.
  • Border-top-style and border-style are applied to all four sides of the element.
  • For image, the following properties are applied to the image caption: color, font-weight, font-style, font-size, font-family, and text-decoration.
  • The visibility property is not listed in the table because of its minimal support. It is supported only for the <DIV> tag for hidden and collapse values.

List of Properties

Document

<Body>

Layer

<DIV>

Paragraph

<P>

List Item

<LI>

Table

<TABLE>

Cell

<TD>

Graphic

<IMG>

background-color

Yes

Yes

N/S

N/S

Yes

Yes

N/A

background-image

    

N/S

N/S

N/A

  

N/A

background-repeat

    

N/S

N/S

N/A

  

N/A

border-bottom-width

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-color shorthand

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-left-width

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-right-width

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border shorthand

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-style shorthand

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-top-width

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-top-color

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-top-style

N/A

N/A

Yes

Yes

Yes

Yes

Yes

border-width shorthand

N/A

N/A

Yes

Yes

Yes

Yes

Yes

color

Yes

Yes

Yes

Yes

Yes

Yes

Yes

font-family

Yes

Yes

Yes

Yes

Yes

Yes

Yes

font-size

Yes

Yes

Yes

Yes

Yes

Yes

Yes

font-style

Yes

Yes

Yes

Yes

Yes

Yes

Yes

font-weight

Yes

Yes

Yes

Yes

Yes

Yes

Yes

height

N/A

Yes

N/A

N/A

N/A

N/A

N/A

left

N/A

Yes

N/A

N/A

N/A

N/A

N/A

margin-bottom

N/A

N/A

Yes

Yes

Yes

N/A

Yes

margin-left

N/A

N/A

Yes

Yes

Yes

N/A

Yes

margin-right

N/A

N/A

Yes

Yes

Yes

N/A

Yes

margin shorthand

N/A

N/A

Yes

Yes

Yes

N/A

Yes

margin-top

N/A

N/A

Yes

Yes

Yes

N/A

Yes

padding-bottom

N/A

N/A

Yes

Yes

Yes

N/A

Yes

padding-left

N/A

N/A

Yes

Yes

Yes

N/A

Yes

padding-right

N/A

N/A

Yes

Yes

Yes

N/A

Yes

padding shorthand

N/A

N/A

Yes

Yes

Yes

N/A

Yes

padding-top

N/A

N/A

Yes

Yes

Yes

N/A

Yes

position

N/A

Yes

N/A

N/A

N/A

N/A

N/A

text-decoration

Yes

Yes

Yes

Yes

Yes

Yes

Yes

top

N/A

Yes

N/A

N/A

N/A

N/A

N/A

width

N/A

Yes

N/A

N/A

N/A

N/A

N/A

z-index

N/A

Yes

N/A

N/A

N/A

N/A

N/A