"How to achieve" CSS code snippets

[Lithou]

Background Images from Local files:

---

So… Lithou is avoiding studying for finals… which means cool CSS stuff!

---

How to do it:

1. Embed an image into a document
2. Make sure preview mode is visible
3. Open up the developers tools
4. Find that image in the elements list
5. Click on “Properties” tab then expand the first item “img”
6. There will be an absolute file path listed after "src: “path goes here”
7. Copy/paste that path into your css as a background-image

Here is an example:

Endless Possibilities:

• You can use the background in general such as preview mode/edit mode.
• You can use it for preview mode on pages with a certain cssclass in their meta data
• you can use it on other elements of obsidian.
  • Want to make a divider bar look like wood?
  • Want to make your title bar look like some diamond plate?
  • How about combining two backgrounds for a cool stylized parchment effect?
  • Want to do all at the same time so it clashes horribly?

Go right ahead I’m not here to tell you how to live your life.

Future / Coming Soon:

Putting together some of the psuedo class stuff (thanks to @death.au and some others on discord/forums) and some bg stuff and a few other random items. Still super buggy and working on a few CSS odities, but here’s a preview. Will update with snippets to add to @Klaas 's list when stable.

[Klaas]

@Lithou: it seems this guru cannot be held back either
Any chance to make some of this incredible stuff into (a) plug-in(s)?

[Rainbow_CH]

Yes, I also designed a CSS style from your interesting approach

When you click on the “I”, it will show you the hidden thing

I feel interesting as a CSS novice

[Klaas]

@Rainbow_CH: very nice. Useful for a question & answer session.

[Jeffurry]

Weird… all this stuff has stopped working in my Obsidian. I don’t think I have changed anything, just turned my machine off last night, and turned it on today. All the positioning commands have stopped working. I’ve tried all the obvious stuff (restarting Obs, restarting my machine, turning off and restarting the snippets, changing the ‘float’, and positioning measurements)… Nothing. This is a little heart-breaking
Can you suggest anything I have missed?

[Jeffurry]

I tracked down the source of the problem - the ‘active-line highlight’ snip that @mano put on Discord. Not sure what in there specifically did it, but I can live without it; the floating images and quotes are much more important to me.

[Lithou]

The Problem of Perfection

I love tinkering around with things and experimenting with CSS brings me lots of excitement and joy. I like sharing cool ideas I’ve had or promising discoveries. When I share something, others will have incredible improvements or creative uses for my ideas that I never would have thought of on my own.

The problem is that when someone asks how I did something or asks for a CSS snippet, I don’t want to share it because an idea is just that, an idea. It isn’t robust, it isn’t complete, it isn’t polished. I’m also a socially prescribed perfectionist so I often will say “You will have to wait”

Opening Up the Garage Door

The truth is, no idea comes fully formed, no project is ever complete. Even though things may be unfinished, unpolished, and incredibly messy, they still benefit from collaboration and questions (especially in this community where people are so helpful and constructive).

I’ve decided that in this I want to “work with the garage door up” to borrow a phrase. I created and uploaded a sandbox vault into a git repository. This is the vault that I will use for tinkering around with CSS, trying to reproduce bugs and other behaviour, and writing plugins if/when I get to that point. I just started to solidify my notes and CSS snippets so you won’t find everything there just yet, but you will find the CSS that I used for the page layout.

Inside the Garage

Just like any workspace there will be tools and projects lying around in various stages of completion. However, I hope that you will find insight, help, or simply have fun peaking over my shoulder to ask “what ya’ doin there?” I am hoping this will slowly help combat my unhealthy levels of socially prescribed perfectionism and provide a bit of accountability for me to not procrastinate some basic organization along the way.

Feel free to comment, clone, fork, create pull requests, etc. Ask questions here or on the discord. All those things. If you’d like to join me, send me a message and we can look at setting up some branches for various projects to collaborate on. Thanks for letting me share.

Go have fun: https://github.com/Lithou/Sandbox

[stratocat]

Blowing my mind. This is so generous. Onward noble knight!

[Klaas]

All the code in the file has now been put on Github, courtesy of StreLock. You can view or download the file here. If you have a Github account you can add interesting code too.

Today I added some more amazing code from Gabroel: sticky notes, and images with a scotch tape effect.

You can find this code under the heading “Special effects”. Enjoy.

Note: I will continue informing people of new additions to the Github file via this Obsidian forum page.

[Klaas]

I added code for a touch of extra reality to the tape (thank you @Lithou): 2 serrated edges.

[mano]

yeah, use my stuff with caution. I don’t know what I am doing - I am just messing around :). The active line stuff also highlights any --- section separator stuff for some reason.

I’ve saved it as a snippet and only turn it on when needed.

[cestvrai]

Super useful, Klaas. Thank you for putting in such a good effort. I have a question about the Mermaid styles. Are these supposed to be used inline or in the snippets file?

[Klaas]

@cestvrai: inline. Some of the themes have mermaid styling integrated in their css files, but you can use the code from my file in any case.

[cestvrai]

@Klaas, do you happen to know which themes incorporate mermaid style? I know the Minimal theme does not, and inline styling does not work in Obsidian as far as my limited CSS knowledge can tell. You have to use CSS.

[Klaas]

@cestvrai: Obuntu is an example, but there are a number of others, I have not looked at all the available themes.

The mermaid code in my file is not CSS code, it is mermaid code to achieve hierarchical trees like e.g. org charts. Mermaid code is much broader than that.

The mermaid code in my file is for use directly in an Obsidian note, the styling is standard mermaid styling. I think that a theme that incorporates mermaid in its CSS is just for styling of e.g. boxes, like round instead of square. Remember, CSS is just a styling code. If you think of a house as an analogous concept, then HTML is like the structure, CSS is the wallpaper, and JavaScript is what puts things in action like the electricity in a house does.

You’d be better off talking to the theme dev about the mermaid part of the CSS sheet.

[Klaas]

Tag pills in Edit mode: @whyI provided a better version of what I had, so I have replaced what there was. The tag pills now look like those in Preview mode, i.e. no split between the # part and the text part.

You can copy/download the code from Github.

[Klaas]

@Lithou has come up with some amazing way to place images. I have added his code to my Github repository, section “Special effects”.

I recommend downloading/cloning his repository, then opening it as a vault in Obsidian works best to get to understand the flags because there are 2 panes open: one in Edit mode, one in Preview. Edit mode shows the flags for achieving each effect.

[oxysmart]

That is very needed for us CSS newbies. Thankyou.

[Klaas]

Glad you like it. It is not perfect, and contains mostly code that I use or used in the past.
If there’s an interesting piece of code you think is missing you made add it with a pull request in the Github repository, or post it here and I’ll add it.

[oldtowneast]

I stuggle to find words without using a thesaurus to express how grateful I am for this post!