Meta Post - Common CSS Hacks

Expeditioner · April 20, 2021, 1:38pm

Have you downloaded the entire encyclopaedia into Obsidian ?

rupadarshiray · April 22, 2021, 2:52am

To have emojis based on folder name:

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="03"] .nav-folder-title-content::before {
        content: '🌜';
        background-repeat: no-repeat;
        display: inline-block;
        width: 24px;
        height: 15px;
}

Adding ^= takes in all folders starting with given text, in my example stating with 03. Change ^= to = when assigning full name of folder.

Cajun · April 25, 2021, 10:00pm

I really like this, thanks for the information. I think I will give it a try.

janpeeters · April 26, 2021, 8:22am

Terrific, seeing your CSS code brought up the idea that this might also be possible with https://remixicon.com.
Might give a more consistent look with the style of Obsidian.
But I have to dive into that to find out how.

Edit: I tried a few things, but this is above my CSS knowledge skills

amarionette · April 29, 2021, 7:13am

Any ideas on how I could make this match on top level folders names only, and then apply the same icon to all it’s subfolders?

janpeeters · April 30, 2021, 11:38am

In addition to:

I succeeded in getting Remixicon visible before folder names.

But… it’s quite a hacky solution, because I don’t have deep knowledge of CSS.
If you have a better solution please post.
You will have to adapt it to your theme and font sizes.
The below code is to make it work for California Coast theme.

You can get the SVG URL by going to remixicon.com

Select an icon you like.
Click the triangle at ‘Copy SVG’
Choose ‘DataURL’.
Copy that URL and
Replace the background URL in the css below.

Also don’t forget to change the name of the folder in the first line of CSS for your own folders’ name.

It’s more likely than not that for other themes you have to change the background-size, translate value, height, width and margin values to make everything line up nicely.

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="Timestamped"] .nav-folder-title-content::before {
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm-2 2H9v2H7V5H4v4h16V5h-3v2h-2V5zm5 6H4v8h16v-8z'/%3E%3C/svg%3E");
  background-size: 14px 14px; /* adopt this to your file tree font height */
  transform: translate(0px, 4px); /* to position the icon */
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: -4px 2px 0 0;
}

I have been thinking if it would be possible to use the icons that the plugin Obisidian Icons (in installed) pulls in but I couldn’t find out how. If anyone has an idea for this?

rupadarshiray · April 30, 2021, 3:44pm

That is a bit tricky, choosing only subfolders, I could not succeed in that tho.

This is amazing by the way! Looks more internal!

echej · April 30, 2021, 8:05pm

This is great! I cannot use emoji in folder names because Dropbox doesn’t support it, but this is really nice hack!

Cajun · May 3, 2021, 12:15pm

@janpeeters this looks really good thanks for sharing. It really makes a big difference in quickly identifying folders. Nice job!

Mara-Li · May 6, 2021, 6:32pm

Hello !
I have a question about remixicon. It’s obligatory to shop it to get icon SVG ? Or I miss something ?

janpeeters · May 6, 2021, 10:02pm

Hey, I’m using them for free. The website states that they’re free for personal and commercial use. Where do you see something related to shopping?

Mara-Li · May 6, 2021, 10:09pm

Okay for a strange thing, on my computer the website was about to ship icon for IOS.
On IOS I have the good site… Strange.

Also, I edit your snippet using iconify with the css and simple content. I change the color to white and use only the link.
It works pretty well! I just need to check if I can use the currentColor or any var (to avoid edit the snippet each time I change my theme).

I use the rest from your snippet.

Cajun · May 8, 2021, 12:20am

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

Scribe · May 8, 2021, 1:41am

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 · May 9, 2021, 4:21pm

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 · May 10, 2021, 10:47am

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

StefanS · May 16, 2021, 8:03am

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 · May 16, 2021, 7:42pm

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 · May 16, 2021, 9:23pm

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 · May 16, 2021, 9:24pm

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