Custom app-wide CSS

It is possible to provide a CSS file to be used regardless of the theme set by the user.


	Start by creating a new note and changing the note type to CSS
	In the ribbon, press the “Owned Attributes” section and type `#appCss`.
	Type the desired CSS. Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other

Seeing the changes

Adding a new app CSS note or modifying an existing one does not immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh the page first.

Sample use cases

Customizing the printing stylesheet

Tip

Since v0.99.2, it's no longer possible to use #appCss to customize the printing CSS, since the printing is now done in an isolated environment.

However, it's still possible to customize the CSS via ~printCss; see Printing & Exporting as PDF for more information.

Per-workspace styles

When using Workspaces, it can be helpful to create a visual distinction between notes in different workspaces.

To do so:

In the note with #workspace, add an inheritable attribute #cssClass(inheritable) with a value that uniquely identifies the workspace (say my-workspace).
Anywhere in the note structure, create a CSS note with #appCss.

Change the color of the icons in the Note Tree

.fancytree-node.my-workspace.fancytree-custom-icon {
    color: #ff0000;
}

Change the color of the note title and the icon

To change the color of the note title and the icon (above the content):

.note-split.my-workspace .note-icon-widget button.note-icon,
.note-split.my-workspace .note-title-widget input.note-title {
    color: #ff0000;
}

Add a watermark to the note content

Insert an image in any note and take the URL of the image.
Use the following CSS, adjusting the background-image and width and height to the desired values.

.note-split.my-workspace .scrolling-container:after {
    position: fixed;
    content: "";
    background-image: url("/api/attachments/Rvm3zJNITQI1/image/logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 237px;
    height: 44px;
    bottom: 1em;
    right: 1em;
    opacity: 0.5;
    z-index: 0;
}

Limitations

Some parts of the application can't be styled directly via custom CSS because they are rendered in an isolated mode (shadow DOM), more specifically:

The slides in a Presentation.

3.2 KiB Vendored Raw Blame History