Clutter free edit mode

[serendipity]

Not sure why any of these are not working for me. Pasted that last one to the bottom of the obsidian.css file.

[linxule]

Maybe try adding ‘!important’ for each line?

[linxule]

Maybe try adding ‘!important’ for each item?

[serendipity]

Like so?

[Silver]

I think you’re editing the obsidian.css.md file, because Obsidian doesn’t let you open CSS files directly.

Try finding this file in your file explorer, and renaming it to obsidian.css without the trailing .md.

[serendipity]

So this is embarrassing…like you said, I was editing an obsidian.css.md file that was in one of the template workflow folders I’d gotten from the forum some months back.

I did try to do it in the css file itself, but I failed. I’ll try again and worst case I’ll wait for someone to work it into their plug-in. Thanks everyone.

[Silver]

Please make sure it’s in the vault root, turn on the Apply obsidian.css option, and remove the .md extension. That should be all that’s needed to make it work.

I hope that helps!

[serendipity]

Thank you! I’ve removed the .md extension and placed it in this folder.

[Silver]

The vault root is one level above, in the same level as .obsidian, not in it.

[serendipity]

Thank you for being patient. I searched my drive and it seems I had 3 different Obsidian.css files that came along with the workflow templates from way back. I deleted everything and retained one copy.

That did it =)

[welp]

Hiding html tags

I have been experimenting with highlighting text with different colors, using <span> html tags.
For example: <span style='background-color:Pink;color:black'>text here</span>

When using the following the following css to hide the html tags in editor however, the css snipet only hides <span> and </span> but does not hide the style='background-color:Pink;color:black' portion.

Is there a workaround for this?

Thanks!

Additional Info

See Gif

hideHtmlTags.css

/* hide all html tags */ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag { display: none !important; }

[angelFrog]

I’ve been wondering about how to remove the rest of the text within HTML tags as well. Closest I can come up with is:

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-attribute{ display: none; }
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string{ display: none; }

This still leaves the equals sign visible (the one after the "style" attribute). I'm trying to tell myself that this is be a good thing, as it shows that something is there.

[terheyden]

This! This is a game-changer, thank you! Obsidian looks so clean, now.

I wanted to keep hashtag symbols, because my hashtags look like pills and it gets all cut off without the hash symbol. If anyone else wants this, just change this:

/* except list markers */ span.cm-formatting-list,

To this:

/* except list markers */ span.cm-formatting-list,
/* and hashtags */ span.cm-hashtag

[Klaas]

@terheyden: there is a way to hide the # character in Preview.

[arinazari]

Any way to make checkboxes still work when the tab indent is increased in Appearance settings? When I move the slider up, suddenly markdown checkboxes disappear.

[Conchobar]

Could you elaborate? I am looking for a solution to hide the # character in Preview Mode.

Hide # in tag using css or javascript

@Moonbase59 can you help me out with this? REASON for wanting this: the # in front of a tag distracts me and hinders me in speedreading. Especially if there are multiple tags on a line. Things I have tried I have tried hiding the # character in a tag by css, but that’s not working. I hoped using .tag::first-letter: {display:none;} would work. It doesn’t, because CSS doesn’t seem to see # as a letter, somehow. I also read on several CSS websites that this cannot be done unless you wrap that…

This thread was looking to do the same thing, but no clear solution was ever proposed.

[Klaas]

@Conchobar the # is never displayed in Preview mode, which is now called Reading mode.

So, I assume you are referring to Live Preview mode. Are you sure the # is displayed in LP? Are you in LP mode?

If you are, and the # is displayed, try this:

.cm-formatting-header {
    display: none;
}

[Conchobar]

Ah, I see the disconnect, my mistake. No, I use primarily “Source mode” and “Reading mode” and am trying to eliminate the ‘#’ from displaying in #tags in Reading mode.

I have searched far and wide in the forums and tried many different things but can find no solutions. I’d even settle for removing the ‘#’ character altogether from Reading mode but could not figure out how to accomplish that myself.

[kburzh]

I tried this code, but it doesn’t seem to work anymore. Is there any actual way to remove brackets from links and other elements in edit mode?

[Klaas]

You could also ask in the #appearance channel on Discord, where there are a number of very knowledgeable gurus.