Meta Post - Common CSS Hacks

Share & showcase
146

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

147

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

1 Like
148

@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);
}
2 Likes
149

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.

157

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.

  1. [Obsidian] (https://obsidian.md/) ↩︎

159

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

Capture

160

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.

161

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.

162

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
163

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

9 Likes
164

@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
165

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

166

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.

167

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.

168 
.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
169

(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)

170

@zoni: what does this bit of code do?

171

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.

172

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
173

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