Style sheets dialog

The Stylesheet editor dialog is used to edit CSS style sheet resources. For information on the use of style sheets, see Styling and formatting and Styling templates with CSS files.
This dialog lets you edit the Global style sheet (context_all_styles.css, which by default applies to all contexts), and the style sheet that applies to the context that is currently being edited in the workspace: Print (context_print_style.css),Email (context_email_style.css)or Web (context_web_style.css).
To open this dialog, select Edit > Stylesheets....

  • Context: Use the drop-down to select Global (all contexts) or the context that is open in the workspace, such as Print. Selecting a context shows all it's CSS rules in the Rule List.

  • Show: Use the drop-down to select whether to show all CSS rules or limit to certain types: Class, ID or Element rules.

  • Rule List: Displays the list of rules in the currently selected style sheet.

  • Rule Display: Displays the contents of the currently selected rule in the Rule List.

  • New: Click to create a new rule with the Edit Rule dialog. See New/Edit Rule dialog.

  • Edit: Click to edit the currently selected rule in the Rule List using the Edit Rule dialog. See New/Edit Rule dialog.

  • Delete: Click to delete the currently selected rule in the Rule List.

  • Duplicate: Click to create a duplicate of the currently selected rule in the Rule List using the Edit Rule dialog. The default name for the new rule is the name of the current one plus "-duplicated". See New/Edit Rule dialog.

  • Move Up: Move the currently selected rule in the Rule List up one position in the list.

  • Move Down: Move the currently selected rule in the Rule List down one position in the list.

  • Save: Click to save all changes to the stylesheet and close the dialog.

  • Cancel: Click to close the dialog without saving any changes.

New/Edit Rule dialog

The New/Edit Rule dialog shows the properties for a specific CSS selector.
Click the Apply button to see how a setting affects the elements that are subject to that selector. (You may have to move and resize the Stylesheet dialog before opening the Edit Rule dialog, in order to be able to see the template that you are working on.)
At any point you can click on the Advanced button to see the Advanced Stylesheet Rule. See Advanced Stylesheet Rule.

  • Name: The CSS Selector to which this rule applies. This can be a selector that is specific to Connect (see Selectors in Connect) or any selector used in regular CSS, since they can also be used here (see CSS Selectors on W3Schools for a simple reference page).

Type Tab

  • General group:

    • Font: Select the font used to display text. See also: Fonts. This is equivalent to the CSS

      font-family

      property.

    • Size: Enter the size in a measure, named size or percentage. This is equivalent to the CSS

      font-size

      property.

    • Color: This is the color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color manually. The color value must be a valid HTML color name or hexadecimal color code. This is equivalent to the CSS

      color

      property.

    • Background Color: This is the background color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to manually enter a color value (a valid HTML color name or hexadecimal color code). This is equivalent to the CSS

      background-color

      property.

  • Spacing group:

    • Letter Spacing: Set the space between characters in a text in measure or percentage. This is equivalent to the CSS

      letter-spacing

      property.

    • Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the CSS

      word-spacing

      property.

    • Whitespace: Specify how to handle white spaces inside of an element. See CSS White-Space for details. This is equivalent to the CSS

      white-space

      property.

  • Style group: Check any option to apply the selected style to text within the element. This list shows the CSS property and value for each of the options.

    • Bold: Sets the

      font-weight

      to

      700

      .

    • Italic: Sets

      font-style

      to

      italic

      .

    • Underline: Sets

      text-decoration

      to

      underline

      .

    • Strikethrough: Sets

      text-decoration

      to

      line-through

      .

    • Subscript: Sets

      vertical-align

      to

      super

      .

    • Superscript: Sets

      vertical-align

      to

      sub

      .

    • Capitalize: Sets

      text-transform

      to

      capitalize

      .

    • Uppercase: Sets

      text-transform

      to

      uppercase

      .

    • Lowercase: Sets

      text-transform

      to

      lowercase

      .

    • Small-caps: Sets

      font-variant

      to

      small-caps

      .

Formats Tab

  • General group:

    • Line-height: Specify the height of each line in the element's text, in measure or percentage. Note that this is not spacing between lines, but rather the complete height of the line itself including the text. Equivalent to the

      line-height

      property.

    • Align: Select how text should be aligned, such as

      left

      ,

      center

      ,

      right

      or

      justify

      . Equivalent to the

      align

      property.

    • First Indent: Specify the indentation of the first line of each paragraph in the element. Equivalent to the

      text-indent

      property.

    • Display: Select how to display the element. This can also be used to hide an element completely using the

      none

      option. See CSS Display. Equivalent to the

      display

      property.

  • Breaks group:

    • Before: Specifies whether a page break should occur before the element. Equivalent to the

      page-break-before

      property.

    • Inside: Specifies whether to accept page breaks within the element. Equivalent to the

      page-break-inside

      property.

    • After: Specifies whether a page break should occur after the element. Equivalent to the

      page-break-after

      property.

    • Widows: Specifies how to handle widows within a paragraph (lines appearing alone on the next page if the paragraph does not fit on the current one). Equivalent to the

      widows

      property. Widows and orphans are ignored if the

      page-break-inside

      property is set to

      avoid

      .

    • Orphans: Specifies how to handle orphans within a paragraph (lines appearing alone at the end of a page if the paragraph does not fit on the current one). Equivalent to the

      orphans

      property.

Spacing Tab

See also: Spacing.

  • Padding group: Defines padding (spacing inside the element) in measure or percentage:

    • All sides: Check to set all padding to use the Top value. Equivalent to the

      border

      property.

    • Top, Left, Bottom, Right: Set padding for each side. Equivalent to the

      border-left

      ,

      border-top

      ,

      border-right

      and

      border-bottom

      properties.

  • Margin group: Defines margins (spacing outside the element) in measure or percentage:

    • All sides: Check to set all margins to use the Top value. Equivalent to the

      margin

      property.

    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the

      margin-left

      ,

      margin-top

      ,

      margin-right

      and

      margin-bottom

      properties.

Border Tab

See also: Border.

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the

    border

    property.

  • Top, Left, Bottom, Right: Each group defines the following properties:

    • Width: Specify the thickness of the border. Equivalent to the

      border-width

      property.

    • Style: Specify the style of the border such as

      solid

      ,

      dashed

      or

      dotted

      . Equivalent to the

      border-style

      property.

    • Color: Specify the color of the border.  The color value must be a valid HTML Color Name, or a valid HTML Hex Color. Equivalent to the

      border-color

      property.

Advanced Stylesheet Rule

The Advanced editor is used to manually input rules. Note that to use this dialog, basic knowledge of CSS rules is a pre-requisite, as no check is currently done to verify that properties and values are correct.

  • Property List: Lists all the currently available properties for the selector.

    • Property: The name of the property. This must correspond exactly to a known property (see CSS Reference). An autocompletion drop-down displays to show possible values when typing.

    • Value: The value for the given property. The values must be valid for that property, see the CSS Reference link above and check the property for valid values.

  • New: Click to create a new line and type in the property.

  • Delete: Click to delete the currently selected property in the Property List.

  • Move Up: Move the currently selected property in the Property List up one position in the list.

  • Move Down: Move the currently selected property in the Property List down one position in the list.