# Meta Post - Common CSS Hacks

**URL:** <https://forum.obsidian.md/t/meta-post-common-css-hacks/1978>\
**Category:** Themes & CSS snippets\
**Tags:** custom-css\
**Created:** [June 16, 2020, 2:17pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978 "2020-06-16T14:17:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lizardmenfromspace](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lizardmenfromspace/32/19233_2.png) [@lizardmenfromspace](https://forum.obsidian.md/u/lizardmenfromspace)\
**Post date:** [June 16, 2020, 2:17pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/1 "2020-06-16T14:17:58Z")

</div>

**This thread is now closed.** It has helped people for 4 years, but **Obsidian has changed a lot** over that time, rendering many of the 600+ posts obsolete.

Today you can [change Obsidian’s color scheme](https://help.obsidian.md/User+interface/Appearance#Color+scheme), [use a custom theme](https://help.obsidian.md/Extending+Obsidian/Themes) created by our community, or customize further by using [CSS snippets](https://help.obsidian.md/Extending+Obsidian/CSS+snippets).

Some community resources:

- [Obsidian CSS Quick Guide](https://forum.obsidian.md/t/obsidian-css-quick-guide/58178) on the forum (mostly about using the inspector)
- [Large collection of CSS snippets](https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets) on GitHub
- The [#appearance channel](https://discord.com/channels/686053708261228577/702656734631821413) on Discord.

— @CawlinTeffid (moderator) 2024-07-19

* * *

* * *

* * *

Hi, I want to start collecting common CSS hacks for people to reference. If the hack you’ve come across isn’t particularly large then go ahead and use the format

# Title

Version it last worked with

```
Code

```

* * *

Otherwise just post a link and I will maintain a list

- [Andy Matuschak mode - V2.7 (updated for 0.7+ new panes)](https://forum.obsidian.md/t/andy-matuschak-mode-v2-7-updated-for-0-7-new-panes/170/31)
- [Bullet Point Relationship Lines](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2)
- [Collapsible Sidebars](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/3)
- [Block Cursor](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/9)
- [Auto-fade Note Controls](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10)
- [Tag Pills](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13)
- [Vim mode with line focus](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/17)
- [Naked Embeds](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/19?8u=lizardmenfromspace)
- [Text Hyphenation and Justification](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25)
- [Enlarge Image on Hover](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29)
- [Country Flags in Pill Tags](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/33)
- [Nicer Checkboxes](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34)
- [Minimalistic Red / Green checkboxes](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/38)
- [Stylish Blockquotes](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39)
- [Remove Yaml Headers from Embeds](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/41)
- ~~[Clutter free edit mode (based on [Markdown Concealed Vim Syntax])](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/58)~~
- [Tag Pills in Editor](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/64)
- [Bigger Popover Previews](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82)
- [columns view for file explorer pane](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/91)
- [Image Zoom: Click and Hold to Expand Images](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/100)
- [Clutter free edit mode](https://forum.obsidian.md/t/clutter-free-edit-mode/6791) (version 2)

* * *

### Learning Obsidian CSS

- [Getting comfortable with Obsidian CSS](https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133/28)
- [Collection of Selectors](https://forum.obsidian.md/t/common-selectors/1984/2)

---

<div class="post-metadata">

**Author:** ![lizardmenfromspace](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lizardmenfromspace/32/19233_2.png) [@lizardmenfromspace](https://forum.obsidian.md/u/lizardmenfromspace)\
**Post date:** [June 16, 2020, 2:25pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 "2020-06-16T14:25:48Z")

</div>

# Bullet Point Relationship Lines

v0.7.3 Compatible

```
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
} 

```

This has been floating on the discord, not sure who created it but thank you!

 ![Lines](https://forum.obsidian.md/uploads/default/original/2X/6/6a7723d37dfd8f7fba45daa9cea7ad1722b92b1f.png)

---

<div class="post-metadata">

**Author:** ![anon34498147](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/c57346/32.png) [@anon34498147](https://forum.obsidian.md/u/anon34498147)\
**Post date:** [June 16, 2020, 2:50pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/3 "2020-06-16T14:50:23Z")

</div>

# Collapsible Sidebars

v.0.7.3 Compatible

```auto
.workspace-ribbon.is-collapsed:not(:hover) .workspace-ribbon-collapse-btn, 
.workspace-ribbon.is-collapsed:not(:hover) .side-dock-actions, 
.workspace-ribbon.is-collapsed:not(:hover) .side-dock-settings {display:none;}
.workspace-ribbon.is-collapsed:not(:hover) {width: 0;}
.workspace-split.mod-left-split[style="width: 0px;"] {margin-left: 0;}
.workspace-split.mod-right-split[style="width: 0px;"] {margin-right: 0;}
.workspace-ribbon {transition: none}

```

Thanks to @mrjackphil and @MooddooM.

---

<div class="post-metadata">

**Author:** ![Mavalator](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/7bcc69/32.png) [@Mavalator](https://forum.obsidian.md/u/Mavalator)\
**Post date:** [June 16, 2020, 10:33pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/5 "2020-06-16T22:33:37Z")

</div>

The Bulletpoint relationship lines CSS was created by @death.au - that magician!

---

<div class="post-metadata">

**Author:** ![death.au](https://forum.obsidian.md/user_avatar/forum.obsidian.md/death.au/32/796_2.png) [@death.au](https://forum.obsidian.md/u/death.au)\
**Post date:** [June 16, 2020, 11:00pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/6 "2020-06-16T23:00:59Z")

</div>

Damn. Outed. I was kinda enjoying being anonymous on that one. Enjoying the mystery of “where did it come from?” 😆

---

<div class="post-metadata">

**Author:** ![lizardmenfromspace](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lizardmenfromspace/32/19233_2.png) [@lizardmenfromspace](https://forum.obsidian.md/u/lizardmenfromspace)\
**Post date:** [June 16, 2020, 11:04pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/7 "2020-06-16T23:04:32Z")

</div>

@death.au well you have mod powers 😈 👻 🕶

---

<div class="post-metadata">

**Author:** ![rsdimitrov](https://forum.obsidian.md/user_avatar/forum.obsidian.md/rsdimitrov/32/746_2.png) [@rsdimitrov](https://forum.obsidian.md/u/rsdimitrov)\
**Post date:** [June 17, 2020, 4:19am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/8 "2020-06-17T04:19:27Z")

</div>

> [@death.au](#):
>
> I was kinda enjoying being anonymous on that one.

Don’t worry, I’ll cover for you!

The border color is from me as I posted a half-baked solution for the same issue on the Discord. Sadly it couldn’t show more than level one line and worked in edit mode only.

This one is much more elaborate and it actually works all the way, but only in Preview! Seems like we can’t have it everywhere. Still, thanks for this @death.au

---

<div class="post-metadata">

**Author:** ![rsdimitrov](https://forum.obsidian.md/user_avatar/forum.obsidian.md/rsdimitrov/32/746_2.png) [@rsdimitrov](https://forum.obsidian.md/u/rsdimitrov)\
**Post date:** [June 17, 2020, 8:22am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/9 "2020-06-17T08:22:31Z")

</div>

# Block cursor

![image](https://forum.obsidian.md/uploads/default/original/2X/1/111898e3ced95a39154d7347029fd4fc35eb8888.png)  
0.7.3 Dark + Light theme Compatible

```auto
.CodeMirror-cursor { 
  border-left-width: 0.5em;
  opacity: 0.75;
}

```

---

<div class="post-metadata">

**Author:** ![rsdimitrov](https://forum.obsidian.md/user_avatar/forum.obsidian.md/rsdimitrov/32/746_2.png) [@rsdimitrov](https://forum.obsidian.md/u/rsdimitrov)\
**Post date:** [June 17, 2020, 8:29am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 "2020-06-17T08:29:53Z")

</div>

# Auto fade note controls

## Minimal Series

Before:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/5/5d5e13fd051451f4437874fc399dfd847cc9a83b.png)

After:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/f/f25338c5e3fc7652b13e8fdb73a1666769888b17.png)

Note, the note controls are still there, but will increase contrast, i.e. get to the before state, on hover.

0.7.3 compatible

```auto
.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
}

```

# Auto fade status bar

## Minimal Series

0.7.3 compatible

Reduced status bar contrast.

With this code snippet you get this:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/5/552aa80e76debf904df7f961437e41839c2a83c4.png)

and on hover you get this:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/2/2dc405d88b45ce4149f47a6fa7f346187f3f05f9.png)

```auto
/* auto fades status bar items */
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
}

```

# Smaller horizontal and vertical scrollbars

## Minimal Series

0.7.3 compatible

```auto
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

```

# Subtler code folding arrows

## Minimal Series

0.7.3 compatible

Increases the size of the folding gutter arrows and decreases their opacity until hovered.

Without this code:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/a/a862ec13dd3aa9ae292a3fe3a99d0f1e46052698.png)

After this code:  
 ![image](https://forum.obsidian.md/uploads/default/original/2X/3/3e9461483193527d765253a27bdb4e2aeb577fcf.png)

```auto
/* Make subtler folding gutter arrows */
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
}

.CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
    content: "\25BA";    
}

.CodeMirror-foldgutter-open:after {
    content: "\25BC";    
}

```

---

<div class="post-metadata">

**Author:** ![Mavalator](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/7bcc69/32.png) [@Mavalator](https://forum.obsidian.md/u/Mavalator)\
**Post date:** [June 17, 2020, 3:54pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/11 "2020-06-17T15:54:29Z")

</div>

@death.au oops!

---

<div class="post-metadata">

**Author:** ![argentum](https://forum.obsidian.md/user_avatar/forum.obsidian.md/argentum/32/7733_2.png) [@argentum](https://forum.obsidian.md/u/argentum)\
**Post date:** [June 17, 2020, 4:26pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/12 "2020-06-17T16:26:39Z")

</div>

Hi there! I’m a total newbie at css. Could anyone tell me if it’s possible to change how the tags look? I’d like to highlight certain important tags (for example #complete as green, #inprogress as yellow, etc)

---

<div class="post-metadata">

**Author:** ![\_ph](https://forum.obsidian.md/user_avatar/forum.obsidian.md/_ph/32/902_2.png) [@\_ph](https://forum.obsidian.md/u/_ph)\
**Post date:** [June 18, 2020, 3:28am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13 "2020-06-18T03:28:45Z")

</div>

this worked for me :

```auto
.tag[href="#important"] {
  color : red;
}

```

# Tag Pills

0.73  
 ![Obsidian_7eMo0E8BFS](https://forum.obsidian.md/uploads/default/original/2X/3/35df313dfde8fdbae555d251831bbc4ae8b51016.png)

```css
.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

```

---

<div class="post-metadata">

**Author:** ![Kuncy](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/4491bb/32.png) [@Kuncy](https://forum.obsidian.md/u/Kuncy)\
**Post date:** [June 18, 2020, 4:53am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/14 "2020-06-18T04:53:58Z")

</div>

Functional and Beautiful. I think I might need to make changes to this to work with the Zettelkasten theme that I’m using.

---

<div class="post-metadata">

**Author:** ![argentum](https://forum.obsidian.md/user_avatar/forum.obsidian.md/argentum/32/7733_2.png) [@argentum](https://forum.obsidian.md/u/argentum)\
**Post date:** [June 18, 2020, 8:13am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/15 "2020-06-18T08:13:03Z")

</div>

Lovely! Thank you very much!

---

<div class="post-metadata">

**Author:** ![Kuncy](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/4491bb/32.png) [@Kuncy](https://forum.obsidian.md/u/Kuncy)\
**Post date:** [June 18, 2020, 8:22am UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/16 "2020-06-18T08:22:44Z")

</div>

Im hoping/waiting for Collapsible indents feature in the preview mode as well!!

---

<div class="post-metadata">

**Author:** ![MooddooM](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/ed655f/32.png) [@MooddooM](https://forum.obsidian.md/u/MooddooM)\
**Post date:** [June 18, 2020, 2:18pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/17 "2020-06-18T14:18:08Z")

</div>

## Vim mode with line focus

 ![vim-line](https://forum.obsidian.md/uploads/default/original/2X/7/7f61432e9579a1d9086d1caad3aabfd05c1f0abf.gif)

```css
/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
  width: 0.5em;
  background: #d65d0e;
  opacity: 60% !important;
}

/*an active line highlight in vim normal mode */
.cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

/*if you want the highlight to present in both normal and insert mode of vim*/
.CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

```

---

<div class="post-metadata">

**Author:** ![Kuncy](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/4491bb/32.png) [@Kuncy](https://forum.obsidian.md/u/Kuncy)\
**Post date:** [June 18, 2020, 2:31pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/18 "2020-06-18T14:31:46Z")

</div>

How can i make it work for both Light and Dark themes?

---

<div class="post-metadata">

**Author:** ![MooddooM](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/ed655f/32.png) [@MooddooM](https://forum.obsidian.md/u/MooddooM)\
**Post date:** [June 18, 2020, 2:41pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/19 "2020-06-18T14:41:03Z")

</div>

## “Naked” Embeds by @death.au

> [@"Naked" Embeds (CSS tweak)](https://forum.obsidian.md/t/naked-embeds-css-tweak/72):
>
> As per a request on the Obsidian Discord (shoutout to @scmwiz, @spacejunky, @kard32 and others) this allows note embeds to look as if they were part of the note in preview mode. I’m not a huge fan of this approach, myself. I prefer to see the embedded note look a little different. But that’s just my personal taste. Screenshot: Instructions: Copy the snippet into your vault’s obsidian.css file. It should be compatible with whatever other theme you have in there at the time. …

 ![withHeader](https://forum.obsidian.md/uploads/default/original/2X/d/d33d0de07d58894ab485b37c9806ff88a447fb6a.png)

```css
/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/
}

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}

.markdown-embed-link:hover {
color: var(--text-accent) !important;
}

```

 ![withoutHeader](https://forum.obsidian.md/uploads/default/original/2X/a/a23bfe36261e4888fcaae209b5113dfa9e8ed0bf.png)  
To further remove the header, add the following part:

```css
/* remove the first heading*/
.markdown-preview-view .markdown-embed-content>:first-child { display:none;}

```

---

<div class="post-metadata">

**Author:** ![MooddooM](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/ed655f/32.png) [@MooddooM](https://forum.obsidian.md/u/MooddooM)\
**Post date:** [June 18, 2020, 2:42pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/20 "2020-06-18T14:42:24Z")

</div>

if you don’t add the `.theme-dark` or `.theme-light` selector, it will work for both mode.

---

<div class="post-metadata">

**Author:** ![Kuncy](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/4491bb/32.png) [@Kuncy](https://forum.obsidian.md/u/Kuncy)\
**Post date:** [June 19, 2020, 2:48pm UTC](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/21 "2020-06-19T14:48:08Z")

</div>

Would it be possible to randomise the colours? from a palette?

[Next page](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978.md?page=2)