Meta Post - Common CSS Hacks

Share & showcase
194

@argentum That’s really nice. It took me some time trying to figure out how to resolve this issue. Thanks for sharing this.

1 Like
195

Naked embed is now broken in 0.9.3 …

image

Edit: Nevermind, embed in 0.9.4 is better.

196

@jokysatria: here is the forum page.

1 Like
197

Does anyone know how do I increase the font size of only the left sidebar (filetree, search results etc.) ?

I know we can zoom in to increase the font sizes globally, but I am looking for hack to only increase the font size of the left sidebar

Thanks

198

For the filetree:

.nav-file-title, .nav-folder-title { font-size: 14px; line-height: 15px; }

For search results

.search-result-file-title { font-size: xyz; }

.search-result-file-matches { font-size: xyz; }

should work.

6 Likes
199

Thanks a lot. Exactly what I wanted :slight_smile:

200

@Wen @Klaas
not sure if it’s still relevant, but the issue with the cursor alignment had to do with this bit:

  /* highlight (==) not visible anymore if not active line */
  div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
   font-size: 0;
  }

commenting it out fixed the issue for me… my sacred cursor / text selection now align properly :sob:

1 Like
201

@hieu: thank you.

202

@hieu Thanks for sharing. I will try to combine it with my CSS settings later.

203

pls help

Capture
Capture880×125 6.32 KB

204

How about this:

/* checkbox alignment */
.markdown-preview-view .task-list-item-checkbox {	
	width: 15px;
	height: 15px;
	top: 0px	
}
1 Like
205

Capture

It worked! I had to change values until it was aligned for me. Thanks so much for the code.

Could you help me with changing the fill color of the checkbox as well, please?

1 Like
206

I am not a CSS expert, so please excuse me if this does not work:

input[type=checkbox]:checked {
    background-color: var(--text-accent-hover);
}

Change the background color to whatever you like.

207

Well, it doesn’t work properly. There’s still a pink outline around the box and the colors are a bit off. But it doesn’t matter. The default fill color goes pretty well with my default dark mode Obsidian so I think I’ll stick with it for now.

Thank you once again!

208

@fourteen: before you go, try adding the extra line:

input[type=checkbox]:checked {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
}

Let me know.

209

That fixed the outline issue.
However, the color code I’m inserting isn’t matching up with the color being displayed (for both the background and the border).

210

Are you inserting like “red” as a colour or the RGB code? RGB is more accurate.

211

I was using Hex codes.

212

Ah, OK, that should be good enough. But since it is not, I cannot be of more assistance, sorry :disappointed:

213

No worries, you already did plenty by making this feature!

1 Like