Inspired by canvas-candy, I’d like to create some nice CSS-enhancements for my canvasses.
I want to use the ‘cssclass’ keyword in frontmatter to be able to add formats to individual cards i.e. to create post-it like cards.
Looks good!
I tried by adding your code as a new entry in the CSS, works fine.
But - it seems as if I would have to create a similar code for each css-snippet I have defined (i.e. different post-it-cards with different colors (post-it-y, post-it-b etc.).
The above says that it should target any note whose CSS class contains (*=) the string “cc-postit”, whether it’s “cc-postit-x” or “mycc-postit-test” and whatnot.
Or you can make your own prefix like zz and target everything with that prefix using the starts with (^=) operator, like [class^="zz"] > ...
Heck, you can even put the whole calculation-shebang inside a global CSS variable and reuse it anywhere without retyping it:
/* adjust text margin & timestamp color here */
:root, body, .view-content {
--canvas-embed-margin: calc(var(--line-height) * -16px) !important;
}
[class*="cc-postit"] > .markdown-preview-section > div:first-child {
margin-top: var(--canvas-embed-margin)
}
Since i can’t be 100% sure that there is nowhere any class that conains ‘cc-’ somewhere in the middle, I’d prefer to restrict the command to only those classes which exactly begin with ‘cc-’
Indeed, it seems that it doesn’t work because the canvas card itself has multiple other classes defined by Obsidian, themes & plugins, making the cc- class never the first one, hence why ^= won’t work in this particular case.
So you’re left with just the *= (contains) operator, but you probably have to use your own made up matching keyword or prefix (which can obviously be longer than a few letters), something that you’ll be sure it won’t be used by any other class
As usual, the appetite comes while eating (or so goes a German saying), so I’d like to use a different Font for my post-its.
ChatGPT tries to convince me, I should use a statement like this:
But - it doesn’t work.
What weird: I have ‘Kalam’ installed on my Windows 11 machine, but I can’t find the file in c:/windows/fonts.
That’s why I downloaded it from Google.
If you have the font installed on your computer and you can use it in other apps, then try using just this line (assuming this is what the font is named in other apps as well) with no src and stuff:
font-family: 'Kalam';
If that doesn’t work, then unfortunately Obsidian doesn’t allow using custom fonts based on URLs or font location either, so instead you have to embed fonts in the CSS file as binary base64 data.
There’s a page on Obsidian’s documentation detailing the process (apparently ChatGPT didn’t read the Obsidian docs ):
):