Meta Post - Common CSS Hacks

36 posts were split to a new topic: Clutter free edit mode

Tag Pills in editor (tested on 0.8.0)

Before
image

After
image

To get tag pills in editor, get the code from this post:

Then replace this block (the first one):

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

with these two:

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
    content: '#';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
  background-color: var(--text-accent);
  border: none;
  color: white !important;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
5 Likes

Thank you, that’s very neat :smile:

1 Like

I’ve been toying with this one! This code works well for the tags, but unfortunately it also affects HTML tags within code blocks. I modified it a tad so it ignores HTML blocks.

/* ====== Tag Pills ======== */
.tag:not(.token) {
	background-color: var(--text-accent);
	border: none;
	color: white;
	font-size: 11px;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 14px;
}
.tag:not(.token):hover {
	color: white;
	background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
	background-color: #4d3ca6;
}
.tag[href^="#important"] {
	background-color: red;
}
.tag[href^="#complete"] {
	background-color: green;
}
.tag[href^="#inprogress"] {
	background-color: orange;
}
2 Likes

This helps a lot! Thanks

Bigger popup previews with more content (see below : before/after, that’s the same content in the popup)

code:

/*============bigger link popup preview  ================*/
.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;    /* was 300 */
    min-height: 100px;
    width: 500px;     /* was 400 */
}

integrated in my theme obsdn-dark-rmx, available within the settings\Community Themes in obsidian.

9 Likes

Anyone know if it’s possible to get images to display in the editor? backgrounder-image isn’t working, is image display likely disabled in the editor?

2 Likes

Want to ask the same question for transclusions as well.

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

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.

1 Like

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.

1 Like

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

1 Like

Thanks for this.

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.

10 Likes

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.

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

1 Like

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

Done, but i’m trying to change the look from what we now have:
image
Font size, frame, etc.

It should be doable within css, am i right?

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

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

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