1.3.5. User-defined styles

Inline-styles
In Section 1.3.1, “Sections, paragraphs and predefined styles” you have already applied predefined inline-styles to text. In addition to these predefined styles, you can also create custom inline-styles. As an example we will create a custom inline-style named "gloss_term" which could be used to highlight terms that are explained in a glossary. To do this, switch to the "Styles" workspace:

Figure 1.3.53. The styles workspace

The first list in this workspace is the "Inline Styles" list. Initially this list contains all predefined inline-styles. Click the "New" button next to the list, to add your own custom inline-style. This will open the following style-dialog:

Figure 1.3.54. New style dialog

Enter the text "gloss_term" as Style-ID, and the more descriptive text "Glossary term" as Style-Name. We now have to the define the style-properties of this inline-style. In our example a glossary term shall be formated in bold and underlined. Therefore, click the "Style Editor ..." button to open the CSS style-editor. In this dialog you can define CSS properties (as specified by the W3 consortium). 

Figure 1.3.55. CSS style-editor

Select "bold" from the "Weight" listbox and check the "underline" checkbox. Click the "Update" button to close the CSS style-editor. Then click the "Okay" button of the style-dialog to create the style and to close the dialog. The new "gloss_term" style is now contained in the "Inline Styles" list and is ready to be used.
Switch to the "Content" workspace and open the previously created content-node in the content-editor. To apply the new style, select one or more words within a paragraph , and then choose the "Glossary term" entry from the "Styles" listbox in the content-editor's toolbar . The style is then applied to the selected text (see screenshot below).

Figure 1.3.56. Applying a user-defined style

You can remove the inline-style by repeating the same steps, i.e. selecting the complete text from which the inline-style shall be removed, and then selecting the style to be removed from the "Styles" listbox. Alternatively you could press the "Remove formatting" button ().
Block-Styles
Besides inline-styles which can be applied to a sequence of characters/words, another type of style exists which is called block-style. A block-style is a style that can only be applied to a complete block-element or to a sequence of block-elements. A block-element is either a header, a paragraph, a list, a table, a table-row or a table-cell. It is not possible to apply a block-style to a single word or a sequence of words.
As an example we will create a block-style named "quote_block" that could be used to mark paragraphs containing quoted text. The formatting of a quoted block shall be as follows:
  • left-margin of 30 points
  • top- and bottom-margin of 8 points
  • dashed black borderline
  • padding of 8 ponits
  • yellow background-color 
Switch to the "Styles" workspace. The second list in the "Styles" workspace is the "Block Styles" list. Initially this list contains all predefined block-styles. Click the "New" button next to the list, to add your own custom block-style.

Figure 1.3.57. Creating a new block style

The following style-dialog will be opened:

Figure 1.3.58. New style dialog

