Meta Post - Common CSS Hacks

@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

div.markdown-source-view.is-readable-line-width > div.CodeMirror.cm-s-obsidian.CodeMirror-wrap {
  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;
}
2 Likes

you can change like below, it works well :obsidian: 0.9.3
warning: no work in 0.9.4

.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;   
    min-height: 50px;
    width: 500px;   
    overflow: overlay; /* new added */
}

.popover.hover-popover .markdown-embed  {
    height: 100%;
}

.popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
  padding: 10px 10px 10px 16px;
}
2 Likes

@Echo: the stacking of a popover on a popover covers the 1st popover completely. I don’t see how to get back to the 1st popover.

With the code I use the 2nd popover is a bit below the 1st one so it’s easy to go back to the 1st one. The only thing is that even if I increase the height to e.g. 1000 px it does not change the popover size.
BTW, I am on 0.9.3 too.

.popover.hover-popover {
  position: absolute;
  z-index: var(--layer-popover);
  transform: scale(0.9); /* makes the content smaller */
  max-height: 800px;    /* was 300 */
  min-height: 100px;
  width: 500px; /* was 400 */
  overflow: hidden;      
  padding: 0;
  border-bottom: none;
}

test this, you can change 16px to other

I see no difference with this code and your previous one, even if I change the 16px.
With this one the 2nd popover still covers the 1st one.

how does overflow works?

1 Like

It is to control scrolling
You can set it to overflow: auto; and it will also work.

If I set height: 100%; , without setting overflow: , the popover will not scroll. I don’t know why :joy:

I set height: 100%; because I don’t want to have two or three scroll bars inside when popover, if there are ![[somefile]] inside the (popover) file.

Is there somewhere a custom.css that contains all default Obsidian css classes with values exactly as they are in default application look?

Introducing changes by using Ctrl+Shift+I doesn’t seem to be a good solution because it doesn’t save these changes. And css users solutions concerns often only selected elements of interface.

You might want to look at sources -> app.css. I think, it contains all default Obsidian css classes with values.

image

4 Likes

Amazing…

yo @Wen! did you ever figure out the weird tag hash separation in editor?

@hieu Unfortunately, no. In fact, I decided to give up achieving WYSIWYM in editing mode for now. The main reason is that there are some weird cursor selection alignment bug for me. For example, when I try to copy a tag by selecting it with the cursor, it often goes to another position as the text would expand when selected, which is quite annoying.

2 Likes