Meta Post - Common CSS Hacks

[Moonbase59]

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

[Moonbase59]

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

[anon12638239]

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

Angel

[u1mp3]

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

[Moonbase59]

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)

[Moonbase59]

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.

[mlbrgl]

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

[Duo]

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

[Moonbase59]

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

[DummyME]

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?

[Moonbase59]

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.

[Moonbase59]

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

[Klaas]

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

[Jeffurry]

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

[Moonbase59]

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

[Jeffurry]

Nah, nothing unfortunately. I’m stumped.

[Moonbase59]

Me. too. Maybe some theme, other CSS snippet or plugin interferes. You can try switching them all off and then back on, one-by-one, to find the cause.

[Klaas]

@Moonbase59

Maybe some theme, other CSS snippet or plugin interferes. You can try switching them all off and then back on, one-by-one, to find the cause.

Sounds familiar !

[Lithou]

At work now, but I can answer that when I get home

[Lithou]

OK home now.

So a few things of note with this. I wasn’t aware of the odd behaviour the snippet was having on other tables. I honestly don’t use tables a whole lot so that makes sense.

First for @Moonbase59 and your snippet. The problem you are running into with your snippet is that you are using the “!important” tag to make your rules higher in specificity than is necessary. Instead, just remove/change the line in the initial snippet. (I did this and re uploaded a copy so feel free to just download that if you want.

@Jeffurry for adjusting anything with a css class, the css class is loaded into the body element. So you would want to start any selector off with that then go down to the desired level of the selector. So if you wanted to change tables inside preview panes for that CSS class you’d call the body with the css class then markdown preview then table:

body.tables-auto-left .markdown-preview-view table{
rules: go here
}

On a bit more of a meta conversation, when you encounter something like this here are some things to keep in mind:

1. If an author’s theme or snippet is having odd behaviour let them know. They probably aren’t aware and most are happy to fix it.

2. Also having them fix it will not only be a better solution for you, but also fix it for other people who had no idea where a problem originated.

3. If that isn’t an option, go change the original code if possible before overriding it with the !important flag. The other troubles that come afterward usually stem from being unable to override that high level of specificity.

4. As a rule of thumb you should strive to only use important tags to override styles added directly into the html code. And even in those questions ask yourself if there is another way since the developers usually have good reasons for it.

Hope that helps.

Here’s the snippet again if you need:

Lithou/Sandbox/blob/main/.obsidian/snippets/pub-Image Flags.css