Notebooks uses so called Document Styles to set the overall appearance and format of formatted documents and rendered Markdown. The styles include settings like hyphenation, line spacing, size and weight of headings, size and decoration of images etc.
The style is an inherited attribute which you can set at several levels:
- Globally in Notebooks’ settings
- For a book and its contents in a book’s info
- For a single document in the document’s info
If you want to go beyond Notebooks’ pre installed styles (and if you are familiar with cascading style sheets), you can easily define and add your own styles.
Add and Edit Styles on iPad or iPhone
- In Notebooks’ Settings > Write and Edit > Document Style select Add Your Own
- An editing window appears and displays the minimum required settings for a style. This includes the placeholders for font, font size and other parameters that automatically pick up a document’s settings.
- You are free to 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.
Notebooks saves (and expects) custom styles in a 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.
If you want to open/edit the styles like regular documents on your iPhone or iPad, just search Notebooks for NBResources and the hidden book will appear.
Add and Edit Styles on Mac or PC
If you use Dropbox or WebDAV to sync your documents, or if you are using Notebooks for Mac or PC, you can access and edit the styles directly from the NBResources/CSS folder at the top level of your sync folder, or Notebooks’ Home respectively.
In case the folder does not yet exist, feel free to create it (in Finder or Windows Explorer) and add your own css files.
A few style sheets are available in the download area; they can be a good starting point for your own 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 in Notebooks 10 (iOS/iPadOS) and Notebooks 2 (macOS)
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.
To create a new style based on the default theme, start your style with the following line:
@nb_include: "Default Theme";
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, would be:
Manually add the Variables to your Style
If you use an older version of Notebooks, or if you don’t want to reuse any of Notebooks’ settings, you can add a couple of variables to your CSS by adding the following lines to the
body section of your style sheet:
font-family: **NotebooksFont**; font-size: **NotebooksFontSize**; color: **NotebooksFontColor**; background-color: **NotebooksBGColor**; background-image: url('**NotebooksBGImage**'); text-align: **NotebooksTextAlign**; -webkit-hyphens: **NotebooksHyphens**; line-height: **NotebooksLinespacing**;