Skip to content

Commit b92ee09

Browse files
TechWhizKidTechWhizKid
committed
Added CSS snippets
1 parent 2f38589 commit b92ee09

19 files changed

+418
-2
lines changed

Diff for: ‎README.md

+147-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,147 @@
1-
# obsidian-snippets
2-
Custom CSS snippets for 🪨 Obsidian.
1+
<p align="center">
2+
<img src="./images/ob-icon.png" width="64px" style="border-radius:50%;">
3+
</p>
4+
5+
<p align="center">
6+
<i><b>Custom CSS snippets for Obsidian.</b></i>
7+
</p>
8+
9+
---
10+
11+
<h3 align="center">About CSS snippets</h3>
12+
13+
_CSS is a language to describe how to present a HTML document. By adding CSS snippets you can redefine parts of obsidian user interface, such as size and color of headings._
14+
15+
_Obsidian looks for CSS snippets inside vault configuration folder, usually a folder named `.obsidian`._
16+
17+
_To add a CSS snippet on Desktop, follow these steps —_
18+
19+
1. Open settings.
20+
2. Under `Appearance` > `CSS snippets`, select `Open snippets folder` icon.
21+
3. In the snippets folder, create/copy a CSS file that contains the snippet.
22+
4. In Obsidian, under `Appearance` > `CSS snippets`, select `Reload snippets` icon to see the snippet in the list from where you can enable it.
23+
24+
_To add a CSS snippets on a Mobile/Tablet, you will need to follow these steps —_
25+
26+
1. Use the file manager to access the configuration folder and place the `snippet.css` in the snippet folder.
27+
28+
---
29+
30+
<h3 align="center"><u>Available CSS snippets</u></h3>
31+
32+
<section>
33+
<h4 align="center">
34+
<a href="./snippets/align-image.css">align-image.css</a>
35+
</h4>
36+
<ul>
37+
<li>Lets you specify the image position in alt text. Apply settings by using the following syntaxes —</li>
38+
</ul>
39+
40+
```
41+
[[<image_file_name>|left]]
42+
[[<image_file_name>|center]]
43+
[[<image_file_name>|right]]
44+
[[<image_file_name>|grid]]
45+
```
46+
47+
<img src="./images/align-image.png">
48+
</section>
49+
50+
<section>
51+
<h4 align="center">
52+
<a href="./snippets/custom-hr.css">custom-hr.css</a>
53+
</h4>
54+
<ul>
55+
<li>Adds a custom horizontal line with obsidian logo in the middle.</li>
56+
</ul>
57+
<img src="./images/custom-hr.png">
58+
</section>
59+
60+
<section>
61+
<h4 align="center">
62+
<a href="./snippets/graph-mod.css">graph-mod.css</a>
63+
</h4>
64+
<ul>
65+
<li>Adds a custom graph view theme.</li>
66+
</ul>
67+
<img src="./images/graph-mod.png">
68+
</section>
69+
70+
<section>
71+
<h4 align="center">
72+
<a href="./snippets/header-font.css">header-font.css</a>
73+
</h4>
74+
<ul>
75+
<li>Adds custom header font and header font colors.</li>
76+
</ul>
77+
<img src="./images/header-font.png">
78+
</section>
79+
80+
<section>
81+
<h4 align="center">
82+
<a href="./snippets/highlight-bg.css">highlight-bg.css</a>
83+
</h4>
84+
<ul>
85+
<li>Modifies the highlighted text background color to match the graph-mod's theme.</li>
86+
</ul>
87+
<img src="./images/highlight-bg.png">
88+
</section>
89+
90+
<section>
91+
<h4 align="center">
92+
<a href="./snippets/lucide-buttons.css">lucide-buttons.css</a>
93+
</h4>
94+
<ul>
95+
<li>Modifies the titlebar buttons.</li>
96+
</ul>
97+
<img src="./images/lucide-buttons.png">
98+
</section>
99+
100+
<section>
101+
<h4 align="center">
102+
<a href="./snippets/new-tab-mod.css">new-tab-mod.css</a>
103+
</h4>
104+
<ul>
105+
<li>Adds an 🪨 obsidian logo in the empty tab.</li>
106+
</ul>
107+
<img src="./images/new-tab-mod.png">
108+
</section>
109+
110+
<section>
111+
<h4 align="center">
112+
<a href="./snippets/table-mod.css">table-mod.css</a>
113+
</h4>
114+
<ul>
115+
<li>The table takes up 100% of the width even if there is only a single column.</li>
116+
<li>Adds border radius to every table cell and adds a 2px spacing between them (optional).</li>
117+
</ul>
118+
<img src="./images/table-mod-1.png">
119+
<ul>
120+
<li>The spacing can be easily removed by uncommenting the following part of the CSS snippet —</li>
121+
</ul>
122+
123+
```
124+
. . .
125+
126+
/* Uncomment the lines below to remove border spacing and combine all table boxes together */
127+
128+
/* === erase this line to uncomment === //
129+
130+
:root table {border-spacing: 0;}
131+
tr td, tr th {border-radius: 0;}
132+
th:first-child {border-top-left-radius: var(--table-border-radius);}
133+
th:last-child {border-top-right-radius: var(--table-border-radius);}
134+
tr:last-child td:first-child {border-bottom-left-radius: var(--table-border-radius);}
135+
tr:last-child td:last-child {border-bottom-right-radius: var(--table-border-radius);}
136+
:root :is(td, th) {border-width: 0 var(--table-border-width) var(--table-border-width) 0;}
137+
138+
/* */
139+
```
140+
141+
<ul>
142+
<li>Now the table will look like this —</li>
143+
</ul>
144+
<img src="./images/table-mod-2.png">
145+
</section>
146+
147+
---

