Meta Post - Common CSS Hacks

gafsiqueira · August 19, 2020, 3:05pm

lizardmenfromspace:

.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
}

Sorry, I’m new to this CSS thing. Where exactly should I paste this code?
Thanks in advance.

minhthanh3145 · August 19, 2020, 3:23pm

In your vault there should be a obsidian.css, open it and append these lines to the file and save it. The change should be seen immediately.

gafsiqueira · August 19, 2020, 3:27pm

Thanks. There wasn’t any obsidian.css in my vault. I just created a txt and renamed ir to obsidian.css and then pasted the code. It works. Thanks @minhthanh3145.

Klaas · August 19, 2020, 3:55pm

@gafsiqueira If ever you want to use a custom theme, you’ll have to use that theme’s CSS sheet and put it in your vault. You can open the sheet and add this code to the bottom of it.

Klaas · August 20, 2020, 5:17pm

Thanks for this.

_ph · August 26, 2020, 9:36pm

columns view for file explorer pane:
.nav-folder-children {column-width:200px;}

warning ! you need the filenames wrap mod & it’s somewhat buggy with very long filenames(the file list may jump/flicker, so you have to resize the file pane to fix) but I find it useful.

jcperezh · August 27, 2020, 6:52am

does anyone know how to change the look of 2nd level embed notes? (i.e. QuikNote.md in the Snapshot) i would like it to look a lot smaller.

Silver · August 27, 2020, 7:01am

That’s cool! @lizardmenfromspace maybe you can add this to the TOC in the main post for easier access?

Klaas · August 27, 2020, 10:57am

@jcperezh: at present only 1 level of embedded notes (transclusion) is possible. There is a request to extend that.

If you agree with the request you can upvote it with a heart under the OP.

jcperezh · August 27, 2020, 11:13am

Done, but i’m trying to change the look from what we now have:

Font size, frame, etc.

It should be doable within css, am i right?

Edit: done. these are the parameters (for css-illiterate like me)

Klaas · August 27, 2020, 1:04pm

@jcperezh: I am CSS-illiterate, like you, so I am not sure. I understand from people’s comments that it is not doable, hence my request.

What makes you think it is doable? If so, I am very interested in it, so please share the code if you manage to get it.

jcperezh · August 27, 2020, 4:38pm

Obsidian treat 2-level Transclusions as a Embed File. changing Font-size or border color from those parameter affect the look from these frame. it will not show the note, just change the size and look from these link

Klaas · August 27, 2020, 4:50pm

@jcperezh: so if it won’t show the 2nd level embedded file then we don’t really have 2-level transclusion.

I hope the feature request will be implemented because I love transclusions and use them a lot.

jcperezh · August 27, 2020, 6:47pm

yes u r right, it should be 2 level minimum. (it has my upvote)

kepano · September 1, 2020, 4:32pm

Here’s a new tidbit I am using:

Here’s what it looks like:

The code. Note, you can also remove the background or change it to a semi-translucent color.

.markdown-preview-view .internal-embed img {
	cursor:zoom-in;}

.markdown-preview-view .internal-embed img:active {
	cursor:zoom-out;
	display:block;
	z-index:100;
	position:fixed;
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    object-fit: contain;
    margin:0 auto;
    text-align:center;
    top: 50%;
  	transform: translateY(-50%);
    padding:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--background-primary);}

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