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 Does Notebooks Select a Style

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

  1. You define the global default in Notebooks’ settings. This style is used when no other style has been specified.
  2. To use a different style for a book and all of its contents, set it in the book’s info.
  3. To pick an individual style for a single document, select it in the document’s info.

When selecting the document style, Notebooks first looks at the current document and then searches up the hierarchy of parent books. If it 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 a Mac or PC

If you use iCloudDropbox 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 iPad or iPhone

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 () */
}

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

One thought on “Create Your Own Document Style

  • August 27, 2012 at 5:13 pm
    Permalink

    I have been wanting an “all in one” app for notes that would sort out folders well, and this is good so far. Also I needed was something that will work along with Scrivener, and this is doing it fairly well. There are no other apps out there that will blend with “writing apps” such as Scrivener as far as I can tell. I have tried all of them too.

    No, I’ll stick with “Notebooks” and watch for more improvements as time passes. As long as it’s not “buggy” you’ll always be modifying and improving it. Who knows, you may develop more apps off of this one, like a writer’s app, project management, etc. Actually this Notebooks will perform the Project Management fairly well already. Hey, throw a calendar in there while you’re at it!

    I would say though that so far this is the best app of its kind, and as I stated before, I have tried them all. This is a nice, clean, easy to navigate app with all of the areas that I need for entering data, transferring folders & photos, and notes fro other sources. My “Notebooks” will soon be full.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *