Cornell Note Template for Obsidian

Cornell's Notes Template.md

[!cueheader] Cues

Cornell 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.

[!cue] title?

Note's layout

text bold inline italic on italic ==highlight==

h1

h3

---

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.

[!check | cue]+ Note-taking Process

• Use abbr.
• Jot questions

---

how

• 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.

[!tip | cue] 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] 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 efficiency.

cornell.css

:root {
    --cue-line: 2px solid #414061;
}

.markdown-preview-view .markdown-preview-sizer,
.markdown-source-view .markdown-preview-sizer {
    max-width: var(--file-line-width);
    margin-left: auto;
    margin-right: auto;
    margin-inline: 150px;
    width: 100%;   
}

.markdown-preview-view .markdown-preview-sizer > div ,
.markdown-source-view .markdown-preview-sizer > div {
    max-width: var(--max-width);
    width: var(--line-width);
    margin-inline: var(--content-margin)!important;
}

/*cue section line/border thing*/
.markdown-preview-view .markdown-preview-sizer,
.markdown-source-view .markdown-preview-sizer {
    border-left: var(--cue-line);
    padding-left: 0px;
    padding-right: 0px;
	padding-bottom: 0 !important;
	margin-bottom: 517px;
}





/* aside html tag no use anymore
.markdown-preview-view aside:first-line, 
.markdown-source-view aside:first-line {
    font-weight: 700;
}

.markdown-preview-view aside, 
.markdown-source-view 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: 15px;
    max-width: 145px;
} 

*/

/*
.markdown-preview-view div.cues-header, 
.markdown-source-view div.cues-header {
    /* Keep sync with "h1, .markdown-rendered h1" selector 
    position: absolute;
    max-width: 145px;
    width: 145px;
    left: 15px;
    top: 20;
    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);
}*/



/*plain text cue HEADER callout*/
/*plain text cue callout*/
.callout[data-callout="cueheader"],
.callout[data-callout="cue"] {
    border: none; /* Removes the callout box */
    background-color: transparent;
    width: 30%;
}


.callout:is([data-callout="cue"]) .callout-icon,
.callout:is([data-callout="cueheader"]) .callout-title,
.callout:is([data-callout="cueheader"]) .callout-icon {
    display: none;
}
.markdown-source-view .callout[data-callout="cueheader"],
.markdown-preview-view .callout[data-callout="cueheader"] {
    /* Keep sync with "h1, .markdown-rendered h1" selector */
    position: absolute;
    max-width: 145px;
    width: 145px;
    left: 15px;
    top: 20;
    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);
}

.callout:is([data-callout="cue"]) .callout-title {
    font-style: italic;
    font-family: var(--font-text);
    font-size: var(--font-adaptive-normal);
    font-weight: 700;
    color: var(--callout-color);
    position: absolute;
}


/*better source view*/
.markdown-source-view .callout[data-callout="cue"],
.markdown-preview-view .callout[data-callout="cue"] {
    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: 15px;
    max-width: 145px;
}

.markdown-source-view .callout[data-callout="cueheader"],
.markdown-source-view .callout[data-callout="cue"] {
    margin: auto !important;
    position: relative !important;
    max-width: calc(100% - 16px) !important;
    overflow: auto;
    padding: 10px !important; 
    display: block !important; 
    opacity: 0.75 !important; 

    float: left !important;
    margin-left: 2.5%!important;
    margin-right: 0px !important;
    left: 0px !important;
}




/*cue callout metadata*/
.callout[data-callout-metadata*="cue"] {
    --cue-width: 30%;
    /*only 30 percent optimal side part width*/
    --cue-offset: 16px;
    position: absolute;
}
  
:is(.markdown-source-view .cm-callout, div:not([class])):has(> .callout[data-callout-metadata*="cue"]) {
    position: relative;
    overflow: visible;
}
  
.callout[data-callout-metadata*="cue"] {
    float: left;
    margin: unset;
    margin-right: 8px;

    left: calc(-1 * (var(--cue-width) + var(--cue-offset)));
    right: calc(100% + var(--cue-offset));
} 
  
  

/* better markdown display */
.markdown-source-view .callout[data-callout-metadata*="cue"] {
    margin: auto !important;
    position: relative;
    max-width: calc(100% - var(--cue-offset));
    overflow: auto;
    padding: 10px !important; 
    display: block !important; 
    opacity: 0.5 !important; 

    float: left !important;
    margin-left: 35%!important;

    font-style: italic;
    font-family: var(--font-text);
    font-size: var(--font-adaptive-normal);
    font-weight: var(--normal-weight);
    line-height: var(--line-height);
}





/*summary callout styling*/
.markdown-preview-view .callout[data-callout="summary"] {
    position: absolute;
    left: 15px;
    padding:30px;
    width: 100%;
	background-color: rgba(46, 57, 84, 1) !important;
	mix-blend-mode: normal;
	margin: 0 0 ;
}

changes made:

• no html tags, all callouts
• better source view, cue parts are a bit transparent indicating that they are cues, no hidden lines
• callouts will get cutoff if window size too small, text follows window borders
• small tweaks to my liking

*cueheader callout probably won't be needed, you can achieve headers with normal cue callouts too.