Hey, I am relatively new to Obsidian and trying to “warp” the editor’s visuals to my needs. I am new to CSS and JS as well, but want to build at least some understanding of its syntax to do unassisted customizations and combine them in Obsidian.
As of now, I am trying to display blocks of my text in some sort of frame, similar to a chat bubble (see the image below). Blocks are separated by two line breaks (not one) – that is the low level “syntax” I am used to. As this is just to visually guide me, I need to use the feature in editor Mode in live preview.
When it comes to the blocks, I would be happy to just have a different backgroundcolor with no frame. A subtle frame plus rounded edges would be cool as well (see image) but I have no idea how to create them.
I did some research an guess I have to style every div.cm-line element that is not proceeded by two elements. However, I am still struggling to come up with a code snipped that does the job, especially regarding its supposed to work in live preview (which I do not fully understand yet).
CSS Cascading Style Sheets) is not a “hack” it is an integral part of styling electronic Hypertext documents.
These are the foundation of what started as the World Wed Web. Hypertext Markup Language (HTML) defines the structure and CSS describes the design.
Markdown was created to “hide” what many though was “ugly” HTML when bloggers
created and published their blogs to the web.
CSS and HTML can be very powerful ways to express ideas thoughts and knowledge. They are far from “hacks” and worth going deeply into.
Hello all, I’m currently using this to make my note width a thousand pixels, but it only works in reading mode, does anyone know how to fix it so it works in live preview and source mode?
This css is pretty much for my personal use, so I didn’t add everything found in the Hider Plugin.
Basically, I went up to the app.css file of obsidian, extracted the classes which direct to some of the elements that the hider plugin hides, such as the sidebar toggle buttons, sidebar ribbons, etc., and created a custom css file to hide those elements in my obsidian setup, without needing to install the hider plugin.
Simply put, if you wanna have a setup like the one below:
I do realise that some of the padding and margin changes I made to the code, would probably not fit every screen sizes (I’m a css noob…unfortunately), but hopefully you can alter them to your needs. Please let me know if there’s anything I could improve here.
Nevertheless, the Hider plugin is certain a lot better to use if you don’t bother having more plugins.
Very nice! I initially didn’t use the ribbon but now I like having quick switcher as first and command palette as second option. It’s more peaceful to click quick switcher on the ribbon when you start working with your notes because you don’t have to instantly look for your keyboard and align your fingers there (that happens afterwards).
I was looking for a CSS solution for spoilers and secrets in my Obsidian notes, tried different options, researched plugins, etc., but nothing satisfied my simplest need to hide bits of text and be able to see them on mouse hover or something, so I came up with my own tiny CSS snippet solution and I’m pretty happy with the result.
Basically you use it as a callout with - [#] Secret text goes here... and all you need to do is to keep you mouse cursor in that callout while typing and then when you move your cursor out it hides the text behind this nice blur, to reveal it again you just put your mouse over the block, and Bob’s your uncle – your text is visible again! Works on mobile, BTW, by putting your text cursor into that line.
Can you share about your use case, how will you use the temporary blurring? Similar things have been done when people want to show off their vault, but since you use temporary blurring, it raises question how you are going to use it. You can input foldable callouts which are very similar to your use case, but the difference is that show/hide requires a mouse click or Fold less/more command. There’s also Fold all headings and lists and Unfold all headings and lists commands. Mouse hover based formatting is in general problematic since it adds unwanted visual flickering to your editing experience.
My primary use case is blurring any sensitive information in my notes (like some journal entries, etc.) so it’s hidden when for example I’m sharing my screen with a colleague or somebody else when teaching, showing something off, etc. Also in some cases when I want to memorise something I might opt to hide the answer and see it only when I’m checking if I recall it correctly. And you’re right — folding is not as convenient cause it requires more clicks and effort to unfold and fold back again, Besides, it’s not as prominent as an actual blurred space occupied by some text.
I’m not sure why you’re referring to it as “temporary blurring”, it’s permanent until you hover the text you intend to see. Moreover, I didn’t notice any flickering when editing text, you hover the line you want to edit and type in – no difference with any line that was not blurred in the first place.
Having said that, I’m not sure why I’d need to justify my approach. You tried it? You don’t like it? Ok. No prob. Don’t use it. Or am I missing some forum rule that forbids sharing solutions there are “native” alternatives to?
I just like to challenge other people’s workflows. I believe these can be fruitful discussions. Be temporary I mean your core idea is to create more fluid process of unhiding-hiding. This can be useful if you really want to share stuff regularly. I didn’t thought that before but it makes sense to add that blurring feature if you work closely with others or are planning to do so. In summary anyone could be benefited from your css work!
