Home A - Z
Page Index

An Otter Wiki

Blame

1d4d54 J4nis05 2024-05-30 15:47:33 1 
This List Contains My Obsidian CSS Snippets.
2
3
## Snippet: `canvas-squares.css`
4
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
5
6
```css
7
.markdown-preview-view .gray-square {
8
display: inline-block;
9
text-align: center;
10
width: 15px;
11
height: 15px;
12
background-color: #7e7e7e;
13
}
14
15
.markdown-preview-view .red-square {
16
display: inline-block;
17
text-align: center;
18
width: 15px;
19
height: 15px;
20
background-color: #fb464c;
21
}
22
23
.markdown-preview-view .orange-square {
24
display: inline-block;
25
text-align: center;
26
width: 15px;
27
height: 15px;
28
background-color: #e9973f;
29
}
30
31
.markdown-preview-view .yellow-square {
32
display: inline-block;
33
text-align: center;
34
width: 15px;
35
height: 15px;
36
background-color: #e0de71;
37
}
38
39
.markdown-preview-view .green-square {
40
display: inline-block;
41
text-align: center;
42
width: 15px;
43
height: 15px;
44
background-color: #44cf6e;
45
}
46
47
.markdown-preview-view .blue-square {
48
display: inline-block;
49
text-align: center;
50
width: 15px;
51
height: 15px;
52
background-color: #53dfdd;
53
}
54
55
.markdown-preview-view .purple-square {
56
display: inline-block;
57
text-align: center;
58
width: 15px;
59
height: 15px;
60
background-color: #a882ff;
61
}
62
```
63
64
### Usage
65
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:
66
67
| Colour | Code |
68
| ------------- | ----------------------------------- |
69
| Gray Square | `<div class="gray-square"></div>` |
70
| Red Square | `<div class="red-square"></div>` |
71
| Orange Square | `<div class="orange-square"></div>` |
72
| Yellow Square | `<div class="yellow-square"></div>` |
73
| Green Square | `<div class="green-square"></div>` |
74
| Blue Square | `<div class="blue-square"></div>` |
75
| Purple Square | `<div class="purple-square"></div>` |
76
77
78
## Snippet: `break.css`
79
This Snippet adds the Ability to insert Page Breaks into an Obsidian File when exporting as a PDF
80
81
```css
82
@media print {
83
h1 { page-break-before: always; }
84
h1:first-of-type   { page-break-before: auto;   }
85
h2, h3, h4, h5, h6 { page-break-after: avoid; }
86
.internal-embed { page-break-after: avoid;
87
page-break-before: avoid; }
88
.page-break { page-break-after: always; }
89
}
90
```
91
92
### Usage
93
This Snippet affects 4.5 kinds of classes
94
* `h1`: The "Main" or biggest header. It gets a Page break before it, so that the new chapter Starts on a New Page
95
* `h1:first-of-type`: If the Main Header is the First element in a Document, the Page break will be overridden
96
* `h2-h6`: All Other Headings from Heading 2 to Heading 6 will not automatically receive a Page Break
97
* `.internal-embed`: Page Breaks are explicitly disabled for embeds (like other notes, images, etc.)
98
* `.page-break`: This is a Custom Class that can be called to insert a Page Break below it at any point in the Document
99
100
To call the `page-break` Class you simply need to insert a div element like this
101
102
```html
103
This Text will be shown on Page 1
104
105
<div class="page-break"></div>
106
107
This Text will be shown on Page 2
108
```
109
110
> **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.
111
112
113
## Snippet: `center.css`
114
> **The Snippet Doesn't currently work as I intended, see Chapter NOTE below**
115
116
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).
117
118
```css
119
@media print {
120
.center-vertically {
121
display: flex;
122
flex-direction: column;
123
justify-content: center;
124
height: 100vh;
125
}
126
.center-both {
127
display: flex;
128
justify-content: center;
129
align-items: center;
130
height: 100vh;
131
}
132
}
133
134
.center-horizontally {
135
display: flex;
136
justify-content: center;
137
}
138
139
table, th, td {
140
border: 1px solid black;
141
border-collapse: collapse;
142
}
143
144
th, td {
145
padding: 10px;
146
text-align: center;
147
}
148
```
149
150
### Usage
151
This Snippet has 3 classes:
152
* `.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.
153
154
```html
155
<div class="center-horizontally">
156
This Text is centered on the horizontal axis.
157
This applies both in the Editor and an exported PDF
158
</div>
159
```
160
161
* `.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.
162
163
```html
164
<div class="center-vertically">
165
This Text is centered on the vertical axis.
166
This applies only to an exported PDF
167
</div>
168
```
169
170
* `.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.
171
172
```html
173
<div class="center-both">
174
This Text is centered on both the horizontal and the vertical axis.
175
This applies only to an exported PDF
176
</div>
177
```
178
179
### NOTE
180
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.
181
* `---` --> `<hr>`
182
* `newline` --> `<br>`
183
* `text` --> `<p>text</p>`
184
* `**bold**` --> `<strong>bold</strong>`
185
* `table` --> Formatted as Follows:
186
187
**Original Table**
188
```markdown
189
| 123 | 456 |
190
| --- | --- |
191
| abc | def |
192
| ghi | jkl |
193
```
194
195
**HTML Adjusted Table**
196
```html
197
<div class="center-horizontally">
198
<table>
199
<thead> <tr> <th>123</th> <th>456</th> </tr> </thead>
200
<tbody> <tr> <td>abc</td> <td>def</td> </tr>
201
<tr> <td>ghi</td> <td>jkl</td> </tr> </tbody>
202
</table>
203
</div>
204
```
205
206
207
## Snippet: `exclude.css`
208
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.
209
210
```css
211
@media print {
212
.exclude-from-pdf { display: none; }
213
}
214
```
215
216
### Usage
217
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.
218
219
```html
220
<div class="exclude-from-pdf">
221
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
222
eiusmod tempor incididunt ut labore et dolore magna aliqua.
223
Condimentum vitae sapien pellentesque habitant.
224
Lobortis scelerisque fermentum dui faucibus.
225
Dignissim suspendisse in est ante.
226
</div>
227
```