Meta Post - Common CSS Hacks

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

2 Likes

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

2 Likes

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)?.

1 Like

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

Here’s a little (little?! Ha, almost 22MB!) GIF showcase where I test the clean-embeds.css snippet with several themes:

  • Built-in light theme
  • Ars Magna dark
  • Atom dark
  • Discordian dark
  • Notation dark
  • Obsidian Nord dark

This shows how good (or bad) it currently works using these themes. Enjoy.

GIF demo (~22MB)

1 Like

Clean Embeds without cssclass

@Klaas brought up the idea of having a Clean Embeds without requiring a cssclass because he wanted to use it for all his notes.

Well, folks, here we go!

Read about the original snippet, decide if you want it for all notes, and then use this code:

Code: clean-embeds-all.css

/*
    clean-embeds-all.css snippet

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

    This will not require a `cssclass` to be set but work for _all_ notes.
    Derived from the `clean-embeds.css` snippet.

    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 .markdown-embed-title,
.markdown-preview-view .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 .markdown-embed-link,
.markdown-preview-view .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 .markdown-embed-link,
.markdown-preview-view .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 .markdown-embed-link::before,
.markdown-preview-view .file-embed-link::before {
  display: none;
}

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

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

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view .markdown-embed:hover,
.markdown-preview-view .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 .markdown-embed,
.markdown-preview-view .file-embed {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .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 */
.markdown-preview-section div > br {
  display: none;
}


/* remove vertical space added by markdown-preview-sizer */
 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-all.css.

  2. Restart Obsidian.

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

Voilà! Clean embedding for all your notes!


Changelog:

  • 2021-05-27:
    • initial version, after a talk with @Klaas
  • 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.

17 Likes

Bigger folding arrows

  • bigger folding arrows with larger clickable area
  • visually reacts on hover

Code: obsidian-css-snippets/Folding arrows.md at master · Dmitriy-Shulha/obsidian-css-snippets · GitHub

3 Likes

You can paste to a single css file and put into .obsidian/snippets/ folder

After that, you can now toggle the css effect from the settings

1 Like

@yalcin wished for the YAML frontmatter to be shown on link previews if

  • Settings → Core plugins → Page preview is enabled, and
  • Settings → Editor → Show frontmatter is enabled

He also wanted this feature to be switchable.

Solution in Display front-matter on hover preview.

Result:

2 Likes

Greetings!
I used this code and was wondering if I can remove the header displayed inside the embed?


Those"subtasks" are headers which I had embeded and they are displayed, is there a way to turn even that off?

1 Like

Turning off some arbitrary headers within the content of an embedded note might be possible but is a very individual change and probably outside the scope of general CSS snippets.

Personally, I wouldn’t know how and wouldn’t dare, because it might break other things.

1 Like

Restore “fixed” 100% width tables to self-adjusting column width

Some of us are using @Lithou’s Image Flags snippet or other custom styling and have wondered why tables are suddenly always 100% wide and don’t adjust column width anymore, depending on content.

Here are two CSS snippets that deal with that oddity and “make tables great again”:

tables-auto-left.css

This will make tables only use as much space as needed (so not always 100%) but limit the width to 100%. Column widths will auto-adjust again, dependent on their content, like in the Help Vault.

/*
    tables-auto-left.css snippet

    Adjust tables for auto-width columns & not using full width.

    2021-06-07 Matthias C. Hormann (Moonbase59)
*/

table {
  table-layout: auto !important;
  width: unset !important;
  max-width: 100%;
}

tables-auto-centered.css

In Obsidian, I quite like tables sitting at the left margin (the eye doesn’t have to serach and jump around, making work less stressful), but in professional documents tables are usually centered.

So the following CSS snippet does all of the above plus it centers tables.

/*
    tables-auto-centered.css snippet

    Adjust tables for auto-width columns & not using full width.
    Also centers table.

    2021-06-07 Matthias C. Hormann (Moonbase59)
*/

table {
  table-layout: auto !important;
  width: unset !important;
  max-width: 100%;

  /* for centered tables, add the following */
  margin-left: auto;
  margin-right: auto;
}

Compatibility

I’ve tested these snippets …

  • with @Lithou’s Image Flags snippet enabled and disabled
  • with Image Flags snippet’s cssclass: img-grid and without—it doesn’t even break the “grid” display.
  • with and without the Sortable plugin enabled
  • with Dataview tables
  • with some test tables, using the following themes:
    • Obsidian default
    • Ars Magna
    • Atom
    • Discordian
    • ITS Theme
    • Notation
    • Obsidian Nord
    • Obsidian-Green (@Klaas’ theme, can’t remember the original name)
    • Pisum
  • for correct PDF export

Everything worked as expected.

Example screenshots

Normal tables

With the Image Flags snippet enabled, using Obsidian’s default light theme. Sortable disabled.


Before


With tables-auto-left.css enabled


With tables-auto-centered.css enabled

Dataview tables

With the Image Flags snippet enabled, using Obsidian’s default light theme. Sortable plugin enabled.


Before


With tables-auto-left.css enabled


With tables-auto-centered.css enabled

7 Likes

@Moonbase59 : thanks for trying out 2 of my themes: Obsidian-Green (you were right about the name) and ITS Theme.

1 Like

This seems like a very simple-minded enquiry - I love this tweak to tables, but unfortunately it also affects the table that the ‘Calendar’ plugin presents. I have tried invoking your css in a cssclass, but I just cant get it to work on only tables in documents (and NOT on the Calendar). I am sure I have done this before, and I am sure it is simple… but…
Might you offer any assistance here, please

Without trying, I’d say you’d only have to modify

table {
…

to

.markdown-preview-view.tables-auto-left {
…

and then use

---
cssclass: tables-auto-left
---

in a document’s YAML header. (Assuming you have called it tables-auto-left.)

Nah, nothing unfortunately. I’m stumped.