Common Selectors for Custom CSS

lizardmenfromspace · 2020-06-16T15:13:38.957Z

Will be adding Selectors to this Post

Structure of Selectors

Workspace
Left Ribbon
Right Ribbon
Left Sidebar
- File Explorer
- Search
- Star Notes
- Notes Panes
Main Content
- Title Bar
- Preview Mode
- Editor Mode
Right Sidebar
- Collapse / Open Icon
- Tags Pane
- Back-links Pane
- Notes Pane

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"]

lizardmenfromspace · 2020-06-16T16:06:05.254Z

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(

lizardmenfromspace · 2020-06-16T16:07:00.146Z

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:

MooddooM · 2020-06-16T21:48:29.062Z

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

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

MooddooM · 2020-06-18T09:40:45.966Z

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

Kuncy · 2020-06-18T09:48:47.254Z

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

Kuncy · 2020-06-18T09:51:11.898Z

Didn’t quite understand what this is supposed to mean

MooddooM · 2020-06-18T10:01:09.045Z

Comment added.

lizardmenfromspace · 2020-06-29T18:34:33.149Z

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;

lizardmenfromspace · 2020-06-29T18:36:59.199Z

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;

lizardmenfromspace · 2020-06-29T18:50:11.681Z

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;

giangcao · 2020-10-29T12:20:28.939Z

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?

joeshirley · 2020-11-13T20:19:46.421Z

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?

rvc · 2020-12-21T21:55:00.576Z

hi. can anyone help me on why all my light themes are actually kind of yellowish but not true white? been fiddling with the css file and reading these posts but I’m getting nowhere… sorry if this isn’t the right place for this question, my first time on the forum.

KingXyron · 2021-02-22T04:13:32.103Z

Hey, rvc…did you resolve your issue?

ViaAhmed · 2021-08-05T09:19:29.077Z

Hi @lizardmenfromspace is there any way to add a background in the modal-bg?
I wanted to put a picture or some interesting animation when I open the settings menu. Just to relax.

tobei · 2022-02-14T13:47:11.934Z

How would you go about overriding the color of headers and links in reading views? Is the printing css the same as the reader ?

Klaas · 2022-02-14T15:44:45.852Z

@tobei: try this:

/* Change header color */
.markdown-preview-view h1 {
  color: var(--text-accent); /* change to your preferred color */
}

As for links: external or internal?

TheM8 · 2022-08-19T14:21:36.372Z

Seems like a couple more tags appeared. For instance:

.theme-dark .graph-view.color-fill-tag {
color: #ff0000;
}

To change color of the ‘tag’ nodes on the graph. By the way, is there maybe separated css tag for labels of ‘tag’ nodes? I’ve changed color of the nodes with code posted above but would like to change labels color as well, bus cannot find any mentions of such option.

TonkatsuRa · 2023-05-06T00:30:04.898Z

Is there any way to load custom CSS libraries (e.g. Augmented-UI <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css">) into themes?

For augmented UI, you usually have to load the stylesheet AND add “data-augmented-ui” value to the

in the HTML code, so you can address it in CSS.

Anyone got any idea how to achieve this?