Custom CSS (TODO)
TODO introduction
- CSS: styles for the note
- can change font size, colors, hide elements, reposition certain elements, etc.
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 usuallyjp-mining-note
. -
Add the folder to the end of
css-folders
list inconfig.py
. For example: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:
-
Rebuild and reinstall the template. The CSS should be automatically applied to the note.