How do I implement the Cornell note style in Obsidian?

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

How do I implement the Cornell note style in Obsidian?

Things I have tried

Hey everyone, I recently came across a post on the subreddit r/ObsidianMD discussing an application of a CSS snippet that creates a Cornell note structure. After putting the code into a text document in the specific file ‘obsidian vault snippets’ and activating this code

(Snippet code is below)

In the settings, I still haven’t activated the structure. What am I missing here? Did I leave out a step? Simply activating the snippet in the ‘Appearance’ settings is not enough. I also tried to write some markdown code(right into the note) (markdown code is below), but it doesn’t work since the cues are not arranged aside the explanation; instead, they are segmented underneath each other like normal text. Any help and insights are greatly appreciated.

Snippet code :

code: /**

MIT License

Copyright (c) 2023 Sergii Krymets

Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the “Software”), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all

copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

SOFTWARE.

**/

/** Place this file in your $VAULT_NAME/.obsidian/snippets/ and enable the snippet in the Appearance Settings **/

:root {

–cue-width: 120px;

–cue-offset: var(–cue-width);

–cue-line: 1px solid lightgrey;

}

.markdown-preview-view.cornell-note .markdown-preview-sizer,

.markdown-source-view.cornell-note .markdown-preview-sizer {

max-width: var(–file-line-width);

margin-left: auto;

margin-right: auto;

margin-inline: auto;

width: 100%;

}

.markdown-preview-view.cornell-note .markdown-preview-sizer > div ,

.markdown-source-view.cornell-note .markdown-preview-sizer > div {

max-width: var(–max-width);

width: var(–line-width);

margin-inline: var(–content-margin)!important;

}

.markdown-preview-view.cornell-note .markdown-preview-sizer > div:has(p, ul, ol, pre),

.markdown-source-view.cornell-note .markdown-preview-sizer > div:has(p, ul, ol, pre) {

border-left: var(–cue-line);

padding-left: 20px;

}

.markdown-preview-view.cornell-note aside:first-line,

.markdown-source-view.cornell-note aside:first-line {

font-weight: 700;

}

.markdown-preview-view.cornell-note aside,

.markdown-source-view.cornell-note aside {

font-style: italic;

font-family: var(–font-text);

font-size: var(–font-adaptive-normal);

font-weight: var(–normal-weight);

line-height: var(–line-height);

padding: 0px 8px 0px 0px;

margin-right: 10px;

position: absolute;

left: calc(var(–content-margin-start) - var(–cue-offset));

max-width: var(–cue-width);

}

.markdown-preview-view.cornell-note div.cues-header,

.markdown-source-view.cornell-note div.cues-header {

/* Keep sync with “h1, .markdown-rendered h1” selector */

position: absolute;

max-width: var(–cue-width);

width: var(–cue-width);

left: calc(var(–content-margin-start) - var(–cue-offset));

top: calc(var(–h1-size) * 1.6);

padding: 0px 8px 0px 0px;

letter-spacing: -0.015em;

line-height: var(–h1-line-height);

color: var(–h1-color);

font-family: var(–h1-font);

font-size: var(–h1-size);

font-style: var(–h1-style);

font-variant: var(–h1-variant);

font-weight: var(–h1-weight);

}

.markdown-preview-view.cornell-note summary,

.markdown-source-view.cornell-note summary {

display: none; }

Markdown code:


cssclass: cornell-note


Cues

Notes

The Cornell Note-taking System is a popular and effective method for organizing and summarizing information during lectures, readings, or any other form of learning.

The Cornell method offers a specific layout for each page of notes. The note is devided into three sections:

  • Cue/Question Column (Left) — is used to write down questions, keywords, or cues related to the content you’re recording in the main notes section.

  • Note-taking Column (Right) — here you write your main notes during the lecture or reading. This section should contain the most critical information, main ideas, supporting details, and explanations.

  • Summary Section (Bottom) — here you write a concise summary of the main points covered in your notes.

  • Start by listening or reading actively, and jot down the main ideas and supporting details in the Note-taking Column.

  • Use abbreviations and bullet points to keep your notes concise and easy to review.

  • In the Cue/Question Column, write down questions or cues that correspond to the material you’re noting in the right column. These questions can be used as study prompts later.

  • If you come across concepts or ideas that you don’t understand fully, make a note of it and try to clarify them later through research or by asking your instructor.

  • After the lecture or reading, review your notes as soon as possible to reinforce the information in your memory.

  • Use the Cue/Question Column to cover the right-hand side of your notes and quiz yourself based on the cues or questions you wrote down.

  • Reflect on the material and try to answer the questions from memory. This active recall helps improve retention.

  • Check your answers and understanding in the Note-taking Column and fill in any gaps or correct any mistakes in your summary section.


Summary

Write a concise summary here

The Cornell Note-taking System is effective because it encourages active engagement during the note-taking process and provides a structured way to review and study the material later. It is widely used by students, professionals, and anyone looking to improve their note-taking and learning )

  1. Download Cornell.css and save it in <yourVault>/.obsidian/snippets/ (Sometimes the .obsidian folder is hidden).
  2. Open settings (ctrl+p) and go to Settings->Appearance then scroll to the bottom to “CSS snippets”.
  3. Toggle on the Cornell CSS.
  4. Restart obsidian.
  5. Create a New note and copy the template.
  6. Preview your file.

Template

---
cssclass: cornell-note
---

<div class="cues-header">Cues</div>

# Notes

