Custom CSS

[davecan]

trafficstars

I was frustrated by the appearance so I did some analysis of the CSS and made some tweaks.

Thought it might be useful to pass along so it could be adapted either for a new baseline CSS to include in the plugin or to include in the docs.

This CSS uses variables and numeric values specific to the Minimal theme (more specifically, my own tweaked Minimal theme) so it probably needs some adaptation for documentation.

But it gives others a starting point from which to do their own custom styling of the pane.

/***************************************************************************
Backlinks plugin selectors
    
From the plugin source:

  - Edit mode CSS selector chain:
      .mod-active .markdown-source-view .CodeMirror-lines

  - Preview mode CSS selector chain:
      .mod-active .markdown-preview-view

  - Then add the CSS selector(s) for the backlinks pane to the above
****************************************************************************/


/* move it further down on the screen */
.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf,
.mod-active .markdown-preview-view .workspace-leaf {
  margin-top: 1em;
  padding-top: 1em;
  border-top: solid var(--background-modifier-border) 2px;
} 

/* subtle pane title */
.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf *,
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title
.mod-active .markdown-preview-view .workspace-leaf *,
.mod-active .markdown-preview-view .view-header-title {
  color: var(--text-muted) !important;
}


/* rename the pane */

.mod-active .markdown-source-view .CodeMirror-lines .view-header-icon,
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title,
.mod-active .markdown-preview-view .view-header-icon,
.mod-active .markdown-preview-view .view-header-title {
  visibility: hidden;
  position: relative;
}
  
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title::after,
.mod-active .markdown-preview-view .view-header-title::after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Backlinks";
}

.mod-active .markdown-source-view .CodeMirror-lines .view-header-title-container {
  left: -7em;
}

.mod-active .markdown-preview-view .view-header-title-container {
  left: -5em;
}

/* 
  Remove excess padding injected at end of every note.

  Obsidian appears to inject `padding-bottom: 269px` into the style element for the 
  .markdown-preview-sizer / .markdown-preview-section elements. That causes the entire
  backlinks pane to be pushed down excessively.

  This corrects that and makes the padding more reasonable.
*/
.markdown-preview-sizer {
  padding-bottom: 3em !important;
}

[davecan]

Tweaked. Now has round-edged shaded background more like Andy Matuschak's backlinks section.

Again, this is using some specifics from the Minimal theme so it would need to be adapted.

Also there is some weirdness with how Obsidian renders which results in the pane extending all the way to the bottom of the screen regardless of how long the content actually is. This is surely an effect from the styling of the backlinks pane itself bleeding over into the note style.

It would be good if you could wrap this in a unique ID div to make CSS selection more specific. Not sure if you can do that but if so it could help avoid collisions with other plugins that may use the same kind of hack.

Updated CSS:

/***************************************************************************
Backlinks plugin selectors
    
From the plugin source:

  - Edit mode CSS selector chain:
      .mod-active .markdown-source-view .CodeMirror-lines

  - Preview mode CSS selector chain:
      .mod-active .markdown-preview-view

  - Then add the CSS selector(s) for the backlinks pane to the above
****************************************************************************/


/* move it further down on the screen */
.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf,
.mod-active .markdown-preview-view .workspace-leaf {
  padding-top: 1em;
  margin-top: 1.5em;
} 

/* subtle pane title */
.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf *,
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title
.mod-active .markdown-preview-view .workspace-leaf *,
.mod-active .markdown-preview-view .view-header-title {
  color: var(--text-muted) !important;
}


/* rename the pane */

.mod-active .markdown-source-view .CodeMirror-lines .view-header-icon,
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title,
.mod-active .markdown-preview-view .view-header-icon,
.mod-active .markdown-preview-view .view-header-title {
  visibility: hidden;
  position: relative;
}
  
.mod-active .markdown-source-view .CodeMirror-lines .view-header-title::after,
.mod-active .markdown-preview-view .view-header-title::after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Links to this note";
}

.mod-active .markdown-source-view .CodeMirror-lines .view-header-title-container {
  left: -7em;
}

.mod-active .markdown-preview-view .view-header-title-container {
  left: -5em;
}

/* 
  Remove excess padding injected at end of every note.

  Obsidian appears to inject `padding-bottom: 269px` into the style element for the 
  .markdown-preview-sizer / .markdown-preview-section elements. That causes the entire
  backlinks pane to be pushed down excessively.

  This corrects that and makes the padding more reasonable.
*/
.markdown-preview-sizer {
  padding-bottom: 3em !important;
}

/* pseudo-Andy style */

.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf,
.mod-active .markdown-source-view .CodeMirror-lines .workspace-leaf *,
.mod-active .markdown-preview-view .workspace-leaf,
.mod-active .markdown-preview-view .workspace-leaf * {
  background-color: var(--background-primary-alt) !important;
  border-radius: 15px;
  border: solid var(--background-primary-alt) 1px;
}

[mrjackphil]

I definitely don’t want to change the app styles (like changing padding for .markdown-preview-sizer) but maybe will make a way around by calculating position using JS.