Can't get custom CSS to work

What I’m trying to do

I want to add a line of space between paragraphs in the editor and reading mode.

Things I have tried

I have created a css file using bracketes in the snippets directory for this vault and pasted in the solution from this forum thread:

p{
    line-height: 1.4; /* change this value accordingly */
    display: block;
    padding-top: 6px;  /* change this value accordingly */
    padding-bottom: 6px; /* change this value accordingly */
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

but nothing changes.

I have looked at other topics where people are struggling getting css to work, but the solutions aren’t working for me. I am using Brackets to create the css file so its not the usual problem with rtf that happens on macs.

I’m new to this and I must be missing a step that is really essential. Thanks for your help.

The .css file i am using and a screenshot of my CSS Snippets settings is attached. I have also included screenshots from my editor / reading view


adri.css (209 Bytes)


In your sample note, are you aiming for four paragraphs? How are you ending the paragraphs? With a space and one enter? A double space and one enter? CSS can change the spacing of paragraphs, for sure, but I think this might be a markdown issue.

To create paragraphs, use a blank line to separate one or more lines of text.

It might be helpful to link your sample note.md (like you did with the .css file) so we can have a look at the source :smiley:

1 Like

Does this work?

Musk, who purchased the company for $44b in 2022 and has thus far struggled to make it profitable, has been threatening to remove what he called "legacy blue checks" for months now. The check mark previous denoted accounts that had been verified for authenticity and was given to accounts of celebrities, journalists and media outlets.

Now users seeking verification will have to pay for [Twitter](https://twitter.com) Blue, a controversial $8 a month subscription program under which any account can obtain a blue check mark.

The roll-out of the changes on Thursday was chaotic. Numerous high-profile users took to the platform to assert they would not pay for blue check marks under the new policy, while others announced they would leave the platform entirely.

Nonprofit organizations Human Rights Watch and the [NAACP](https://twitter.com/naacp) have [tweeted](https://twitter.com/NAACP/status/1649199696626294784) they will not be paying for Twitter Blue.

1 Like

I hope you OCR’d that! :keyboard: :laughing:

1 Like

Simply love the ease of ‘Live Text‘ in Preview: select, copy, paste. Can even translate on the fly. Colour me unendingly happy. :blush:

Hi, ariehen

I see, what you are saying, that markdown prefers I manually insert a space rather than relying on some styling to insert a space in between. Okay. I am still used to word processors like LibreOffice where you can have the space come automatically between paragraphs without hitting enter twice.

I am creating the paragraphs by ending the sentence and then pressing enter.
Afterwards I am starting to write on a new line, and I was hoping that it would be possible to automatically have space in between without the need for me to hit enter twice.

Uploading the sample note now.
Test Note.md (1.0 KB)

yep, that would indeed work.

Great!

Yes, your file will need blank lines as eightning showed.

Writing in Markdown takes a little bit to get used to but it’s easy to pick up. When in doubt or something looks weird, put a blank line before and after your content :rofl:. While Obsidian actually uses Commonmark, the Markdown Guide is more user friendly and good to refer to if you have Markdown questions.

The official Obsidian help documentation on formatting your notes is here:

Have fun!

Great. Thank you!!

Okay, I kept digging and it is possible. Apparently the reason why it wasn’t working with my css snippet was that obsidian moved from CM5 to CM6.

Here is the solution that works for me.

  1. Go to Settings / Appearance / CSS Snippets.
  2. Click on the folder icon.
  3. In the folder that opens create a file with a .css ending and paste the following (it’s best to use a code editor like Brackets):
.markdown-preview-view br {
    content: '';
    display: block;
    margin-top: 10px;
}

.markdown-source-view :is(.cm-line + .cm-line) {
   padding-top: 1em;
}

I found the answers here:

However, I would like to NOT have a space between bullet points and numbered lists - anyone have an idea how?

Altering your existing code a bit, this eliminates the spacing within lists (both ul and ol) in source+live preview modes:

.markdown-source-view :is(.cm-line + .cm-line:not(.HyperMD-list-line)) {
   padding-top: 1em;
}

Depending on if you want a single empty line at the top (or not) and tiny variation within the paragraph lines, you could get away with:

 .markdown-source-view :is(.cm-line:not(.HyperMD-list-line)) {
   padding-top: 1em;
}

These also create a 1em spacing in code blocks and callouts, so you might want to negate those as well.

1 Like

legend! thank you. that works really nice. and I’m beginning to understand how the whole thing functions which is a plus too.

1 Like

if I was to negate code blocks and callouts, would I negate it like this?:

 .markdown-source-view :is(.cm-line:not(.HyperMD-list-line):not(.HyperMD-codeblock):not(HyperMD-callout) {
   padding-top: 1em;
}

Ooops! I was missing a bracket.

So, I would call this “writers mode” for Obsidian - so that text is formatted in a way which is pleasing to writers - a bit of breathing space between paragraphs (but not between items in a list, or in a code or callout block).

And here are the instructions again.

  1. Go to Settings / Appearance / CSS Snippets.
  2. Click on the folder icon.
  3. In the folder that opens create a file with a .css ending and paste the following (it’s best to use a code editor like Brackets):
.markdown-preview-view br {
    content: '';
    display: block;
    margin-top: 10px;
}

.markdown-source-view :is(.cm-line:not(.HyperMD-list-line):not(.HyperMD-codeblock):not(.HyperMD-callout)) {
   padding-top: 1em;
}
2 Likes

@adrienneteicher Gotta say, this thread is awesome.

Going from getting familiar with markdown to “writers mode” CSS tweaks makes me warm inside!

2 Likes

Thanks ariehen! Sweet of you to say that. I feel the same way!!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.