Custom CSS (TODO)

TODO introduction

How To Add Custom CSS¶

There are two options to add custom CSS:

Edit the styles directly.

This is the recommended way for most people to modify the CSS.
Add SCSS files.

These SCSS files are built with the note to extend the current CSS.

This is recommended way for people who build the note.

Option 1: Edit the styles directly (click here)

TODO video

Navigate to the following:

(Main window) → Browse → Cards... (middle of the screen) → Styling (top left)
Scroll all the way to the bottom, and add any CSS to the bottom of the styles.

Option 2: Add SCSS Files (click here)

Build the note if you haven't already, and ensure everything works.
Create the following folder structure: (project root)/overrides/scss/extra. The project root is usually jp-mining-note.
Add the folder to the end of css-folders list in config.py. For example:
```
"css-folders": ["base", "responsive", "dictionaries", "extra"],
```
TODO update the exact folders
Under the extra folder, use the following files to override the correct CSS:
- style.scss: The main CSS for the card templates. This is likely the file you want to edit, when adding custom CSS.
- field.scss: The CSS used by CSS injector to customize individual fields.
- editor.scss: The CSS used by CSS injector to customize the editor around the fields.
All of the files are optional. This means you do not need to create all three files for the folder to be valid.

The resulting folder should be of the format:
```
(project root)
  L overrides
     L scss
        L extra
           L field.scss
           L editor.scss
           L style.scss
```
Rebuild and reinstall the template. The CSS should be automatically applied to the note.

Last update: May 5, 2023