Meta Post - Common CSS Hacks

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;
}
6 Likes

@_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.

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 :slight_smile:

Thank you.

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”

@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)
image

11 Likes

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

1 Like

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.

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.

15 Likes

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

1 Like

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.

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

that’s awesome! thanks for this!

1 Like

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

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
{ ... }

I guess the above has no counterpart in the Editor.

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

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

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 :slightly_smiling_face:.

1 Like

@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