Also curious about how to set individual tag colors in graph view, as shown in the Announcement of v0.9.0:
https://forum.obsidian.md/t/obsidian-release-v0-9-0-insider-build/5975
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.
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.
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);
}
The code is not perfect anymore for the recent updated structure of obsidian 
. 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-
@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?
@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);
}
@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.
@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.
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);
}
I just made a mistake, so I deleted it
@wonton: it works, although it is similar to Shamama’s output - the curved tops and bottoms do not appear.
My English is not good, do you mean you still have no curve effect?
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.
@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?
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.
[Obsidian] (https://obsidian.md/) ↩︎