Diff for: ‎images/align-image.png

51.5 KB
Loading

Diff for: ‎images/custom-hr.png

11.5 KB
Loading

Diff for: ‎images/graph-mod.png

104 KB
Loading

Diff for: ‎images/header-font.png

47.7 KB
Loading

Diff for: ‎images/highlight-bg.png

15.7 KB
Loading

Diff for: ‎images/lucide-buttons.png

7.1 KB
Loading

Diff for: ‎images/new-tab-mod.png

35.7 KB
Loading

Diff for: ‎images/ob-icon.png

47.6 KB
Loading

Diff for: ‎images/table-mod-1.png

29.9 KB
Loading

Diff for: ‎images/table-mod-2.png

26.9 KB
Loading

Diff for: ‎snippets/align-image.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Align images by using - `![[<image_path>|<alignment/grid>]]` */
2+
3+
table {
4+
width: auto;
5+
display: table;
6+
}
7+
8+
.grid span.image-embed[alt*="."],
9+
span[alt*="grid"] {
10+
display: table-cell;
11+
vertical-align: middle;
12+
padding: 3px;
13+
}
14+
15+
img[alt*="grid"],
16+
.grid img[alt*="."] {
17+
max-height: 30vh;
18+
}
19+
20+
img[alt*="left"] {
21+
float: left;
22+
clear: left;
23+
margin-right: 1rem;
24+
margin-bottom: 4px;
25+
margin-top: 4px;
26+
}
27+
28+
img[alt*="right"] {
29+
float: right;
30+
clear: right;
31+
margin-left: 1rem;
32+
margin-bottom: 4px;
33+
margin-top: 4px;
34+
}
35+
36+
img[alt*="center"],
37+
img[alt*="centre"] {
38+
display: block;
39+
margin-right: auto;
40+
margin-left: auto;
41+
margin-bottom: 4px;
42+
margin-top: 4px;
43+
}

