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 (_all_styles.css, which by default applies to all ), 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....
- : 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
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.
- Name: The CSS selector
to which this rule applies. Since CSS are not specific to PlanetPress Connect,
any selector used in regular CSS 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. 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-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 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-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
- 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.
|
|