The Cornell Note-taking System is a popular and effective method for organizing and summarizing information during lectures, readings, or any other form of learning.

<aside>Note's Layout</aside>

The Cornell method offers a specific layout for each page of notes. The note is devided into three sections: 
- **Cue/Question Column (Left)** — is used to write down questions, keywords, or cues related to the content you're recording in the main notes section.
- **Note-taking Column (Right)** — here you write your main notes during the lecture or reading. This section should contain the most critical information, main ideas, supporting details, and explanations.
- **Summary Section (Bottom)** — here you write a concise summary of the main points covered in your notes.

<aside>Note-taking Process</aside>

* Start by listening or reading actively, and jot down the main ideas and supporting details in the Note-taking Column.
* Use abbreviations and bullet points to keep your notes concise and easy to review.
* In the Cue/Question Column, write down questions or cues that correspond to the material you're noting in the right column. These questions can be used as study prompts later.
* If you come across concepts or ideas that you don't understand fully, make a note of it and try to clarify them later through research or by asking your instructor.

<aside>Review and Study</aside>

* After the lecture or reading, review your notes as soon as possible to reinforce the information in your memory.
* Use the Cue/Question Column to cover the right-hand side of your notes and quiz yourself based on the cues or questions you wrote down.
* Reflect on the material and try to answer the questions from memory. This active recall helps improve retention.
* Check your answers and understanding in the Note-taking Column and fill in any gaps or correct any mistakes in your summary section.

---

# Summary

<summary>Write a concise summary here</summary>
The Cornell Note-taking System is effective because it encourages active engagement during the note-taking process and provides a structured way to review and study the material later. It is widely used by students, professionals, and anyone looking to improve their note-taking and learning efficiency.

Preview

IThe text was trimmed to keep the image small.

3 Likes

Thank you very much !
Helped me a lot!

Great! remember to choose a post as a solution to guide others in the future.

1 Like

Very nice. Is there an implementation of this that works in live preview?

Hi just following this now.
Unable to see the toggle for the snippet although I have downloaded this as a txt. file and this is located in the obsidian vault? As you can see from the final note - it is not the required format? Thank you!



Screenshot 2024-02-27 102323

Hi, save the file as .css not as .txt.
cornell.css (2.1 KB)

I’m attaching you the cornell.css file, copy it to your folder.

2 Likes

Is it possible to make the Cue box wider? The current room for the Cue part is not enough.

thank you very much. now it worked.

A “Live Preview” option would be the best!! I would work on this solution but currently can’t allocate time. I purchased the Cornell Notes Learning Vault - TfT Hacker, but it fails most the time. This Cornell option is more aligned to my preferred formatting and its implementation is a longer to type out

I find this CSS solution still a little bothersome to use.
A much simpler to use Cornell implementation is just a Canvas note (in a “Cornell_Notes” folder) containing four cards (header, cues, notes, summary) shaped and arranged like a Cornell note. Name the Canvas note “Template”. Simply duplicate the Template note, rename it and start writing in the cards. Only bother is the Cues card needs some character such as a period to enforce empty line spacing to make things line up. If you want to add links, canvas allows a card to be made into a real note. I move such notes to a subfolder not to interfere with the Explorer listing of my Canvas notes in my “Cornell_Notes” folder.

2 Likes

Hi
Thank you for sharing your Cornell.css file.

However as you can see the Cues area is only visible in read mode.

Do you have any suggestions on how I can get it working in editing mode?

Thanks again.

I believe you’re going to have a hard time implementing that in live preview. It’s a pretty stromg correlation between lines and what you see there. I could be wrong, but this view being made for editing doesn’t combine well with moving boxes into the gutter.

1 Like

Change the css a little, use markdown header instead of aside. Cue in editing view is ok now:


Use the following template instead:

---
cssclass: cornell-note
---

<div class="cues-header">Cues</div>

# Notes

The Cornell Note-taking System is a popular and effective method for organizing and summarizing information during lectures, readings, or any other form of learning.

## Note's Layout

The Cornell method offers a specific layout for each page of notes. The note is devided into three sections: 
- **Cue/Question Column (Left)** — is used to write down questions, keywords, or cues related to the content you're recording in the main notes section.
- **Note-taking Column (Right)** — here you write your main notes during the lecture or reading. This section should contain the most critical information, main ideas, supporting details, and explanations.
- **Summary Section (Bottom)** — here you write a concise summary of the main points covered in your notes.

## Note-taking Process

* Start by listening or reading actively, and jot down the main ideas and supporting details in the Note-taking Column.
* Use abbreviations and bullet points to keep your notes concise and easy to review.
* In the Cue/Question Column, write down questions or cues that correspond to the material you're noting in the right column. These questions can be used as study prompts later.
* If you come across concepts or ideas that you don't understand fully, make a note of it and try to clarify them later through research or by asking your instructor.

## Review and Study

* After the lecture or reading, review your notes as soon as possible to reinforce the information in your memory.
* Use the Cue/Question Column to cover the right-hand side of your notes and quiz yourself based on the cues or questions you wrote down.
* Reflect on the material and try to answer the questions from memory. This active recall helps improve retention.
* Check your answers and understanding in the Note-taking Column and fill in any gaps or correct any mistakes in your summary section.

---

# Summary

<summary>Write a concise summary here</summary>
The Cornell Note-taking System is effective because it encourages active engagement during the note-taking process and provides a structured way to review and study the material later. It is widely used by students, professionals, and anyone looking to improve their note-taking and learning efficiency.

The reading view: