Meta Post - Common CSS Hacks

lizardmenfromspace · June 16, 2020, 2:17pm

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, use a custom theme created by our community, or customize further by using CSS snippets.

Some community resources:

Obsidian CSS Quick Guide on the forum (mostly about using the inspector)
Large collection of CSS snippets on GitHub
The #appearance channel 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

Learning Obsidian CSS

lizardmenfromspace · June 16, 2020, 2:25pm

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!

anon34498147 · June 16, 2020, 2:50pm

Collapsible Sidebars

v.0.7.3 Compatible

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

Mavalator · June 16, 2020, 10:33pm

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

death.au · June 16, 2020, 11:00pm

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

lizardmenfromspace · June 16, 2020, 11:04pm

@death.au well you have mod powers

rsdimitrov · June 17, 2020, 4:19am

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

rsdimitrov · June 17, 2020, 8:22am

Block cursor

0.7.3 Dark + Light theme Compatible

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

rsdimitrov · June 17, 2020, 8:29am

Auto fade note controls

Minimal Series

Before:

After:

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

0.7.3 compatible

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

and on hover you get this:

/* 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

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

After this code:

/* 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";    
}

Mavalator · June 17, 2020, 3:54pm

@death.au oops!

argentum · June 17, 2020, 4:26pm

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)

_ph · June 18, 2020, 3:28am

this worked for me :

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

Tag Pills

0.73

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

Kuncy · June 18, 2020, 4:53am

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

argentum · June 18, 2020, 8:13am

Lovely! Thank you very much!

Kuncy · June 18, 2020, 8:22am

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

MooddooM · June 18, 2020, 2:18pm

Vim mode with line focus

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

Kuncy · June 18, 2020, 2:31pm

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

MooddooM · June 18, 2020, 2:41pm

“Naked” Embeds by @death.au

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

To further remove the header, add the following part:

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

MooddooM · June 18, 2020, 2:42pm

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

Kuncy · June 19, 2020, 2:48pm

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