Class Reference
This section describes all available classes that can be used to style the export of an Ulysses document. We distinguish between two major types of style classes: General classes and Definition classes.
General Classes
General classes are all style classes used to define the visual appearance of the entire exported document (e.g. document-settings
or header
). Currently, the following general classes can be used:
Class Group | Description |
---|---|
Document Settings | Used to describe all settings regarding the appearance of the exported document. |
Headers and Footers | Describes the layout and the content of the header/footer of a page. Can be used to setup running headlines or page numbers. Inherits all inline and paragraph style settings. Provides special pseudo-classes :first-page , :left-page and :right-page that allow to style headers/footers on two-sided documents differently for first, left and right pages. |
Footnotes Area | Describes the layout and the content of the area containing the footnotes of a page or the endnotes of a section/document (see footnote-placement ).Please note that some styling options are only available to PDF export. Elements inside a footnote can be styled by using a relative style selector on inline-footnote , such as inline-footnote paragraph { … } . |
Definition Classes
Definition classes are all style classes that can be used to style content with a concrete definition in your Ulysses document (e.g. strong
or headline
). You may currently use the following definition classes:
Definition Classes | Selectors | Description |
---|---|---|
Inline | inline-strong , inline-emphasis , inline-code , inline-citation , inline-comment , inline-raw , inline-mark , inline-delete , inline-link |
Inline classes are used for definitions typically applied to inline contents. The style settings of all parent elements (e.g. paragraphs, lists) will be also inherited to inline elements. |
Media | media-image |
Media classes are used to style image-like contents. To style figure-like images there is a special paragraph style paragraph-figures that also allows to style the caption of figure-like images. |
Footnotes | inline-footnote , inline-annotation |
Footnote classes are used to style any footnote-like content, like footnotes or annotations. Footnote classes have a special pseudoclass :anchor that allows the styling of the anchor. This is especially useful for annotations, to style the annotated content differently from the anchor. |
Paragraph | paragraph , heading-1 , heading-2 , heading-3 , heading-4 , heading-5 , heading-6 , heading-all , defaults |
Paragraph classes are used for definitions typically applied to paragraph-level nodes. The style settings of all parent elements (e.g. lists) will be also inherited to the paragraph style. Inline-style settings specified in a paragraph class will be applied to all child nodes, if not overwritten. |
Figures | paragraph-figure |
This style will be applied to all paragraphs that only contain images (besides whitespaces and comments). Images inside such a paragraph will be exported as figures with an optional caption. See media-image for more information on image styling. |
Figure Captions | figure-caption |
This style will be applied to the caption of a Figure or a Table. The caption inherits the style settings of the surrounding figure or table. It is possible to style figure and table captions individually by using a relative style selector. |
Divider | paragraph-divider |
The divider class is used to separate parts of the document logically. It may be either used to add a styled separator or to add a page break. |
Block | block-quote , block-code , block-raw , block-comment , block-all |
Block classes are used for any contents grouping multiple paragraphs, such as blockquotes or lists. They provide the same settings as paragraph classes. The top and bottom margins of a block will be applied to its first and last paragraph. |
List | list-ordered , list-unordered , list-all |
Lists are special blocks that consists of a list of items. Each item has an enumerator that may be counted. Lists have a special pseudoclass :enumerator that allows the styling of the enumerator of each item. |
Table | table |
The table class is used for styling an entire table. It provides default settings for cells of the table as well as settings that apply to the table as whole (e.g. borders and margins of the table). The caption of a table is placed above it and uses the figure-caption style. |
Table Cell | table-cell |
Every table consists of multiple table cells that are arranged in rows and columns. Table cell styles allow you to define the visual appearance of cells. Cells can be surrounded by separators, whereas each cell has a row separator on its bottom side and a column separator on its right side. You can define the background colors of cells using the cell-color setting and even define alternative row / column colors using alternate-row-color and alternate-column-color .There are also various pseudoclasses for styling the headers of a table, such as :header for styling all headers and :header-top for styling all headers bound to the top of the table. You can also style cells that are at the boundary between headers and non-header areas using separator pseudoclasses (e.g. :header-top-boundary or :header-bottom-boundary ). |
Syntax Highlight | syntax-all , syntax-comment , syntax-constant , syntax-entity , syntax-parameter , syntax-tag , syntax-keyword , syntax-string , syntax-variable , syntax-error , syntax-escape , syntax-heading , syntax-italic , syntax-bold , syntax-deleted , syntax-inserted , syntax-changed , syntax-list , syntax-link |
Syntax classes are used for styling the highlighted text inside code blocks. Ulysses applies these syntax classes to the contents of a code block depending on the selected programming language. You can also download an example document that contains all available syntax classes. |
Technical | ulysses-tag , ulysses-whitespace , ulysses-escape-character , ulysses-escape |
Technical styles can be used for exporting Ulysses documents with full markup and whitespaces. Besides ulysses-escape , all technical styles are hidden by default. |
Table of Contents | table-of-contents |
The table-of-contents class is used for styling an entire table of contents. It provides default settings for single items as well as settings that apply to the table of contents as a whole. |
Table of Contents Item | table-of-contents-item |
The table-of-contents-item class is used for styling a single item of a table of contents. These items are always embedded in a table-of-contents block. Each heading level can be styled independently using pseudoclasses. |