This List Contains My Obsidian CSS Snippets.

Snippet: canvas-squares.css

This Snippet Adds Classes to insert Coloured Squares roughly the same height as the Default Line Height. The Colors are the same as the Default Colors in Obsidian Canvas. The Usage is shown below

.markdown-preview-view .gray-square   { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #7e7e7e; 
}

.markdown-preview-view .red-square    { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #fb464c; 
}

.markdown-preview-view .orange-square { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #e9973f; 
}

.markdown-preview-view .yellow-square { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #e0de71; 
}

.markdown-preview-view .green-square  { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #44cf6e; 
}

.markdown-preview-view .blue-square   { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #53dfdd; 
}

.markdown-preview-view .purple-square { 
    display: inline-block; 
    text-align: center; 
    width: 15px; 
    height: 15px; 
    background-color: #a882ff; 
}

Usage

To Insert a Coloured Square (into either a Text Box in Canvas or in a regular Note) simply add one of the div Tags below:

Snippet: break.css

This Snippet adds the Ability to insert Page Breaks into an Obsidian File when exporting as a PDF

@media print {
    h1                 { page-break-before: always; }
    h1:first-of-type   { page-break-before: auto;   }
    h2, h3, h4, h5, h6 { page-break-after: avoid;   }
    .internal-embed    { page-break-after: avoid; 
                         page-break-before: avoid;  }
    .page-break        { page-break-after: always;  }
}

Usage

This Snippet affects 4.5 kinds of classes

• h1: The "Main" or biggest header. It gets a Page break before it, so that the new chapter Starts on a New Page
• h1:first-of-type: If the Main Header is the First element in a Document, the Page break will be overridden
• h2-h6: All Other Headings from Heading 2 to Heading 6 will not automatically receive a Page Break
• .internal-embed: Page Breaks are explicitly disabled for embeds (like other notes, images, etc.)
• .page-break: This is a Custom Class that can be called to insert a Page Break below it at any point in the Document

To call the page-break Class you simply need to insert a div element like this

This Text will be shown on Page 1

<div class="page-break"></div>

This Text will be shown on Page 2

Note: When Enabling the Option "Include File name as Title" in the PDF Export Window, Obsidian will add the Filename at the very Top of the File and treat it as an H1 Heading. If you have a H1 Heading as the First element of the File and enable this Option, there will be an empty first page with just the title at the Top of it.

Snippet: center.css

The Snippet Doesn't currently work as I intended, see Chapter NOTE below

This Snippet adds the ability to center content between the opening and closing tags either horizontally, vertically or both. The @media print element specifies that the .center-vertically and the .center-both classes only get applied when printing the content (or in this case exporting as a PDF).

@media print {
    .center-vertically {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
    }
    .center-both {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
}

.center-horizontally {
    display: flex;
    justify-content: center;
}

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
}

th, td { 
    padding: 10px; 
    text-align: center; 
}

Usage

This Snippet has 3 classes:

• .center-horizontally: This Centers content Horizontally on a Page. Due to how the Text behaves in Obsidian this will mostly apply to things like Tables or Images that are too small to fit the entire width of the Page. For this another class / snippet would be needed to force elements to be a certain max width.

<div class="center-horizontally">
This Text is centered on the horizontal axis.
This applies both in the Editor and an exported PDF
</div>

• .center-vertically: This Centers Content Vertically on a Page. Due to the @media print query this only applies to the PDF File. The Designed use Case of this is for something like a cover Page.

<div class="center-vertically">
This Text is centered on the vertical axis.
This applies only to an exported PDF
</div>

• .center-both: This Centers Content both Horizontally and Vertically on a Page. Due to the @media print query this only applies to the PDF File. The Designed use Case of this is for something like a cover Page.

<div class="center-both">
This Text is centered on both the horizontal and the vertical axis.
This applies only to an exported PDF
</div>

NOTE

Because of the Way Obsidian Handles HTML Tags, the Elements inside the Div need to be formatted in HTML5. Because of the Tables the two bottom entries needed to be added to the CSS snippet above.

• --- --> <hr>
• newline --> <br>
• text --> <p>text</p>
• **bold** --> <strong>bold</strong>
• table --> Formatted as Follows:

Original Table

| 123 | 456 |
| --- | --- |
| abc | def |
| ghi | jkl |

HTML Adjusted Table

<div class="center-horizontally">
  <table>
    <thead> <tr> <th>123</th> <th>456</th> </tr> </thead>
    <tbody> <tr> <td>abc</td> <td>def</td> </tr>
            <tr> <td>ghi</td> <td>jkl</td> </tr> </tbody>
  </table>
</div>

Snippet: exclude.css

This Snippet Adds the simple functionality to exclude any element from being shown when the file is being exported to pdf. This will not remove the content but simply hide it in the pdf, so the possibility of recovering it is still possible.

@media print { 
    .exclude-from-pdf { display: none; } 
}

Usage

To Hide, say, a block of text in the exported PDF File add a div Tag with the exclude-from-pdf class around the Block of text like this.

<div class="exclude-from-pdf">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Condimentum vitae sapien pellentesque habitant. 
Lobortis scelerisque fermentum dui faucibus. 
Dignissim suspendisse in est ante. 
</div>