Meta Post - Common CSS Hacks

Share & showcase
56

Leave it, it does not hurt :wink:

3 Likes
57

May I suggest to include 2 screenshots in the template: without hack and after hack?

Also, you can include it your list post or convert it to a table?

Before After Description
Auto fade note controls
3 Likes
58

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

64

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;
}
10 Likes
67

Thank you, that’s very neat :smile:

1 Like
72

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

This helps a lot! Thanks

82

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

Obsidian_ZbB30q06Zl
Obsidian_ZbB30q06Zl864×974 124 KB
Obsidian_3o8AwdKDm8
Obsidian_3o8AwdKDm8864×974 115 KB

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.

18 Likes
83

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
84

Want to ask the same question for transclusions as well.

86

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

87

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
88

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
89

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

Thanks for this.

91

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.

0CIL0rNMIA
0CIL0rNMIA1825×913 3.05 MB

13 Likes
92

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.

image
image737×541 16.8 KB

1 Like
93

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

1 Like
94

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

95

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