You are here: Designer > Interface > Dialogs > Stylesheets
 

Style sheets dialog

The Stylesheet editor dialog is used to edit CSS Stylesheet resources. For the time being, only two contexts are editable: Global (context_all_styles.css , which by default applies to all contexts) and Print (context_print_style.css , which by default applies to the print context only).

  • Context: Use the drop-down to select a specific context such as Print or Global (all contexts). 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 and how it affects all elements subject to that selector.

At any point you can click on the Advanced button to see the Advanced Stylesheet Rule. See Advanced Stylesheet Rule.

Type Tab

  • General group:
    • Font: Select the font used to display text. This is equivalent to the CSS font-family property.
    • Size: Enter the size in measure, named size or percentage. This is equivalent to the CSS font-size property.
    • Color: Select a named font color as defined in the Colors Editor, create a new color or enter a color manually for text to be displayed. The color value must be a valid HTML Color Name, or a valid HTML Hex Color. This is equivalent to the CSS color property.
    • Background Color: Select a named font color as defined in the Colors Editor, create a new color or enter a color manually for the background color of the element. The color value must be a valid HTML Color Name, or a valid HTML Hex Color. This is equivalent to the CSS backround-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-styletoitalic.
    • Underline: Sets text-decorationtounderline.
    • 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-heightproperty.
    • Align: Select how text should be aligned, such asleft,center,rightorjustify. Equivalent to thealignproperty.
    • First Indent: Specify the indentation of the first line of each paragraph in the element. Equivalent to thetext-indentproperty.
    • Display: Select how to display the element. This can also be used to hide an element completely using thenoneoption. See CSS Display. Equivalent to thedisplayproperty.
  • Breaks group:
    • Before: Specifies how to handle page breaks before the element. Equivalent to the page-break-before property.
    • Inside: Specifies whether to accept page breaks within the paragraph. Equivalent to the page-break-inside property.
    • After: Specifies how to handle page breaks after the element. Equivalent to the page-break-after property.
    • Widows: Specifies how to handle widows within the 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 the 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

  • 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-rightandborder-bottomproperties.
  • 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 marginproperty.
    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the margin-left,margin-top,margin-rightandmargin-bottomproperties.

Border Tab

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the borderproperty.
  • Top, Left, Bottom, Right: Each group defines the following properties:
    • Width: Specify the thickness of the border. Equivalent to the border-widthproperty.
    • Style: Specify the style of the border such as solid, dashed or dotted. Equivalent to the border-styleproperty.
    • 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-colorproperty.

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.