Diff for: ‎snippets/custom-hr.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* Custom 'horizontal-line' with Obsidian logo in the middle */
2+
3+
body.theme-dark {
4+
--obsidian-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='8' height='8' fill='none' stroke='%23ffffff90' stroke-width='5%' stroke-linecap='round' stroke-linejoin='round' class='logo-wireframe'%3E%3Cpath d='M172.7 461.6c73.6-149.1 2.1-217-43.7-246.9m72 96.7c71.6-17.3 141-16.3 189.8 88.5m-114-96.3c-69.6-174 44.6-181 16.3-273.6m97.7 370c1.6-3 3.3-5.8 5.1-8.6 20-29.9 34.2-53.2 41.4-65.3a16 16 0 0 0-1.2-17.7 342.1 342.1 0 0 1-40.2-66.1c-10.9-26-12.5-66.5-12.6-86.2 0-7.4-2.4-14.7-7-20.6l-81.8-104a32 32 0 0 0-1.4-1.5m97.7 370a172.8 172.8 0 0 0-18 59c-2.9 21.5-24 38.4-45 32.6-30-8.3-64.5-21.1-95.7-23.5l-47.8-3.6c-7.7-.6-15-4-20.3-9.5l-82.3-84.8c-9-9.2-11.4-23-6.2-34.8 0 0 51-111.8 52.8-117.7l.7-3M293.1 30a31.5 31.5 0 0 0-44.4-2.3l-97.4 87.5c-5.4 5-9 11.5-10 18.8-3.7 24.5-9.7 68-12.3 80.7'%3E%3C/path%3E%3C/svg%3E");
5+
--hr-color: #FFFFFF90;
6+
}
7+
8+
body.theme-light {
9+
--obsidian-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='8' height='8' fill='none' stroke='%2300000090' stroke-width='5%' stroke-linecap='round' stroke-linejoin='round' class='logo-wireframe'%3E%3Cpath d='M172.7 461.6c73.6-149.1 2.1-217-43.7-246.9m72 96.7c71.6-17.3 141-16.3 189.8 88.5m-114-96.3c-69.6-174 44.6-181 16.3-273.6m97.7 370c1.6-3 3.3-5.8 5.1-8.6 20-29.9 34.2-53.2 41.4-65.3a16 16 0 0 0-1.2-17.7 342.1 342.1 0 0 1-40.2-66.1c-10.9-26-12.5-66.5-12.6-86.2 0-7.4-2.4-14.7-7-20.6l-81.8-104a32 32 0 0 0-1.4-1.5m97.7 370a172.8 172.8 0 0 0-18 59c-2.9 21.5-24 38.4-45 32.6-30-8.3-64.5-21.1-95.7-23.5l-47.8-3.6c-7.7-.6-15-4-20.3-9.5l-82.3-84.8c-9-9.2-11.4-23-6.2-34.8 0 0 51-111.8 52.8-117.7l.7-3M293.1 30a31.5 31.5 0 0 0-44.4-2.3l-97.4 87.5c-5.4 5-9 11.5-10 18.8-3.7 24.5-9.7 68-12.3 80.7'%3E%3C/path%3E%3C/svg%3E");
10+
--hr-color: #00000090;
11+
}
12+
13+
.markdown-rendered hr,
14+
.cm-line.hr hr {
15+
height: 1px;
16+
background-image: linear-gradient(to right, transparent, var(--hr-color) 46.2%, transparent 46.2%, transparent 54%, var(--hr-color) 54%, transparent);
17+
border: none;
18+
position: relative;
19+
overflow: visible;
20+
}
21+
22+
.markdown-rendered hr::after,
23+
.cm-line.hr hr::after {
24+
content: "";
25+
position: absolute;
26+
top: -12px;
27+
left: 0;
28+
right: 0;
29+
height: 24px;
30+
background-image: var(--obsidian-logo);
31+
background-position: center;
32+
background-size: contain;
33+
background-repeat: no-repeat;
34+
}

Diff for: ‎snippets/graph-mod.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Graph View Mod */
2+
3+
.theme-dark .graph-view.color-line {
4+
color: var(--background-modifier-border);
5+
color: DarkSlateGray;
6+
}
7+
8+
.theme-light .graph-view.color-line {
9+
color: var(--text-accent);
10+
}
11+
12+
.theme-light .graph-view.color-arrow {
13+
color: rgb(92, 200, 99);
14+
}
15+
16+
.theme-light .graph-view.color-fill-tag {
17+
color: rgb(68, 1, 84);
18+
}
19+
20+
.theme-light .graph-view.color-fill-attachment {
21+
color: #277f8e;
22+
}
23+
24+
.theme-light .graph-view.color-fill-highlight {
25+
color: var(--interactive-accent);
26+
}
27+
28+
.theme-light .graph-view.color-line-highlight {
29+
color: rgb(var(--interactive-accent-rgb));
30+
}

