Meta Post - Common CSS Hacks

The curve effect is not obvious
You can adjust these values


Just for the record: @wanton’s code works with Obs version 0.9.1.

@wonton for which version is this code is for?
0.8.15 is not working with it :pensive:

1 Like

@Shamama 0.815 should be this

.tree-view-item-children {
  margin-left: 20px;
  border-left: 1px solid rgba(153,153,153,0.5);
  border-radius: 5px;
  transition:all 0.5s ease-in-out;
.tree-view-item-children:hover {
  border-left-color: rgba(153,153,153,0.8);

Thanks for sharing this. Is it possible to achieve something like the following?

  • When not using the multi-column file explorer pane, file names would display in one line.
  • When using this multi-column file pane feature, the filename would display in two likes, as configured by the code given above.

My case for using the multi-column file pane is mainly to drag files into certain folders, which would be very inconvenient if there are many files outside those folders. However, when not trying to do such an operation, I feel more comfortable when having a one-line file name.

nevermind, it was working only when adding a space between the link text and the link url, which you did in your first post (probably to escape formatting) and I didn’t pay attention before investigating.

sorry, can’t think about a solution.

Hello, I’m getting this weird look when viewed on Editing mode. Preview mode looks fine. I’m using the latest insider build v0.9.2


Yeah, same for me. Whenever I have a multi-line item in the edit mode. It’s in my backlog to investigate that if the original owner of the code does not fix it first.

Please let me know when you’re able to fix it. I’ve tried changing some values but due to my limited knowledge in CSS I can’t seem to figure it out on how to fix it.

As there are many css hacks in one topic, could the moderators split that up to one hack per topic and a new category for css hacks? (I cannot follow every post here but interested in some of the hacks’ evolution…)

Or maybe those hack could go to github to ease contribution…

1 Like

i just took a bunch of these so far (not all, but most of the ones I use) and contributed them to this repo where there is a growing list of the resources:

hope this helps


@tallguyjenks: that Github page looks good. 1 small addition:

you have added Shamama’s code “outliner for the outliner”. I am on macOS and found the code did not work for 0.8.15 anymore.

@wonton posted a modified version that works, and this code for the file explorer.

Worth adding to the Github page?

1 Like

nice, yeah i may have used the corrected code. ill make a new pull request for it :slight_smile:

Cluster-free edit mode was split with the kind help of moderators to this topic:

If your post belongs to there but was not moved, please write a message to the @moderators.

Hi, I tried pasting this code into css file (using atom) but it is not showing me the relationship lines. Any idea why? Can someone help please. Thanks in advance.

.popover.hover-popover {
  transform: scale(0.8); /* makes the content smaller */
  max-height: 800px;    /* was 300 */
  min-height: 100px;
  width: 500px;     /* was 400 */

How can I make this work in 0.9.3?
1 Like

(Cross-posting from the related feature request)

“Readable line length” in Markdown preview only > {
  max-width: 100%;

(Requires “Readable line length” setting to be enabled)

@zoni: what does this bit of code do?

Turning on “Readable line length” limits the width of text to 700 pixels in width (which likely averages to around 20 words for most text/font sizes for most people). Normally, this is enforced in both the markdown rendering as well as the source code view.

With this bit of CSS, the 700px width is maintained in preview mode, but restored to full window width in the editor.

Bigger popup window in 0.9.3

.popover.hover-popover {
 transform: scale(0.95);
 max-height: 800px;
 min-height: 300px;
 width: 400px;

.popover.hover-popover .markdown-embed {
 height: 550px; /* was 300 */
 font-size: 0.85em;
 line-height: 1.4;