Styling documents

The Format menu enables you to change the appearance of your documents using cascading style sheets (CSS)

Applying/Removing a theme

Amaya provides by default two different themes (Classic, Modern) that allow you to style the current document.

To change the document presentation with a theme:

• Select Classic or Modern in the theme list proposed by the Style tool,
• or select Classic or Modern in the Format/Theme submenu.

To remove the current theme:

• Select No theme in the theme list proposed by the Style tool,
• or select No theme in the Format/Theme submenu.

All these changes can be undone (Edit/Undo or Ctrl-z).

When a theme is applied to a document, Amaya generates a style element whose content comes from Amaya/config/Classic.css or Amaya/config/Modern.css files. You can create your own Classic.css and Modern.css files in the AmayaHome directory. If you do so, Amaya will use them instead of default config files.

Applying specific style

Some styles properties like color, background color, font, alignment, line spacing, or indent may be applied to a piece of text or to a whole element using either the Style tool or one of the submenus of the Format menu.

To apply a specific style:

1. Select a piece of text or an element.
   To select an element, click within the element, then use the F2 key until the bottom line of the window displays the type of the element in the first position. You can also use the structure view to select an element.
2. Choose the right entry within the Style tool or in the Format menu.

   The Style tool provides two buttons for for each color you may set (the text color and the background color). The first button allows you to apply its current color; the second button allows you to choose another color and to apply it.

To remove a specific style:

• The Style tool does not allow you to remove specific style. You have to use the No color or Default entries of the Format submenus.
• In the Advanced editing profile, you can directly edit the attribute style.

Associating a class to an element

All values available for the class attribute in the document are listed in the Apply class tool.

To apply a class to an element:

1. Choose the value in the Apply class tool.
2. If you want to select the class applied to another element, you have to select this element, then click the button. The Apply class list is refreshed and the class used by the selected element is highlighted.
3. Select a piece of text or an element.
   To select an element, click within the element, then use the F2 key until the bottom line of the window displays the type of the element in the first position. You can also use the structure view to select an element.
4. Click the button to apply the class to the current selection.
   If a piece of text is selected, Amaya generates a span element to enclose the current text and the class attribute is attached to this new span element.

To associate a class with an element, you can also use the Attributes tool (advanced profile only). This tool also enables you to delete a class attribute from an element or to change it (the class attribute is handled like any other attribute).

To remove the class of an element:

• You can edit the class attribute in the Attributes tool.

  When the element is selected, click on the [X] of the entry to remove the class attribute, or click on the entry and edit its value then confirm with the apply button.

• You can also remove or edit the class attribute in the structure view.

  To remove the class attribute, click in the value, F2 lets you select the whole value, then hit the Delete key twice.

Using HTML style elements

Two submenus of the Insert menu enable you to add HTML elements that change the style of text: Information type and Character element.

Information type elements

The Information type submenu lists HTML elements that define abstract styles.

To apply an information type:

1. Select a character string in your document.
2. Choose an option from the Information type submenu.

   The selected character string displays in the chosen style.

Five of these Information elements are also available in the Elements tool: emphasis ( ), strong ( ) code ( ), insertion ( ), and deletion ( ).

Character elements

The Character element submenu of the Insert menu provides another set of style elements.

To apply a character element:

1. Select a character string in your document.
2. Choose an option from the Character element submenu.

   The selected character string displays the chosen style.

Two of these Character elements are also available in the Elements tool: ^superscript ( ), and _subscript ( ).

Removing information type or character elements

 All commands of the submenus Information type and Character Elements are cancelled when you apply them twice.

To remove a style element:

1. Select the character string for which you want to remove the particular style.
2. Reapply the command from the Information type or Character element submenu of the Insert menu, or use the buttons in the Elements tool: emphasis ( ), strong ( ), code ( ), insertion ( ), and deleltion ( ), ^superscript ( ), and _subscript ( ).

If you want to insert normal text (i.e. without any style), within a styled character string, put the insertion point at the desired position, and activate the command corresponding to the style you want to remove (in the Information type or Character element submenu of the Insert menu, or use the buttons in the Elements tool).

Using the style editor

Note: The style editor is not available in the Amaya Lite editing profile.

