Here is a list of useful snippets to improve Obsidian Canvas.
I will add more as I create them.
Don't forget to share & star π
(The snippets are created for Prism Theme and you probably need to tweak them)
Contents:
First add the snippets, then place one or more spans in your node, including the ni
class (short for "node icon"), icon position, and the icon itself.
- Positions:
- Horizontal:
l
(left),c
(center),r
(right) - Vertical:
t
(top),m
(middle),b
(bottom)
- Horizontal:
- Icon Types:
- Emoji:
<span data-icon="π"></span>
- Text:
<span>Custom Text</span>
- Custom Icon (using Iconize Plugin):
<span>:LiFolderTree:</span>
- Emoji:
Here are three examples:
Your markdown here
/* emoji as icon, top left */
<span data-icon="β’" class="ni t l" />
/* text as icon, bottom left */
<span class="ni b l">Custom Text</span>
/* text as icon, middle right */
<span class="ni m r">:LiFolderTree:</span>
Your markdown here
Note
Middle m
and center c
positions don't work correctly with custom shapes, because of overflow
.
Add this css snippet. Feel free to change padding, margin and others based on your theme styles.
.canvas-node:not(.is-editing) {
transform: rotate(0deg);
.ni {
padding: 4px;
position: absolute;
color: hsl(var(--canvas-color));
height: max-content;
&[data-icon] {
padding: 0;
font-family: "Segoe UI Emoji";
font-size: 1rem;
&:before {
content: attr(data-icon);
}
}
&.t {
top: 0;
}
&.m {
top: calc(50% - 12px);
}
&.b {
bottom: 0;
}
&.r {
right: -12px;
}
&.c {
left: calc(50% - 4px);
}
&.l {
left: 0;
}
}
}
After adding the snippets, you can add any element (like a <span>
) including the class name of the shape. For example, to create a circular node with centered content, put this in your node:
Your node content...
<span class="shape-circle node-center"></span>
For centered-content style:
.canvas-node:has(.shape-rhombus, .shape-hexagon, .shape-circle) {
.markdown-rendered {
&::before {
display: none !important;
}
&::after {
display: none !important;
}
}
}
.canvas-node:has(.node-center) {
.markdown-rendered .markdown-preview-section {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
> div * {
text-align: center !important;
text-align-last: center !important;
}
}
}
.canvas-node:has(.shape-circle) {
&.is-focused {
background-color: rgba(0, 0, 0, 0.5);
}
.canvas-node-container {
border-radius: 50%;
aspect-ratio: 1 / 1;
height: 100%;
width: auto;
.markdown-embed-content {
padding: 15%;
}
.markdown-rendered {
padding: 0 !important;
&::before {
display: none;
}
&::after {
display: none;
}
}
}
}
.canvas-node:has(.shape-rhombus) {
border: solid 4px hsl(var(--canvas-color)) !important;
background: hsl(var(--canvas-color)) !important;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
.canvas-node-container {
clip-path: inherit;
border: none !important;
.markdown-embed-content {
padding: calc(var(--canvas-node-height) / 4)
calc(var(--canvas-node-width) / 4);
}
.markdown-rendered {
padding: 8px !important;
}
}
}
.canvas-node:has(.shape-hexagon) {
border: solid 2px hsl(var(--canvas-color)) !important;
background: hsl(var(--canvas-color)) !important;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
/* for regular hexagon */
aspect-ratio: 8 / 7;
width: auto !important;
.canvas-node-container {
clip-path: inherit;
border: none !important;
}
.markdown-embed-content {
padding: 16% 16%;
}
.markdown-rendered {
padding: 8px !important;
}
}
In oreder to create your custom shape, you can use this template:
.canvas-node:has(.shape-your-shape-name) {
border: solid 2px hsl(var(--canvas-color)) !important;
background: hsl(var(--canvas-color)) !important;
clip-path: /* shape path */
.canvas-node-container {
clip-path: inherit;
border: none !important;
}
.markdown-embed-content {
padding: /* padding 1 */
}
.markdown-rendered {
padding: /* padding 2 */
}
}
Replace clip-path
value with your desired shape path, and change the paddings to make the inner content look readable.
Clippy is a great tool for working with css paths.
Here's a simple example, using Obsidian logo as a custom shape!