Meta Post - Common CSS Hacks

@_ph: it is easier to use tabs or sliding panes because then you can see what you have open.

Thanks for the reply. I added the code to a snippet I already use for my custom CSS. Unfortunately, that did not work, neither in edit nor in preview mode. Can there be used another CSS selector or has anyone another hint? Thanks again!

I’m not sure what you’re trying to do, @AtrusRiven. Different themes have different selectors. Although, you might try re-typing what @Ka_upkah suggested, except with two DASHES at the beginning of the variable.

.theme-dark {
            --text-selection: yellow;
        }

I just want to change the background color of selected text. Thus, I guess the method you and @Ka_upkah mentioned basically is the right way. I just wondered if the reason why it doesn’t work with me (even with two dashes) is that a selector is wrong. I use the standard dark theme with a simple custom CSS.

Well, @AtrusRiven, I’m not able to replicate the problem you’re having. When you say, background of selected text, do you mean when you click drag your curser over some text, the highlighted portion?

Assuming so,

.theme-dark {
    --text-selection: rgba(122, 20, 20, 0.4);
}

This works for me. It could be your custom CSS causing a conflict. Try turning it off and writing a separate CSS with just the above, place it in your Snippets folder, then activate that under Snippets. If it works, then you know your other CSS stylesheet may have statements that are conflicting.

Also, if you already have a .theme-dark {} section in your CSS, just add the --text-selection: rgba(122, 20, 20, 0.4); part to it, instead of the whole thing.

Now, if none of that works, try this:

.CodeMirror-selected {
    background-color: goldenrod;
}

That’s the CSS variable --text-selection: is calling this. Just add it to your CSS and be sure it’s enabled.

1 Like

Clean Embeds: Create a nice-looking “Master Document” from its parts!

Sometimes you want to construct a larger “master document” from its parts, say chapters. And it should look like it’s been made of one piece.

None of the existing tips & tricks could fulfill this requirement, so I came up with my own. It is to be used with cssclass: clean-embeds in the frontmatter, so it won’t interfere with other pages that might use the “normal” type of embeds.

A sample document could look like this (simplified):

---
cssclass: clean-embeds
---

# Test Embeds

- Enable `clean-embeds` under *Settings → Appearance → CSS snippets*.
- Use `cssclass: clean-embeds` in YAML frontmatter to enable "clean" embedding.

![[Test Quote]]
![[Blindtext - Lorem Ipsum]]

## Document continued here

With “normal” embeds, it would look like this:

Using cssclass: clean-embeds, it looks like this:

Note it has the same margins and styling as the embedding document, and all embed horizontal rulers, titles, links and scrollbars removed.

Code: clean-embeds.css

/*
    clean-embeds.css snippet

    Removes title, link, padding, margins from embeds,
    so they really look like the same note.

    To be used with `cssclass: clean-embeds` in YAML frontmatter.

    2021-08-24 Matthias C. Hormann (Moonbase59)

    TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/

/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view.clean-embeds .markdown-embed-title,
.markdown-preview-view.clean-embeds .obsidian-metatable {
  display: none;
}

/*
  For links to embeds NOT to be shown, uncomment the following
  and comment out the other section below.
*/

/*
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
  display: none;
}
*/

/*
  For links to embeds to BE shown, uncomment the following
  until the "End link show/hide stuff" comment
  and comment out the section above.
*/

/* Link icon */
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
  top: 0;
  right: 0;
  left: unset;
  text-align: right;
  border: none;
  margin: 0;
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  cursor: pointer;
}

/* for Ars Magna theme and others that change ::before */
.markdown-preview-view.clean-embeds .markdown-embed-link::before,
.markdown-preview-view.clean-embeds .file-embed-link::before {
  display: none;
}

/* Link icon size & hide */
.markdown-preview-view.clean-embeds .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed-link svg {
  height: 24px;
  width: 24px;
  opacity: 0;
  display: unset;
}

/* show on hover */
.markdown-preview-view.clean-embeds .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed:hover .markdown-embed-link svg {
  opacity: 1;
}

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view.clean-embeds .markdown-embed:hover,
.markdown-preview-view.clean-embeds .file-embed:hover {
  background-color: var(--background-secondary) !important;
}

/* End link show/hide stuff */



/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view.clean-embeds .markdown-embed,
.markdown-preview-view.clean-embeds .file-embed {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.markdown-preview-view.clean-embeds .markdown-embed-content,
.markdown-preview-view.clean-embeds .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0 !important; /* !important for "Pisum" theme */
  margin: 0;
  border: 0;
}

/* remove <br> between internal embeds */
.clean-embeds .markdown-preview-section div > br {
  display: none;
}


/* remove vertical space added by markdown-preview-sizer */
.clean-embeds div.markdown-preview-sizer.markdown-preview-section {
  min-height: unset !important;
  padding-bottom: 0 !important;
}

/* special considerations for printing (PDF export) */
@media print {

  /* remove frontmatter box if "Show frontmatter" was enabled */
  /* Also remove metadata table from "Metatable" plugin */
  pre.frontmatter,
  .obsidian-metatable {
    display: none;
  }
}

Install and activate

  1. Copy the CSS code and save it into your vault’s .obsidian/snippets folder under the name clean-embeds.css.

  2. Restart Obsidian.

  3. Enable clean-embeds under Settings → Appearance → CSS snippets.

  4. Add this to your YAML frontmatter for notes that should use clean embeds:

    cssclass: clean-embeds
    

Voilà! Clean embedding for your “master document”!