Enter the text "quote_block" as Style-ID, and the more descriptive text "Quotation block" as Style-Name. We now have to define the style-properties for this block-style. Therefore, click the "Style Editor ..." button to open the CSS style-editor. Switch to the "Background" tab and enter a yellow background-color (e.g. #ffff99):

Figure 1.3.59. Setting the background color to yellow

Then switch to the "Box" tab and enter the padding and margin values as shown in the following screenshot:

Figure 1.3.60. Setting the padding and margin values

Finally, switch to the "Border" tab and enter border properties as shown in the following screenshot:

Figure 1.3.61. Setting the border properties

Click the "Update" button to close the CSS style-editor. The style dialog will now show a preview of the style:

Figure 1.3.62. Preview of style

Finally click the "Okay" button of the style-dialog to create the style and to close the dialog. The "quote_block" style is now contained in the "Block Styles" list and is ready to be used.
Switch to the "Content" workspace and open the previously created content-node in the content-editor. Append two new paragraphs to the end of the content and then select the two paragraphs :

Figure 1.3.63. Applying a block-style to selected paragraphs

Note: Selecting paragraphs
To select paragraphs with the mouse, move the mouse pointer to the beginning of the first paragraph, click the left mouse button, move the mouse pointer to the end of the last paragraph while keeping the left mouse button pressed. Finally release the mouse button. To select the paragraphs with the keyboard, move the cursor to the beginning of the first paragraph, press Shift, move the cursor to the end of the last paragraph (e.g. using the Arrow keys), while keeping the Shift key pressed, and finally release the Shift key.
After you have selected the two paragraphs, choose the "Quotation block" entry from the "Styles" listbox in the content-editor's toolbar (the block-styles are listed in a separate section after the inline-styles). The style is then applied to the selected paragraphs:

Figure 1.3.64. Block-style "Quotation Block" applied to two paragraphs

You can remove the applied block-style by repeating the same steps, i.e. selecting the complete block from which the style shall be removed, and then selecting the style to be removed from the "Styles" listbox. Alternatively you could press the "Remove formatting" button ().
Note: Selecting path-elements
When you apply a block-style to one or more paragraphs, then the paragraphs are enclosed within a block-element. On the XHTML source level this is a div-element. When you place the cursor somewhere within the content, you can see the nesting of the elements in the status line of the content-editor (Path).
A simple way to select a complete block is to place the cursor somewhere within the block, and then to click on the corresponding element in the path, which is shown in the status line of the content-editor. In the example above, click on the element div.quote_block. This will select the complete div-block:

Figure 1.3.65. Selecting a path-element

This method can also be used to select a single paragraph or a phrase to which an inline-style was applied. For example, to select a single paragraph, place the cursor within the paragraph and then select the p-element (paragraph) shown in the path.
Style variants
A style variant is a style which has the same Style-ID than another style, but has an additional variant name assigned. This way it is possible to create different formatting variants for the same style. The output-configuration for a publication allows to set a variant name which defines the preferred style variant to be used for the formatting of the publication. This way it is possible to export the same publication in several different formatting variants, e.g. one variant for web- and one variant for print-output.
As an example we will create a variant of the "quote_block" style, which better fits the needs for greyscale print-output, i.e. which has a grey background-color (instead of yellow) and a solid borderline (instead of dashed). To do this, switch to the "Styles" workspace and select the "quote_block" entry from the "Block Styles" list. Then click the "Create Variant" button next to the list. This will open the following dialog:

Figure 1.3.66. Creating a style variant

Enter a variant name, e.g. "print", and click the "Okay" button. This will add a new style to the "Block Styles" list. This new style is a copy of the "quote_block" style, but with the entered variant name assigned (see red arrow in the screenshot below):

Figure 1.3.67. The variant style is as a copy of the base style

Double-click the created variant style to adapt the style-properties, i.e. set the background-color to grey and the borderline to solid (see above on how to edit a block-style). The "print" variant of the "quote_block" style has now a different formatting than the "quote_block" base style (see screenshot below).

Figure 1.3.68. Variant style with different formatting than base style

Switch back to the "Content" workspace. The preview-area should still display the content-node which contains our example quotation block. As you can see, it still has a yellow background-color. Also refreshing the preview-area by clicking the "Reload" button () will not change the background-color to grey. The reason for this is, that we did not adapt the output-configuration to use the newly created style variant.
Therefore, we will update the output configuration for the export-format PDF to use the style variant "print". To do this, switch to the "Publishing" workspace and select the "pdf" entry in the "Output Configurations" list:

Figure 1.3.69. Editing the output configuration

Click the "Edit" button next to the list, to edit the settings of the selected configuration (or double-click the list entry). This will open the output-configurations dialog:

Figure 1.3.70. Setting the style variant in the output configuration

Select the "print" entry from the style variant listbox (see red arrow in the screenshot above) and click the "Okay" button to save the changes and to close the dialog. Now switch back to the "Content" workspace and click the PDF-preview button () in the toolbar. This will open the PDF preview window:

Figure 1.3.71. PDF preview with selected output configuration

If the PDF does not display the quoted paragraphs with grey background-color, then assure that you have selected the output-configuration with name "pdf" from the output-configuration listbox . After selecting an output-configuration from the listbox, you have to click "Reload" to recreate the PDF-preview.
In the HTML preview, the quotation block will still be rendered with yellow background-color and dashed borderline. The reason for this is, that we have only set the style variant for the output-configuration "pdf", but not for the output-configuration "html".