11. CSS Bonus ↑

11.3. Supplying your own CSS file

Yet another option for adjusting the CSS used within Notenik is to place a file named display.css within your collection folder. This CSS will then be used in place of Notenik’s default CSS for that collection.

An easy way to start this process is to select Collection > Generate Sample Display Template.

Two new files will then be generated within your collection folder.

• display.css
• display.html

For our purposes now, delete the display.html file, since we won’t need that just to customize our CSS.

Then open the display.css file with your trusty text editor.

What you’ll see now will be all of the default CSS supplied by the version of Notenik that you are using.

Now feel free to completely replace all of this, or to add/delete/modify any bits and bobs that aren’t quite to your satisfaction.

When you’re done making your edits, save your changes within your text editor, then go back to your Notenik collection and select Collection > Reload Collection (Opt-Cmd-J). You should now see the results of your CSS changes.