Meta Post - Common CSS Hacks

@Shamama: OK, many thanks for your help. I like that code, and even think it should become standard in Obsidian. Cheers for now.

1 Like

Loving the columns feature but the jump/flicker and long filename issues are problematic for me. It also seems to flicker the most when I’ve scrolled to the bottom of the list. Has there been any progress on this bit of code in the last month?

This is what I have:

/----file explorer column view : slightly buggy ----/
.nav-folder-children {
column-width:200px;
column-rule: 1px solid var(–background-modifier-border);
}
/* Wrap long nav text and some paddings /
.nav-file-title,
.nav-folder-title {
white-space: normal;
width: auto;
}
/
Indent wrapped nav text */
.nav-file-title-content {
margin-left: 10px;
text-indent: -10px;
}

And this is what I often get:

Unfold at the arrow for preview; hidden because it's annoying to watch

ezgif.com-gif-maker

1 Like

Sorry I don’t know how to fix it… I use about the same code you posted, with the same bug. Still, I find its usefulness outweighs the cons… I can see why some people would want to disable it though haha :slight_smile:
Let’s hope someone with better skills can come up with a fix or a plugin.

Adjusted popover window and formatting.

This code is not from me, I found the different parts of it here scattered in the forums and adjusted it. I thought it would be a good idea to put this together in one place.

It basically enlarges the popover window, makes the tag pills smaller and adjusts the background as well as the marked text.

.popover {
  font-size: 20px;   /* bigger text to make up for the downscaling */
  text-align: justify; 
  box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.25); 
}

.popover mark {
  background-color: #000000;     /* mark background color */
  color: #dddddd     /* color for marked text */
}

.popover.hover-popover {
    transform: scale(0.7); /* downscales the whole content - important for smaller tag pills */
    max-height: 900px;   
    min-height: 100px;
    width: 700px;  
    background: var(--background-primary);
}

before


after

Cheers

3 Likes

Can somebody come up with something similar for the embeds, ie I want the embeds to be a little smaller that the actual page

Can anyone point out what I am doing wrong when trying to define tag color for the specific tag #important?

The following code snippets were taken from the code shared above from several posts. Really appreciate it!

The following code snippet was used to set overall tag display.

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
  content: '#'; /* This is to prevent the removal of tags in the WYSIWYM setting. */
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--text-accent);
border: none;
color: white !important;
font-size: var(--font-size-tag);
padding: 1px 8px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}

The following code was used to set tag display for the tag #important in preview and edit mode, respectively.

/* Tag color in preview mode */
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

/* Tag color in editor mode */
.cm-tag-important {
  background-color: red;
  border: none;
  color: white !important;
  font-size: var(--font-size-tag);
  line-height: 1.6em;
  padding: 0px 7px 1px 7px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

However, I got the following effect for the tag(s) in edit mode:
Screenshot 2020-09-22 at 21.19.10 Screenshot 2020-09-22 at 21.19.26
When the tags were not selected (first figure), the tag #important was not displayed as red; when selected (second figure), the hashtag was separated from the “important”.

In preview mode, the tags work like a charm.

1 Like

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.

1 Like

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);
}
3 Likes

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-


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

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

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

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

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