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 ```css .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: | Colour | Code | | ------------- | ----------------------------------- | | Gray Square | `<div class="gray-square"></div>` | | Red Square | `<div class="red-square"></div>` | | Orange Square | `<div class="orange-square"></div>` | | Yellow Square | `<div class="yellow-square"></div>` | | Green Square | `<div class="green-square"></div>` | | Blue Square | `<div class="blue-square"></div>` | | Purple Square | `<div class="purple-square"></div>` | ## Snippet: `break.css` This Snippet adds the Ability to insert Page Breaks into an Obsidian File when exporting as a PDF ```css @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 ```html 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). ```css @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. ```html <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. ```html <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. ```html <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** ```markdown | 123 | 456 | | --- | --- | | abc | def | | ghi | jkl | ``` **HTML Adjusted Table** ```html <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. ```css @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. ```html <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> ```