#130

Also curious about how to set individual tag colors in graph view, as shown in the Announcement of v0.9.0:

I was trying to achieve the same tag display in edit, preview, tag pane and graph view, both for overall tags and for some individual tags. However, from the post below, it seems that setting individual tag colors in tag pane has not been supported yet.

It would be really awesome if this can be achieved someday.

1 Like
#131

That’s as far as I’ve come. It adjusts the overall scale, text size and the width.
I also added a small box shadow.

.markdown-embed
{
  transform: scale(0.95); /* makes the content smaller */
  width: 620px;
  font-size: 13px;   /* relatively larger text to make up for the downscaling */
  text-align: justify;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
}

/edit: As it seems, for some strange reason, the code also changes the width and scale inside the preview popover?

margin-left: 50px !important;
margin-right: 50px !important;

I tried this instead, same problem.

.markdown-embed
{
  font-size: 13px;   /* bigger text to make up for the downscaling */
  text-align: justify;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}

.markdown-embed-title { display:none; }

I ended up with this, which I think looks a bit cleaner.

#132

After some tests, the #important tag color now displays as expected in editor mode when not selected by adding the following code. However, when selected in editor mode, the issue persists.

/* Tag color in editor mode */
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important:before {
  content: '#'; 
}
.cm-tag-important, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-important {
  background-color: red;
  border: none;
  color: white !important;
  font-size: var(--font-size-tag);
  line-height: 1.6em;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none !important;
  /* display: inline-block; */
  margin: 0px 0px;
  cursor: pointer;
  /* border-radius: 14px; */
}
.cm-tag-important:hover {
  color: white;
  background-color: var(--text-accent-hover);
}
3 Likes
#133

Updated table of content outline for version 0.8.15

The code is not perfect anymore for the recent updated structure of obsidian :disappointed:. But it still help to navigate with and ease.
here is the code

/* outliner for the outline */
.tree-view-item-children{
  content: ' ';
  border-left: 1px solid rgba(118,158,165,0.2);
  border-radius:0 0px 0px 0;
}

and this is the output-

image
image1366×768 32.5 KB

I know the recent code is not perfect at all. If somebody has a good skill with position absolute layout I think its possible for him to do it perfectly

#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.