Meta Post - Common CSS Hacks

_ph · September 11, 2020, 4:57am

editor wysiwym headers dirty hack

this will replace headers markup (#,##,...) by corresponding [H1-H6] text in the gutter :

it has the same drawbacks as the clutter-free mode : the markup will not be revealed on selection (because line selection doesn’t trigger the active line class).

the code below is set up for my theme ono-sendai, you will probably need to reposition elements to avoid overlapping & adjust font-size to your liking (it may be incompatible with themes that already target the same classes for other purposes, but I know it works on the base theme and a couple of others).

 /*=============== replace H1-H6 markup in edit mode================*/
.CodeMirror-sizer{
  margin-left: 48px !important;
}

/*-- reduce left padding --*/
.CodeMirror {
  height: 100%;
  direction: ltr;
  padding: 0 10px;
}
/*-- header color --*/
.cm-header.cm-header-1{
  color: var(--text-accent);
  left:0px;
  position: relative;
}
.cm-header.cm-header-2{
  color: var(--text-accent2);
  left:0px;
  position: relative;
}

/*-- hide # markup--*/
.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3,
.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6
{font-size:0px;}

/*-- display H1-h6 in gutter--*/
.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{
  content:"H1";
  font-size:18px;
  color: var(--text-accent2);
  left:-49px;
  top:-17px;
  position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{
  content:"H2";
  font-size:13px;
  color: var(--text-accent2);
  left:-43px;
  top:-10px;
  position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{
  content:"H3";
  font-size:11px;
  color: var(--text-accent2);
  left:-36px;
  top: 16px;
  position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{
  content:"H4";
  font-size:10px;
  color: var(--text-accent2);
  left:-36px;
  top: 14px;
  position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{
  content:"H5";
  font-size:10px;
  color: var(--text-accent2);
  left:-36px;
  top: 13px;
  position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{
  content:"H6";
  font-size:10px;
  color: var(--text-accent2);
  left:-36px;
  top: 13px;
  position:absolute;
}

/*-- is active line, hide H[1-6] in gutter --*/
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before
{font-size:0px;}
/*-- is active line, display # markup --*/
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{
  font-size:32px;
  display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{
  font-size:24px;
  display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{
  font-size:19px;
  display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{
  font-size:13px;
  display:inline;
}

Klaas · September 11, 2020, 8:10am

@_ph: is there a way to het the H1 etc in line vertically with the text of their header? I thought the offset was sepcific to my set-up, but I see it is there in your GIF too.

_ph · September 11, 2020, 9:33am

hey Klaas,

it might not be obvious from the GIF compression, but I’m using the option to show line numbers in the edit view, that’s why the [H1-H6] look offset vertically :
they fit in the empty spaces between line numbers to avoid any overlapping, but I get that it can be offputting if you don’t use line numbers…

Anyway, it’s an easy fix :

look inside the section that starts with /*-- display H1-h6 in gutter--*/
then tweak the values of top:XX px; and font-size: XXpx;, both values are linked, so if you increase the font-size, you’ll need to adjust the top: value accordingly.

There is probably a way to calculate the correct offset values automatically from the font-size but I’ll leave that to somebody else

Klaas · September 11, 2020, 9:51am

Thank you.

zerkshop · September 13, 2020, 5:11am

Anyone know how to get the bullet point relationship lines if using spaces instead of tabs? My lines disappeared when I changed this setting and replaced all the “\t”

death.au · September 15, 2020, 7:40am

@obadiahcruz asked on the Discord about having file and folder icons appear next to titles in the file explorer depending on the type, and this is what I came up with:

.nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; }
.nav-folder-children .nav-folder-title-content::before { content: '📂 '; }

This uses emoji, but I’ve found it looks nicer if you use a symbol font like Wingdings or IcoMoon and substitute symbols in like so:

.nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924  ";
    font-family: 'IcoMoon-Free';
  }
  .nav-folder-children .nav-folder-title-content::before {
    content: '\e930  ';
    font-family: 'IcoMoon-Free';
  }

(adding the :first-child bit prevents the icon showing up on files that aren’t markdown, such as images/pdfs, which show a type next to them)

GreenFlux · September 15, 2020, 10:57am

Awesome! Thanks for sharing, @death.au .

I’ve been inserting emojis into the folder name itself, but I worry about it causing issues with compatibility by having special characters in the folder path.

Your method seems like a much safer approach, but it does add some complexity to merge it with each theme.

Would it be possible to assign each folder an emoji from the right-click menu?

Then the icons would be independent of the theme and not lost each time the theme is changed.

Screen Shot 2020-09-15 at 6.46.34 AM

jacklaing · September 15, 2020, 1:11pm

I tried using hrefs to target specific names within the folder type to achieve what you’re looking for, like this

.nav-folder-children .nav-folder-title-content[href="Calendar"]::before { content: '🗓 '; }

but it didn’t seem to work.

Shamama · September 15, 2020, 2:37pm

Enhancing the view of “folders” and “Table of Content”

/* 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);
}
/* outliner for the file and folders */
.nav-folder,.nav-file{
  margin:0 !important;
  border-left: 1px solid rgba(118,158,165,0.2);
}

This helps understanding the relationship between child and parents of the folders and contents. In the picture you will see faint lines are appearing in the folder and ouliner section.

Kuncy · September 15, 2020, 3:20pm

If somebody could fix this!! it would be Amazing!!

death.au · September 16, 2020, 1:09am

Looking at the CSS I don’t think there’s a way to do it. There are no attributes that expose any information about the file name or anything.

jokysatria · September 16, 2020, 12:05pm

I still get a scroll (like a pane scroll) in the naked embed when embedding a quote only note. Any idea why is it?

Edit: Okay, it’s fixed by setting margin to 8px

tallguyjenks · September 16, 2020, 6:24am

Shamama:

/* 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);
}
/* outliner for the file and folders */
.nav-folder,.nav-file{
  margin:0 !important;
  border-left: 1px solid rgba(118,158,165,0.2);
}

that’s awesome! thanks for this!

Klaas · September 16, 2020, 7:07am

@Shamama: the part for the outliner pane (i.e. right hand pane) does not work in Obsidian version 0.8.15.

colourhazer · September 17, 2020, 11:51pm

awesome, thank you!

I suppose there is no way to apply this in edit mode as well since there’s no information regarding the actual tags in the html representation. If I’m doing this right, these are the css-selectors for the tags in edit mode:

span.cm-hashtag.cm-meta.cm-hashtag-end,
span.cm-hashtag.cm-meta.cm-hashtag-begin
{ ... }

d00b · September 18, 2020, 1:16am

I guess the above has no counterpart in the Editor.

Shamama · September 18, 2020, 7:34am

Well my obsidian is not updating to 0.8.15
Did you tried changing the color?
If that does not do the trick than may be they changed the class name.
I will update the code if my obsidian goes to the version 0.8.15

Klaas · September 18, 2020, 7:50am

@Shamama: I had not changed anything to your code, but tried after your suggestion. No change.

Why would changing the colour have an effect?
To what colour should I change it?

Shamama · September 18, 2020, 3:18pm

Sometimes if the line color is as same as the background color than it will not show up.
But don’t worry I will update this code if it does not work with my obsidian version.
Just waiting for my update .

Klaas · September 18, 2020, 3:20pm

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