Learn How to Create Your Own Document Style

What are Notebooks’ Document Styles?

Document Styles set the overall appearance of formatted documents and rendered Markdown documents. They define font and font size, set hyphenation, line spacing, size, weight and color of headings, alignment and decoration of images, the exact appearance of lists and checklists and much more. By changing the style you quickly change a document’s appearance without touching any other setting.

Notebooks’ document styles are regular Cascading Style Sheets (CSS) which are widely used to define the appearance of websites.

How Notebooks Selects a Style

The Document Style is an inherited attribute which you can set at multiple levels:

1. You define the global default in Notebooks’ settings. This style is used when no other style applies.
2. In a book’s info you can select a specific style to be used for all of the book’s contents.
3. In a document’s info you can pick an individual style for that very document.

When selecting the document style, Notebooks first looks at the current document and then searches up the hierarchy of parent books until it finds a setting for the document style. If Notebooks reaches the top level without finding a specific setting for the document style, Notebooks falls back to the global default.

Add and Edit Notebooks’ Document Styles

If you want to go beyond the set of Notebooks’ pre installed styles and if you are familiar with CSS, you can easily define and add your own styles. We provide a few style sheets in our download area. You can use those as a starting point for your own styles.

Notebooks expects custom styles in the hidden book NBResources/CSS at its top level. This makes sure that styles you add on one device are available on all other synced devices.

On your Mac

If you use iCloud, Dropbox or WebDAV to sync your documents, or if you are using Notebooks for Mac or PC, you can access and edit your custom document styles directly from the folder NBResources/CSS at the top level of Notebooks’ root folder. In case the folder does not yet exist, feel free to create it and add your own .css files. All .css files you add to this folder automatically appear in Notebooks’ list of available document styles.

On your iPhone or iPad

You can create and edit custom document styles directly from within Notebooks on your iPad or iPhone as well:

1. In Notebooks’ Settings > Write and Edit > Document Style, scroll all the way down and select Add Your Own.
2. An editing window appears and displays the minimum required settings for a style. This includes the placeholders for the style’s title, font, font size and other parameters that automatically pick up a document’s settings.
3. Add and modify the style sheet to your liking. When you are done, tap Save to make your new style available in the list of installed styles.

Alternatively, you can also open and edit your custom styles like regular documents on your iPhone or iPad: just search Notebooks for NBResources and the hidden book will turn up. Now navigate to CSS and open your styles.

Add Notebooks’ Attributes to your CSS

Notebooks dynamically applies settings for text alignment, hyphenation, font, colors, etc. through a set of variables. There are two options to add these variables to your own style:

Inherit From Existing Styles

Rather than creating each style sheet from scratch and maintaining it, you can base your own style sheets on an existing style and adjust specific elements or aspects. So with a few lines you could have your own color variation of the default theme, for example.

The option to inherit from existing styles requires at least Notebooks 10 (iOS/iPadOS) or Notebooks 2 (macOS)

To create a new style based on the default theme, your custom style sheet could like like this:

<style type="text/css">
@nb_include: "Default Theme";
/* Add your own code below */

</style>

The name given in quotes must be a style that already exists; it can be one of Notebooks’ pre installed styles, but it can also be one of your own styles.

The most basic include, which makes sure that Notebooks’ fonts and settings are included and checklists are rendered correctly, is:

@nb_include: "Basic";  

Specific Attributes

If you don’t want to reuse any of Notebooks’ default themes, or if just you want to change some specific values like the theme color, for example, you can refer to the list below to find all variables and placeholders with special meaning in Notebooks.

/* This section defines the global color theme; adjust those
   variables in your own theme to change colors */
:root {
    --theme-color: #<col>;          /* color for headings and emphasis */
    --checkbox-color: #<col>;       /* color for the checkboxes*/
    --checkbox-done-color: #<col>;  /* DONE checkboxes */

    /* The Default Theme adds a few more variables: */
    --dimmed-divider-color: #<col>; /* used for dividers, tables, etc. */
    --accent-color: #<col>          /* to colorize blockquotes, links, etc. */
}

/* Notebooks replaces the placeholders below with the corresponding settings
   on the fly. */
body {
    font-family: **NotebooksFont**;
    color: **NotebooksFontColor**;
    font-size: **NotebooksFontSize**;
    line-height: **NotebooksLinespacing**;
    background-color: **NotebooksBGColor**;
    background-image:url('**NotebooksBGImage**');
    text-align: **NotebooksTextAlign**;
    -webkit-hyphens: **NotebooksHyphens**;
}