You Can Easily Access and Tweak Notenik's Default CSS

Notenik’s default CSS contains all of the styling Notenik applies to the each of your Notes, as they appear on the Display tab.

This CSS contains the code used to set the light or dark mode, or to use the System setting for light/dark mode (which of these you get will depend on your current light/dark setting in the Notenik preferences).

There are two relatively easy ways to access this CSS.

Option 1: Share Your Note as an HTML Doc

Notenik has a handy Share function beneath the Note menu (easily accessible via a keyboard shortcut). Note that this Share option is different from the one you will get by hitting the Share button in the toolbar!

Select the option beneath the Note menu and you will see a new Window titled Share a Note, giving you several sharing options. Under the Format heading, if you select HTML Document, then you will share all of the generated HTML used to Display the Note – including the embedded CSS, which you will find in the head section, between the starting and ending style tags.

If you select Copy to Clipboard as your output Destination, then hit OK, you can then paste the resulting output into a new file, using your preferred text editor.

Now delete everything up to and including the opening <style> tag, and everything starting with the closing </style> tag and down to the end, and you will have a file containing only the default CSS.

Save this in your Collection folder (the one containing your Notes) and name it display.css. Now reload your Collection and you should see your new CSS styling take effect.

Option 2: Generate Sample Display Template

Select the option named Generate Sample Display Template beneath the Collection menu.

You will then find two new files within your Collections folder, one named display.html and one named display.css.

For our purposes, you can (and should!) delete the one named display.html.

The one named display.css can then be opened and edited, using your preferred text editor, and you can then tweak the settings however it suits you.

When you are done, reload your Collection, and you should see your new CSS take effect.