Meta Post - Common CSS Hacks

[Cajun]

@Mara-Li I am using the icons for free, as well.

[Scribe]

The confusion was due to a mistyped letter, @Mara-Li. When @janpeeters posted about REMIXICON, two URL’s were provided: Remixicon.com and Remixicons.com The latter site sells iOS 14 icons.

The ones you have from Iconify are nice too.

[ZeeKhar]

Delay popover preview

v0.12.2

Delay the popover preview on mouse over.

/* Delay popover */
@keyframes fadeIn {    
    0%
    { 
        visibility: hidden; 
    }
    50%
    { 
        visibility: hidden;
        opacity: 0;
    }
    100% 
    {
        visibility: visible;
        opacity: 1; 
    }
}

.popover{    
    animation: fadeIn 2.3s;
}

[janpeeters]

Thanks for your keep eye @Scribe and sorry @Mara-Li. I’ve changed the original post.

[StefanS]

Same problem here.
I can’t get it work with any height bigger than 330px, because then just the size of the box increases, but the size of the text-area (with the scrollbar) doesn’t follow.

Any hint how to change that would be welcome!

[Moonbase59]

Linux : Keyboard & mouse symbols

This may also work with MacOS & Windows.

I write a lot of documentation (using Pandoc and LaTeX usually), and regularly need Linux, Mac & Windows key symbols as well as mouse symbols.

My usual choice is the free Linux Biolinum Keyboard O font for this purpose, in Markdown and HTML activated by <kbd>…</kbd> tags, like in many forums and elsewhere.

So I made a little CSS snippet to use this font in preview mode (haven’t found out how to do this for edit mode), and here it is. Remember the font must be installed on your system(s) first! No problem for me, because I use it often anyway, with LibreOffice, LaTeX and others.

Here’s the CSS snippet:

/*
    kbd-font.css snippet

    Activates use of (locally installed) "Linux Biolinum Keyboard O" font,
    for using keyboard symbols in <kbd>…</kbd> HTML tags.

    2021-05-16 Matthias C. Hormann (Moonbase59)

    Testing whether to use 'revert' or 'initial' or 'unset'.
    'revert' seems most compatible.
*/

kbd {
    font-family: 'Linux Biolinum Keyboard O';
    border-radius: revert;
    font-size: revert;
    background-color: revert;
    padding: revert;
}

Name it kbd-font.css, activate it under Settings → Appearance → CSS snippets and you’re good to go.

Result onscreen:

Result Obsidian-exported PDF:

Test text

Here’s the test text I used in the document shown:

<kbd>Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.</kbd>

<kbd>ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜẞ</kbd>
<kbd>abcdefghijklmnopqrstuvwxyzäöüß</kbd>
<kbd>1234567890.:,;(*!?')</kbd>
<kbd>"'»«›‹„“”‚‘’</kbd>

<kbd>⍽⎀ ⌘⌥⌦⌧⌫  ↥↧ ←↑→↓ </kbd>
<kbd>      </kbd>
<kbd>         </kbd>

Press <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>, oder drücken Sie <kbd>Strg</kbd>+<kbd>Alt</kbd>+<kbd>Entf</kbd>!

Looks rather odd in the forum, but nice if you copy-paste it into a test document.

[fourteen]

Can you fix this please? It isn’t working anymore on v0.12.3. The buttons disappear but the thick bar is still there (on both sides).

Thanks.

[fourteen]

Is there a way to have this for Numbered lists as well?

[AtrusRiven]

When using the dark theme, marking the text has a low contrast. Can I adjust the colour of the text selection (background) in CSS? (see CSS: Changing the colour of the text selection)

Thanks a lot!

[Ka_upkah]

Yes, you can add it as a snippet:

.theme-dark {

–text-selection: yellow;

}

Change the yellow to the color of your choice. You can put a snippet inside your VAULTFOLDER/.obsidian/snippets directory. For example: VAULTFOLDER/.obsidian/snippets/text-selection.css

Don’t forget to enable the snippet in the settings.

[_ph]

been out of the obsidian loop for a while so this might have been addressed already.

/* scrollable workspace */
.workspace-split.mod-root {width: 100%;overflow: scroll;}
.workspace-leaf {min-width:360px;}

it makes the main workspace a scrollable div so that it’s easier to navigate multiple documents by scrolling horizontally, each pane has a min-width so I can still read the content

[Klaas]

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

[AtrusRiven]

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!

[Scribe]

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;
        }

[AtrusRiven]

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.

[Scribe]

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.

[Moonbase59]

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.

[bobkitz]

Yes!! Thank you!

[Bricoleur]

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

[Klaas]

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