Minimal Theme

Hm, weird. I’m using the latest Obsidian as well as Minimal version. After disabling all snippets and plugins, I’ve narrowed it down to the Minimal Theme Settings and the Text Preview settings. I am using iA Quattro and the bold style is only applied in editor mode.

Okay, I’m trying to describe it with more details. I have Obsidian 0.11.4 installed, with only Daily notes and Minimal plugin installed, no snippets.
The behavior can be reproduced like this:

  1. Create a new note called Temp, and enter the following text: #temp_tag
  2. While still in Edit mode, search for this: tag:#temp_tag
  3. Click on the note title (Temp) in the result list
  4. The tag gets this weird triple outline in the Edit window:
    image

Note that if I’m setting the window to Preview mode instead, the highlighting works as intended (I suppose):

I’m mostly looking at my notes in Edit mode, and those multiple outlines are not that great to look at. Could they be changed to highlights somehow - similar to the one in Preview mode?

short addition: the same problem occurs when using a different font…

This is strange. I can’t reproduce this on my end. This is what I see (also has a slight padding bug but better).

Deleting all the workspace and config files solved the issue somehow. I’m not sure what caused it still, but it works properly now.

To make my problem with the h3 heading a little clearer:
in editor it looks like this:

Bildschirmfoto 2021-03-01 um 10.23.06

in preview like this:
Bildschirmfoto 2021-03-01 um 10.23.11

When adding

font-weight:var(--bold-weight);

to

.markdown-preview-view h3,
.HyperMD-header-3,
.cm-header-3 {
  letter-spacing:-0em;
  font-weight:500;
  font-size:var(--h3);
  line-height:1.4;
}

it seems to look identical.

Hi @tim_hilde , do you replace font-weight:500; with font-weight:var(--bold-weight);?
Have you tried changing the 500 (regular) to a 700 (bold) too?

I’ve only added the line at the end of the block. I am complete confused at this point about what should be achieved and why edit vs. preview don’t look the same in regard to heading styling.

I would try font-weight:700; or font-weight:700 !important;
I’m sorry that I don’t have a clue what makes your situation behave differently than others.

The 500 weight (semibold) is not present in every typeface, but since it does appear to be working in edit mode the only explanation I can think of regarding the difference is that you have another plugin or snippet that is overriding the CSS.

As @janpeeters mentioned you can create a snippet with font-weight:bold !important; that contains your typography rules.

Could it be something in the base obsidian.css (i.e. the app default style) that’s somehow overriding? It did that when I was trying to adjust the color of the header title until I added a bit to the theme CSS exactly copying the scope used in the base stylesheet. Poking around with the DOM inspector should show what code is being applied to the preview h3 element.

There are two problems exporting PDF with the Minimal theme.

  1. Text selection on the exported PDF is off the line. It always looks like you are highlighting the space between lines. There are also some overlapping ghost layers which cover on top of the text layer, making it a bit difficult to just select the text.

  1. The exported text seems to be not searchable. I took a deeper look. The searchable layer of text actually is flipped entirely. To search ‘network’ one would have to type ’krowten’, whereas visually the text is still rendered correctly.


Thanks for sharing those details. I am still looking for contributors to help on the PDF side:

Version 2.5.5 of Minimal is now available which adds support for the Checklist plugin by delashum and more compact settings.

5 Likes

What would be the easiest to have tags show without pill form and as italic? I’m not a css guru, can someone provide an example? Thanks! -JM

Again, @kepano thank you for the awesome theme!

EDIT: Worked with the CSS Community in the obsidian discord server. Thanks to “@SlRvb” and “foreveryone” for their contribution.

.frontmatter-container .tag, p .tag, span.cm-hashtag.cm-hashtag-end, span.cm-hashtag.cm-hashtag-begin {
    color: gray;
    background-color: transparent;
    border: none;
    padding: 0;
    font: var(--default-font);
    text-decoration: none;
    font-style: italic;
    font-size: unset;
    margin: 0;
    vertical-align: unset;
}

Code Mirror: with Operator Mono font
image

Preview: Recursive Font
image

Love it!
Thanks

Hi @kepano,

I love your minimal theme very much especially the dark one.

Unfortunately, it so difficult for me to locate the icons (both on the sidebar and on the top) when in dark mode.

I wonder if there is a way for me to tweak the CSS so that it shows all the time instead I need to hover them to make them show.

FYI: I am not a dev so I do not know how to tweak the CSS file by myself.

Many thanks in advance!

1 Like

Another option would be to add a custom hotkey to toggle the sidebar. You can do this in settings.

Thanks for your advice, @JonathanBuchh

But I think not all icons have their hotkeys. For example, I don’t know how to open File Explorer, Tag Pane, or Recent Files (plugin) with a hotkey.

@Liong1976 are you using the complementary Hider plugin? You get a few options on what to (un)hide: