Meta Post - Common CSS Hacks

[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

[DanLau]

Just come across this old conversation when I’m looking for ways to modified only some of the internal links within a page.

When I create a css snippet a.internal-link { color: white; }, I can make all the internal links in the document changed to white. But what if I only want to make 1 specific internal link inside a ‘<span>An Internal Link</span>’ to change color, while leaving other internal links untouched?

[Klaas]

@DanLau : <span style="color:blue;background-color:red">[[note name]]</span>.

[whoibrar]

i absolutely love this!

[DanLau]

With the help of other members, I’ve made a “back to top” function for long content page. See if anyone find it useful.

Modify as you see fit.

BackToTop.css (877 Bytes)

[Klaas]

@DanLau : a good idea. However, I cannot find the button. I enabled the snippet in default Obs without any other snippets nor any themes, yet there is no button.

[DanLau]

did you try following the steps mentioned in the css? Maybe I copy it here for easier reference:

1. first put a " ^Top" as an anchor at the begining of the page (exclude the double quotation marks)
2. then put “[[#^Top|TOP]]” at the end of the page (exclude the double quotation marks)