How to customize Ulysses

ePub Styles

Export styles let you customize the look of your exported Ulysses documents. Ulysses comes with a number of built-in styles for each export format, but as a Mac user, you can also create your own. You can style ebooks just using regular CSS files.

Table of contents (use the links to jump directly to the respective article section):

Using CSS in Ulysses
How to:
Tag Reference for ePub Export

Using CSS in Ulysses

CSS (Cascading Style Sheet) files allow you to style ebooks using simple declarations. There is a myriad of web resources on CSS. For a general introduction, the CSS tutorial from W3Schools explains the basics and all important properties. It also includes a reference. For some interesting tricks and hacks, have a look at the Snippets section of CSS-Tricks.

For editing CSS, you can use just about any text editor, such as TextMate, Sublime, Chocolat or BBEdit/TextWrangler.

In general, we recommend starting with one of Ulysses’ built-in styles. Open “Ulysses” › “Preferences” and switch to the Styles tab. Right-click on a style and select “Duplicate” to create a copy. Right-click the copy again and select “Edit” to view and modify it in your favorite text editor. You can then use the new style in Quick Export or during Export Preview.

Below, you can find some CSS code snippets for things you might or might not want to tweak when exporting to ePub.

How do I…

…indent all paragraphs except the first?

Replace the settings for paragraph (i.e., all p selectors) with the following code snippet:

p {
  margin: 0;
}

p + p {
  text-indent: 1.5em;
}

…change the way lists look?

Just add a list-style-type property, as follows:

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

The first line changes the style of unordered (i.e., itemized) lists from circles (the default) to squares. The second line changes the style of ordered lists from decimal numbering to upper-case Roman numbering.

See also: list-style-type

…use the default styling for dividers in the “Default” template for ePub?

Remove all lines starting with the hr (horizontal row) selector from the CSS file.

…change the font size and spacing between the headings?

Open the CSS files and look out for the properties font size and margin-top/margin-bottom in the h1-h6 selectors. For instance, the following sets the font-size to 1.5 em and the margin at the top and bottom to 0.5 em for level 2 headings:

h2 {
  font-size: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

…justify the text of paragraphs?

Add the following line to your p selector:

p {
  text-align: justify;
}

Please note that in the case of ePub, most readers already justify text automatically.

See also: text-align

Tag Reference for ePub export

The following table gives a mapping from Ulysses markup definitions to HTML tags used in ePub export. Ellipses (“…”) are replaced with the text inside the tags.

Structure

Markup Definition	HTML Output	CSS Selector
Heading 1	`<h1 class="chapter-title">…</h1>`	`h1.chapter-title`
Heading 2	`<h2 class="section-title">…</h2>`	`h2.section-title`
Heading 3	`<h3>…</h3>`	`h3`
Heading 4	`<h4>…</h4>`	`h4`
Heading 5	`<h5>…</h5>`	`h5`
Heading 6	`<h6>…</h6>`	`h6`

Paragraph

Markup Definition	HTML Output	CSS Selectors
Comment	(Deleted)
Divider	`<hr />`	`hr`
Code Block	`<pre><code>…</code></pre>`	`pre`, `code`
Raw Source	(Unchanged)

Grouping

Markup Definition	HTML Output	CSS Selectors
Ordered List	`<ol><li>…</li></ol>`	`ol`, `li`
Unordered List	`<ul><li>…</li></ul>`	`ul`, `li`
Block Quote	`<blockquote>…</blockquote>`	`blockquote`

Text

Markup Definition	HTML Output	CSS Selector
Strong	`<strong>…</strong>`	`strong`
Emphasis	`<em>…</em>`	`em`
Marked	(Unchanged)
Delete	(Deleted)
Inline Comment	(Deleted)
Inline Code	`<code>…</code>`	`code`
Inline Raw Source	(Unchanged)

Attributed Text

Markup Definition	HTML Output	CSS Selector
Link	`<a href="URL" title="Title">…</a>`	`a`
Annotation	(Deleted)

Text Objects

Markup Definition	HTML Output	CSS Selectors
Image	`<img src="URL" title="Title" alt="Desc." />`	`img`
Video	`<video src="URL" title="Title" />`	`video`
Footnote	Link: `<sup><a epub:type="noteref" class="footnote">Index</a></sup>` Reference: `<aside epub:type="footnote">…</aside>`	`sup`, `a.footnote`

Syntax Highlight

If a programming language is set for a code block, the <code> element will have two additional CSS classes:

code-highlighted: Specifies that a code block has a syntax highlight in general.
code-LANGUAGE: Specifies that a code block is highlighted for a specific language (e.g. “code-swift”).

Inside the <code> element, Ulysses will place highlighted text inside <span> elements. All highlighted elements will have two CSS classes:

syntax-all: A class that is applied to all highlighted elements. It allows to style highlighted elements in general (e.g. to make all highlighted elements bold).
syntax-TYPE: A class that is specific to the type of highlight.

Here is an overview of the CSS classes used to highlight code syntax. You can also download an example document that contains all available syntax classes.

Syntax Class	Meaning
syntax-all	This class is applied to highlighted elements in general.
syntax-bold	This class is applied to bold formatting (Markdown only).
syntax-changed	This class is applied to content marked as modified (e.g., Diff syntax).
syntax-comment	This class is applied to comments in the code.
syntax-constant	This class is applied to constants.
syntax-deleted	This class is applied to content marked as deleted (e.g., Diff syntax).
syntax-entity	This class is applied to entities and symbols (e.g., type names, function names, attributes).
syntax-error	This class is applied to invalid syntax.
syntax-escape	This class is applied to escaped characters in strings.
syntax-heading	This class is applied to headings (Markdown only).
syntax-inserted	This class is applied to content marked as inserted (e.g., Diff syntax).
syntax-italic	This class is applied to italic formatting (Markdown only).
syntax-keyword	This class is applied to language-specific keywords.
syntax-link	This class is applied to hyperlinks (Markdown only).
syntax-list	This class is applied to lists (Markdown only).
syntax-parameter	This class is applied to function parameters (only some languages).
syntax-string	This class is applied to text strings.
syntax-tag	This class is applied to tags (only HTML, XML).
syntax-variable	This class is applied to variables.

This article was last updated on February 27, 2019.