# Cornell Notes in Obsidian
>[!cue] [TfT Hacker Bio](https://tfthacker.com/about)
The main tool I use for taking _literature-style notes_ in obsidian is the tool from the TfT hacker. Read about them [here](https://tfthacker.com/about)
>[! warning] Obsidian publish does not support CSS snippets
>Therefore cornell notes will not render correctly on an Obsidian Publish site.
>So, if your intent is to display the _look and feel_ of the Cornell note system on an Obsidian Publish site, then I have not discovered one that meets that requirement.
>
>This is still a **VERY** good tool to use on your local vault's. 15/10 would recommend!
>[! note] Nomenclature: topic note _Nexus Veritas_
>In my world I like to call my literature notes, topic notes and this note is a topic note.
I particularly like using the [[Cornell Note taking system|Cornell system]] because it helps me keep my ideas organized and easily re-read later. Especially useful in a system like obsidian.
>[!cue] Quick explainer
<iframe width="560" height="315" src="https://www.youtube.com/embed/ai9P4_E0WLg?si=5qG31xMJRH1UvyKB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
## Notes
### CSS Snippets
>[! cue] CSS Snippets not supported
Using the wonderful Cornell Notes CSS snippet in Obsidian works fine across devices in my experience.
However, CSS snippets in general are not supported in [[Obsidian Publish]] out of the box.
>[! cue] Workaround: [publish.css](https://forum.obsidian.md/t/how-to-apply-custom-css-snippets-to-obsidian-publish/13826)
There is a workaround published in the [Obsidian user forums](https://forum.obsidian.md/t/how-to-apply-custom-css-snippets-to-obsidian-publish/13826) that appears to work. The link is also in the cue.
The only difficulty is that the summary extends across the entire page and obscures the navigation list on the left.
### Summaries
Summaries work by adding a callout called `[! summary]`.
The TfT hacker tool has options for the summary to be at the bottom of the page, standard in Cornell System. Or it has the option to make summaries at the top of a page with `[! summary -top]`
The problem is not that the summaries are not working; they work fine.
The problem is how Obsidian Publish handles the code in the CSS and how it applies "site level" style elements (navigation list, site name, backlinks (if enabled), etc.). That is, all the extra stuff that Obsidian Publish does to render your vault page as a static web page is making the summary callout not function as intended.
>[! cue] Problem/Bug Log
#### Problems using `[! summary-top]`
Using the style of summary at the top of your documents is best on your local vault. However, given the way that Obsidian Publish renders pages in its standard theme, at this time,I am not recommending the use of top summaries.
#### Problems using `[! summary]` (at the bottom)
When a summary callout box is rendered it sits in a static position, in this use case at the bottom of the page, and it also sits on top of any content that might be in the document or on the page.
Again the code is doing exactly what it is instructed to do AND Obsidian Publish (standard theme) is also doing what it is supposed to do.
## Resources
>[! cue] Link to explore more of the Cornell tool from TfT hacker.
>Not a sponsored link ;)
- [tfthacker Cornell Notes Learning Vault](https://tfthacker.com/cornell-notes)
- [~~Obsidian Workaround~~](https://forum.obsidian.md/t/how-to-apply-custom-css-snippets-to-obsidian-publish/13826) not really a viable work around for Cornell notes.
>[! summary-top] This summary sits at the top of the page
>when rendered locally.