Meta Post - Common CSS Hacks

Share & showcase
134

@Shamama: unfortunately this still does not work for me.

This was your original code:

/* outliner for the outline */
.outline-heading-children{
  border-left: 1px solid rgba(118,158,165,0.2);
  border-radius:0 0px 0px 0;
  transition:all 0.5s ease-in-out;
}
.outline-heading-children:hover{
  border-left-color:rgba(118,158,165,0.4);
}

Does you new code replace all of this, or only the 1st block, or only the 2nd block?

135

@Klaas Try adding this code and see if it works?

.outline .collapsible-item-children {
  margin-left: 20px;
  border-left: 1px solid rgba(118,158,165,0.2);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.outline .collapsible-item-children:hover {
  border-left-color: rgba(118,158,165,0.4);
}
4 Likes
136

@wonton: yes, that works. Many thanks !!

137

@wonton: is it possible to make the bit for the file explorer in the left pane more like what you did for the outliner?
Here is what I use for the file explorer:

.nav-folder,.nav-file{
  margin:0 !important;
  border-left: 1px solid rgba(118,158,165,0.2);
}

I like the curvature at top and bottom of the connecting lines in your outline.

139

@wonton: oops, post withdrawn after 3 edits? I hope you’ll come back …… because I like the effect of your connecting lines in the outliner.

140

This should work

.nav-folder-children .nav-folder-children {
  margin-left: 20px;
  padding-left: 0;
  border-left: 1px solid rgba(118,158,165,0.2);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.nav-folder-children .nav-folder-children:hover {
  border-left-color: rgba(118,158,165,0.4);
}
141

I just made a mistake, so I deleted it

142

@wonton: it works, although it is similar to Shamama’s output - the curved tops and bottoms do not appear.

143

My English is not good, do you mean you still have no curve effect?

144

@wonton: that is correct, still no curve effect.

145

The curve effect is not obvious
You can adjust these values
Snipaste_2020-09-26_21-00-42

2 Likes
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