How to customize Ulysses

HTML 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 HTML documents just using regular CSS files.

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

Using CSS in Ulysses

CSS (Cascading Style Sheet) files allow you to style web pages 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 HTML.

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;
}

See also: text-indent margin

…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

…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;
}

See also: font-size, margin-top, margin-bottom

…justify the text of paragraphs?

Add the following line to your p selector:

p {
  text-align: justify;
}

See also: text-align

Tag Reference for HTML Export

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

Structure

Markup Definition HTML Output CSS Selector
Heading 1 <h1>…</h1> h1
Heading 2 <h2>…</h2> h2
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 class="footnote">Index</a>a/sup>
Reference: <ol id="footnotes"><li>…</li></ol>		 sup, a.footnote
ol#footnotes

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 for styling 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 26, 2019.