Changelog:

  • 2021-05-25:
    • add removal of extra <br> between internal embeds
    • remove vertical space added by markdown-preview-sizer
    • remove frontmatter box on PDF export if “Show frontmatter” was enabled
  • 2021-05-28:
    • overhaul to support more themes, make embeds visible (with a link on hover), and much more testing done
    • repaired wrong l/r embed margins in some themes
    • special fix for “Ars Magna” theme
    • special fix for themes using dotted borders for embeds
    • now per default makes embeds visible by altering the background slightly when you hover over it, so you can exactly see what’s been embedded and how long it is
    • now per default shows an overlaid and clickable link icon at the top right corner of an embed when you hover over it
    • these last two options can be easily switched off (so no background change will happen, and no link shown) by commenting and uncommenting a few lines in the CSS (well documented inside)
  • 2021-06-04:
    • Modification for “Pisum” theme (padding !important)
  • 2021-08-24:
    • Bugfix: Lines ending in two spaces (forced linebreak) didn’t produce a newline. This is now fixed (thanks @pseudometa for the help!).
    • Enhancement: This snippet will now also hide the metadata table from the Metatable plugin (if installed), both on embedded content and when exporting to PDF. (Thanks @logicaster for the idea on Discord!)

Showdown

There is now also a 10-minute showdown video available that shows both clean-embeds.css and clean-embeds-all at work, tested with several themes!

It’s an ad-hoc video, made totally unprepared, in a rather slow pace, and taken on a noisy laptop, so please excuse the quality. I thought a quick screen recording might answer many questions and show you what to expect.

37 Likes

Yes!! Thank you!

Perfect! Exactly what I need to bring long policy document together after the ‘bits and pieces’ are finalised!

@Moonbase59 : I have wanted something like this for a long time. Unfortunately, I have not been able to get it to work, even in the default theme with only your snippet enabled.

@Klaas: Sorry to hear, have tested this with my vault (default light theme, many plugins, several CSS snippets installed) and the help vault, see screenshot.


I simply used the “Obsidian” & “Credits” notes from the help vault for embedding here.

CSS can be rather fragile, especially when a software changes, different themes and/or CSS snippets are used, or different options selected that influence how the parser builds HTML.

I’d suggest you try to test with the help vault first (its just 2 files: the snippet & a minimal note, plus one setting). If that works, try your vault using the default theme, no community plugins and no CSS snippets first, and work up from there.

Maybe it’s just a theme, plugin or snippet you use that makes the selectors in my snippet fail. The snippet isn’t long, after all, so I’m sure it can be made to work with your vault.

EDIT:

N.B.: I forgot to ask the most simple question: Did you add cssclass: clean-embeds to the note(s) you try this with?

“Clean embeds” was meant not as a “change-them-all” snippet but for single “master documents” only where you want a different embed style, so it requires the cssclass. It will not change anything on “normal” notes.

@Moonbase59: thanks for your feedback.

1st off: yes, I did add cssclass: clean-embed in the YAML, and I did enable the snippet after restarting Obs.

I tried the Help file, but am not sure if I did it right.
Since it works at your end I must be doing something wrong.

I created a new folder snippets in Librar/Application support/obsidian/Obsidian Help.
Then I added your snippet, restarted OBs, and enabled the snippet in the Help vault’s settings.

I created an embed myself. But there was no effect.

Seems you copied the help vault somewhere else, right? Because on mine, after every close/reopen, it is reset to the original version (all snippets, settings, extra notes gone).

I wonder what might be different between yours and mine. Care to try with a fresh copy of the help, maybe? Since yours seems mutable, who knows.

FWIW, I use Obsidian 0.12.3, installer 0.12.3, on Linux.

Maybe you could also investigate using the dev console, to verify if my snippet “hits in”, like on one of the .markdown-preview-view .markdown-embed elements as shown in this screenshot:

Thanks, that did the trick although I don’t know why. I just copied the (identically looking) code and it worked. Thanks!

Nope, my Help vault does not reset to default clean state. I never copied it from anywhere, I did not even know where that vault was until today.

Re your screenshot: I don’t get anything like it. Here is what I get:

Notice the blue line of writing towards the bottom. Don’t where that came from, and I don’t know why clean-embed is linked to readable line width in there.

Matthias, it seems to me that the situation at my end is too complex to solve, in any case by commenting like this. So, it is probably best not to pursue it. The other commenters do not have this problem, so it is definitely a bug at my end.

Forgive the interjection, but perhaps an ‘s’ is all that is missing (from the YAML)? Embeds?

Angel

1 Like

@Angel: how dare you interject like that ??!! :rofl:

I am just joking !! This is a public forum so anyone can jump into a thread at any time, that’s the beauty of it.

What’s more, I am very grateful to you because it was indeed that little “s” that was the “bug”. I am amazed and impressed you picked it up !!

So, many thanks for “interjecting”, it was a most fruitful contribution, and I want to thank you for it because I was disappointed to have to drop this.

I also want to thank @Moonbase59 for sharing this elegant snippet with us all, AND for his patience with a CSS oaf like me. I am ashamed to have made such a basic mistake that is only due to sloppiness - my sincere apologies!

1 Like

Darn, @Angel, you nailed it! And both @Klaas and I didn’t see it! Thanks a bundle for detecting the “s”.

2 Likes

Too sad Obsidian isn’t open source (I don’t criticize—it’s the creators’ decision, after all), these things take a lot of “detective work”!

I’m working on that for several hours now, and for the life of me can’t get the PDF output right. (Enclosed files have too much left & right margin/padding, and too much vertical space in between them.) See also How to emulate @media print (for debugging PDF styling)?.

Glad to hear it is working for you. A pleasure to have been able to help a little. I just got lucky.

Angel

I really really really like this and works like a charm using embeds within embeds too! Thank you very much!!

1 Like