Common Selectors for Custom CSS

Will be adding Selectors to this Post

Structure of Selectors

Understanding HTML Attributes

As Silver stated, workspace-leaf-content have a data-type (e.g. “markdown”) and they also have a data-mode="preview" when in preview mode (doesn’t look like there’s a data-mode for editor, not sure if intentional) within the main container, there is div with class .workspace which contains the ribbons ( .workspace-ribbon.side-dock-ribbon.mod-left and .workspace-ribbon.side-dock-ribbon.mod-right ), the sidebars ( .workspace-split.mod-left-split and .workspace-split.mod-right-split ) and the main “root” workspace ( .workspace-split.mod-root ). So, if you’re looking to target a note in a sidebar specifically, you’d probably be looking for something like .mod-left-split .worspace-leaf-content[data-type="markdown"]

11 Likes

Workspace

Selectors

  • .workspace { ... } --> selects the entire workspace
  • .theme-light { ... }–> use to control elements just in the light theme, can add this to the front of any selector (example - .theme-light .side-dock-ribbon)
  • .theme-dark { ... }
  • html, body, h5, h6 { ... }
  • html, body { ... }
  • body { ... }

Workspace CSS

  • display: flex;
  • flex-grow: 1;
  • transition: padding-left 100ms ease-in;
  • overflow: hidden;
  • height: 100%;
  • background-color: var(--background-secondary);

Theme CSS

  • --background-primary: #
  • --background-primary-alt: #
  • --background-secondary: #
  • --background-secondary-alt: #
  • --background-accent: #
  • --background-modifier-border: #
  • --background-modifier-form-field: #
  • --background-modifier-form-field-highlighted: #
  • --background-modifier-box-shadow: rgba(
  • --background-modifier-success: #
  • --background-modifier-error: #
  • --background-modifier-error-rgb:
  • --background-modifier-error-hover: #
  • --background-modifier-cover: rgba(
  • --text-accent: #
  • --text-accent-hover: #
  • --text-normal: #
  • --text-muted: #
  • --text-faint: #
  • --text-error: #
  • --text-error-hover: #
  • --text-highlight-bg: rgba(
  • --text-selection: rgba(
  • --text-on-accent: #
  • --interactive-normal: #
  • --interactive-hover: #
  • --interactive-accent: #
  • --interactive-accent-rgb:
  • --interactive-accent-hover: #
  • --scrollbar-active-thumb-bg: rgba(
  • --scrollbar-bg: rgba(
  • --scrollbar-thumb-bg: rgba(
3 Likes

Left Ribbon

  • Collapsed
  • Open

Selectors:

  • .side-dock-ribbon { ...} --> Selects both ribbons
  • .workspace-ribbon.mod-left { ... } --> Selects just the left ribbon when open
  • .workspace-ribbon.mod-left.is-collapsed { … } --> Selects just the left ribbon when closed

Common CSS:

  • background-color: red;
  • width: 50px;

Images:

@lizardmenfromspace Great job!! This will be super helpful.

There is a previous css guide from @Reggie, which can be put together here, although it is based on old version:

Graph View

/*background of graph view pane*/
.workspace-leaf-content[data-type = "graph"] .view-content{
  background-color: var(--background-primary);
}

/*filled color for the circle when not hover*/
.graph-view.color-fill {
  color: var(--background-secondary);
}

/*color for the circle stroke */
.graph-view.color-circle {
  color: var(--text-normal);
}

/*color for the connecting line when not hover*/
.graph-view.color-line {
  color: var(--background-modifier-border);
}

/*color for texts*/
.graph-view.color-text {
  color: var(--text-normal);
}

/*filled color for the circle when hover*/
.graph-view.color-fill-highlight {
  color: var(--interactive-accent);
}

/*color for the connecting line when hover*/
.graph-view.color-line-highlight {
  color: rgb(var(--interactive-accent-rgb));
}
2 Likes

A little more descriptions for those unfamiliar with CSS, please?

Didn’t quite understand what this is supposed to mean :confused:

Comment added.

1 Like

Collapse / Open Icon

Selectors

  • .workspace-ribbon-collapse-btn { ... }
  • .workspace-ribbon.is-collapsed .workspace-ribbon-collapse-btn { ... }
  • .workspace-ribbon-collapse-btn:hover { ... }

Common CSS:

  • margin-top: 20px;
  • padding: 20px 6px;
  • cursor: pointer;
  • color: var(--text-faint);
  • transform: none;
  • transition: transform 200ms ease-in-out;

Plugin Icons

Selectors

  • .side-dock-actions { ... }
  • .side-dock-ribbon-action { .. }
    • HTML Atrributes
      • aria-label="Open quick switcher"
      • aria-label="Open graph view"
      • aria-label="Open today's note"
      • aria-label="Create new Zettelkasten note"
      • aria-label="Open random note"

Common CSS

  • color: var(--text-faint);
  • text-align: center;
  • cursor: pointer;
  • stroke-width: 2px;

Bottom Icons

Selectors

  • .side-dock-settings { ... }
  • .workspace-ribbon.mod-left.is-collapsed .side-dock-ribbon-action { ... }
  • .side-dock-ribbon-action { ... }
    • HTML Atrributes
      • aria-label="Open another vault"
      • aria-label="Help"
      • aria-label="Settings"

Common CSS

  • color: var(--text-faint);
  • text-align: center;
  • cursor: pointer;
  • stroke-width: 2px;

Hi, newbie to CSS here. I’m trying to change the color of the file extension in File Explorer. The dev window tells me it’s .nag-file-tag { } but I don’t see that in the obsidian.css file and can’t file it on the lists here either. Any idea how to edit it?

Hi, looking for selectors for the popover previews. Trying to eliminate the scroll bars on embeds showing in the popover preview, but can’t find the right selectors. Any info?

1 Like