Meta Post - Common CSS Hacks

Yes, it’s really all about what you’re used to and what you find pleasant to look at. Space Mono is a great font for many purposes. My post was mainly to raise attention that you can optimize legibility for your texts by having a more detailed look at character and word spacing settings.

1 Like

Yep, that’s clear. I have seen fonts that are visually attractive though letter spacing is a bit too tight, others probably have the same experience. So, for those who would still like to use such a font your solution is great.

1 Like

From: Meta Post - Common CSS Hacks - #326 by Christian

I have used this method of “line-focus” for a very long time and very appreciate how it enhance my writing experience

However, it seems, at least for me, the line focus in edit mode doesn’t not survive in the new update live-preview anymore… :sob:

Does anyone know any ways to have the line focus back? (i.e. the current edit line will have different color)

Sorry if this is a silly question, I’m not very familiar with the css

1 Like

hi, this is not working in live mode, how can I change it to work in live mode?

thx

also looking to get this in live preview mode!

Here’s a quick fix that works with Live Preview.
cc: @dorkloon and @Ziv

/* Modified by Christian (Chhrriissyy#6548). Original by MooddooM */
/* This version sets the line focus for both edit and insert mode. */
/* If you want to make it edit mode only, add the `.cm-fat-cursor` CSS class selector to both light & dark mode. /*

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
    width: 0.5em;
    background: #d65d0e;
    opacity: 60% !important;
}


/* LIGHT MODE */
/*if you want the highlight to present in both normal and insert mode of vim*/
.theme-light /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(0, 0, 0, 10%);
}

/* DARK MODE */
.theme-dark /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(95, 95, 95, 30%);
}

Just a quick heads up: this doesn’t fix the cursor styling, just the line indicator.

4 Likes

thx bro, it works

I have been struggling with styling the cursor in edit mode since in my case it was a thin grey blinking line that is incredibly hard to see… I tried every solution I could find on the forums and nothing worked and I have just been living with it… Today I decided to not give up until I had a fix. The code below does exactly what I want, which is a highly visible, semi-transparent, blinking block. Just thought I would share it here since it was harder to get to work than I thought it was going to be.

.cm-cursor {
    border-color:  #F67400 !important;
    border-left-width: 0.6em  !important;
    opacity: 60% !important;
}
6 Likes

Hi @Moonbase59, thank you very much for creating this CSS snippet. Great work!
I noticed that, when I export the master document to PDF, each note is enclosed between lines. Do you know how to remove them?


Thanks in advance.

I did some experiments and I noticed that if you insert in the @media print {) portion, the lines of code from the “clean-embeds-all.css” file, you even get a quite nice pdf.

Other useful lines to avoid page breaks are:

/* Page breaks */
h1 {
page-break-before: always;
}
h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}

Is it possible to do something similar to the list, but with paragraphs?

And is it possible to make a paragraph level signature?

image

You have been reading Penrose and Orch OR theory. We have to know each other from another life somewhere else in this or another galaxy. This CSS looks awesome and I’m going to give it a try right now! Really thanks colleague :upside_down_face:

Can you confirm that this is still working? I’ve tried it with the default theme and all other CSS snippets disabled and it doesn’t seem to work. I was really fascinated by your implementation, too bad it’s not working for me!

Hi, do you know if there is any way to fix the position of the heading arrow over that horizontal line? What should I change in the css? Thanks

I see that this cannot be implemented in subfolders, is that correct? I can only apply to folders just inside the root folder. Or am I having trouble placing the path?

1 Like

Hi @Nils.Srvd I never tried that but technically I think it should be possible if you address the right CSS selector.

1 Like

Here’s a CSS snippet to hide the filename / header at the top of Obsidian. This is an update to atiz’s solution which no longer works (at least for me).

.page-header {
  display: none;
}

Before:
image

After:
image

Thanks for your answer. I solved it by replacing the use of CSS snippets with Florian Woelker’s ‘Icon Folder’ plugin. Go try it, recommended.

1 Like

I couldnt make it run :frowning: I loved t but