Diff for: ‎snippets/header-font.css

+41
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎snippets/highlight-bg.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* Custom background color for ==highlights== */
2+
3+
:root {
4+
--color: DarkSlateGray;
5+
}
6+
7+
.markdown-preview-view mark {
8+
background-color: var(--color);
9+
color: var(--text-normal);
10+
}
11+
12+
.cm-s-obsidian span.cm-highlight {
13+
background-color: var(--color);
14+
color: var(--text-normal);
15+
}

Diff for: ‎snippets/lucide-buttons.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* Lucide titlebar buttons */
2+
3+
body {
4+
--lucide-cross: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
5+
--lucide-minus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
6+
--lucide-maximize: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'%3E%3C/path%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'%3E%3C/path%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'%3E%3C/path%3E%3C/svg%3E");
7+
--lucide-minimize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-minimize'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
8+
}
9+
10+
.titlebar-button:not(.mod-logo) svg {
11+
mask-size: cover;
12+
-webkit-mask-size: cover;
13+
background-color: var(--icon-color);
14+
color: transparent;
15+
width: var(--icon-s);
16+
height: var(--icon-s);
17+
}
18+
19+
.titlebar-button:not(.mod-logo) {
20+
padding: 0 var(--size-4-3);
21+
}
22+
23+
.titlebar-button.mod-minimize svg {
24+
mask-image: var(--lucide-minus);
25+
-webkit-mask-image: var(--lucide-minus);
26+
}
27+
28+
.titlebar-button.mod-maximize svg {
29+
mask-image: var(--lucide-maximize);
30+
-webkit-mask-image: var(--lucide-maximize);
31+
}
32+
33+
.is-maximized .titlebar-button.mod-maximize svg {
34+
mask-image: var(--lucide-minimize);
35+
-webkit-mask-image: var(--lucide-minimize);
36+
}
37+
38+
.titlebar-button.mod-close svg {
39+
mask-image: var(--lucide-cross);
40+
-webkit-mask-image: var(--lucide-cross);
41+
}

Diff for: ‎snippets/new-tab-mod.css

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎snippets/table-mod.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* Table Mod */
2+
3+
body {
4+
--table-width: 88cqw;
5+
--table-border-color: rgba(169, 169, 169, 0.2);
6+
}
7+
8+
body:not(.table-width-obsidian-default) .markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper,
9+
body:not(.table-width-obsidian-default) :is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview) table {
10+
width: 100% !important;
11+
}
12+
13+
.markdown-source-view,
14+
.markdown-reading-view {
15+
container-type: inline-size;
16+
}
17+
18+
.table-width-customized .markdown-source-view.mod-cm6.is-live-preview .cm-content>.cm-table-widget,
19+
.table-width-customized .markdown-rendered .markdown-preview-sizer>div:has(>table) {
20+
overflow: auto;
21+
width: var(--table-width) !important;
22+
margin-left: calc((var(--table-width) - 100%) / -2) !important;
23+
}
24+
25+
:root table {
26+
--table-border-radius: 8px;
27+
border-collapse: separate;
28+
border-spacing: 2px;
29+
}
30+
31+
tr td,
32+
tr th {
33+
border-radius: var(--table-border-radius);
34+
}
35+
36+
:root :is(td, th) {
37+
border-width: 1px;
38+
}
39+
40+
/* Uncomment the lines below to remove border spacing and combine all table boxes together */
41+
42+
/* === erase this line to uncomment === //
43+
44+
:root table {border-spacing: 0;}
45+
tr td, tr th {border-radius: 0;}
46+
th:first-child {border-top-left-radius: var(--table-border-radius);}
47+
th:last-child {border-top-right-radius: var(--table-border-radius);}
48+
tr:last-child td:first-child {border-bottom-left-radius: var(--table-border-radius);}
49+
tr:last-child td:last-child {border-bottom-right-radius: var(--table-border-radius);}
50+
:root :is(td, th) {border-width: 0 var(--table-border-width) var(--table-border-width) 0;}
51+
52+
/* */

0 commit comments

Comments
 (0)