The Style editor entry in the Format menu, or the button in the button bar, enables you to create a list of CSS style properties through a dialog box with 4 different tabs: Characters, Colors, Boxes, Format.

When a set of properties is set, you can Apply them to the current selection:

• If the selection is within a formatted view, Amaya generates a style attribute on the current element, creating a span element if only a character string is selected.
• If the selection is within the source view, or a within a CSS file, Amaya generates the CSS syntax for the chosen properties at the current position.

In any case image paths included in the list of properties (background-image, list-style-image) are transformed into paths relative to the selected document.

Linking external and user style sheets

Note: These actions are not available in the Lite profile.

A document can link to several external style sheets that are downloaded with the document and applied to it.

An external style sheet can apply to multiple documents. When the same style sheet applies to several displayed documents, Amaya downloads only one instance of the style sheet.

You can define a specific style sheet that applies to all documents downloaded on your system. This style sheet is called the user's style sheet. It is stored in your local environment, in the AmayaHome directory as the local file amaya.css.

For example, if you prefer to display documents in Helvetica on your screen and print them in small size, you can create a user's style sheet with following CSS rules:

@media print {
 body {font-size: 10pt}
}
@media screen {
 body {font-family: Helvetica}
}

Handling external CSS style sheets

The Format/Style sheets submenu provides a set of commands which enable you to control external and user's CSS style sheets.

• Select Link to link a new CSS style sheet to the current document.

  This command shows a dialog box.

  • If the target CSS style sheet is displayed in another Amaya window and you want to select it by clicking, activate the Click button then click anywhere within that window to create the link.
  • If the target CSS style sheet is displayed in another tab and you want to select it by clicking, activate the Click button, then change tab and click anywhere within the target CSS style sheet to create the link.
  • If the target CSS style sheet is a local file you can use the Browse button to select it.
  • Otherwise, type in the URI (like http://www.w3.org/file.css) of the target CSS style sheet and then Confirm to create the link.

• Select Open to open a CSS style sheet applied to the current document.

• Select Disable to remove the effect of a CSS style sheet from the current document. This command does not change the CSS link in the document. It simply ignores it.

• Select Enable to reapply a disabled CSS style sheet to the current document. This command does not affect the CSS link in the document.

• Select Remove to remove an external CSS style sheet. This command is similar to the Disable command, but it also removes the link that attaches the external CSS style sheet to the document.

The Open, Disable and Enable commands can be applied to the user's preference style sheet, but the Link and Remove commands apply only to external CSS style sheets.

The List of style sheets tool  displays the list of style sheets applied to the document. It also lets you link/remove, disable/enable, and open style sheets.

Showing applied style

When multiple style sheets are attached to a document, it is ofen difficult to understand why an element is displayed with certain style properties. To help you in this situation, Amaya provides the Format/Show applied style command that displays all the CSS style properties applied to the first selected element.

You can then display the CSS rule that generates each property by double clicking on the property. As long as the CSS properties window is open, Amaya updates its content when the selection changes.

By hitting F2, you can see the CSS properties applied to enclosing elements. When you change the selection by clicking an element in the path of the status bar, displayed at the bottom of the window, CSS properties are updated too.

Creating a generic style for an element or a class

When a style attribute is associated with an element, you can use that element as a model for creating or modifying a style rule by using the Format/Create rule command.

Note: The removing of all style attributes generated by most word processors may be a tedious task which is fortunately performed by the Code clean-up command.

To create a generic style for an element or a class:

1. Select the element you wish to use as the model. By default the selection is set to the character string, and you have to press the F2 key to select the enclosing element.

   Note: You must select only one element and this element must have a style attribute.

2. Choose Create rule from the Format menu. Amaya opens a dialog displaying a list of CSS selectors. This list contains all classes that are defined for the current document (including those defined in the linked CSS style sheets), as well as the element type to which the style is associated.

3. Choose a selector in this list or enter a new class name or selector and click Confirm.

   The style of the selected element is then associated with the chosen selector and the style attribute is removed from the selected element. Its value is moved to the style element, in the document head, and all elements matching the selector are displayed with the new style.

   Note: When a new class is created with command Create rule, this class is automatically added to the list of the Apply class tool.