"How to achieve" CSS code snippets

[govsat1]

I’m adding a custom cssclass to achieve per note styling. This works fine, but how do I target dark or light themes (still in a ‘per note’ context)? TIA

Current example code (CSS snippet), which I then activate using cssclass: school

.school {
	font-size: 0.90em;
}

[Klaas]

@govsat1 I have no idea. Your best bet is to ask in the #appearance channel on Discord, there are some amazing css gurus.

[Erisred]

@govsat1 - If your intention is to have them different for dark mode than in light mode, you need to use css variables.
Define the variables for each mode class first, then use them in the css class you want to put in the file.

Something like this:

/* light mode styles */
.theme-light {
  --text-color-school: blue;
  --font-size-school: 0.8rem;
}
.theme-dark {
  --text-color-school: red;
  --font-size-school: 1.2rem;
}

.school {
  color: var(--text-color-school);
  font-size: var(--font-size-school);
}

This will make your cssclass: school have a different style for dark and light modes when added to a specific note.

If your intention is to have them the same for both modes, you don’t need to set anything for the modes, it will just work in both.

.school {
  color: red;
  font-size: 0.8rem;
}

Hope that helps!

[scholarInTraining]

Dataview somewhat recently added a results count in tables and task lists that is nearly invisible for me on the default dark mode in Obsidian. Here’s a quick snippet that made it more visible in dark mode, but you could set anything. (Selector source: dataview developer in a GitHub discussion).
I am new to CSS but I think the !important is necessary here because the plugin snippet is the same level of specificity, also sets color and seems to be winning the tie-breaker - maybe it is included after the user snippet?

.dataview.small-text {
    color: var(--text-accent) !important;
}

You’ll probably have to close and re-open Obsidian to see the results, or otherwise cause your dataview to re-render.
If anyone has other suggestions for what to put in this snippet, I’d love to learn more CSS.

[Lithou]

So Two things:

• First - Lithou is still alive and has not been taken over by an alien robot.
• Second - I had a day off work last month and updated the image flags snippets to work with “live preview” in edit mode.

I’m pretty sure @Klaas or @kepano asked for this like 14 months ago. I’ve just been prioritizing other things in life since then or just plain forgot. So thanks everyone for your patience.

Link

Here is a link:

Lithou/Sandbox/blob/main/.obsidian/snippets/pub-Image Flags.css

Here are some details:

• I haven’t updated the documentation on my obsidian publish site yet.
• I’ve tested this with v0.15.3 but let me know if you see any odd behaviour with this or any other versions.
• I’ve only tested it with the default theme so if there are any odd interactions with themes or other snippets please let me know.
• I changed most things to variables at the beginning of the snippet to make it easier to change colors, styles, and sizes. Each also lists a default value incase you want to revert something back to how it was without re-downloading everything

Bugs/Features

Grid Mode

Grid mode will not work in live preview mode due to the extra HTML elements added by obsidian. Works well in reading mode still.

Text Highlighting

I’ve noticed some odd behaviour when using the cursor to select text in “live preview” mode. It will work fine if you are going left/right but will have some odd skipping when going up/down line by line.

Placement of image oddities:

Images with the “+tape” and “+pin” flags need to be included in a paragraph with the text that goes next to it. Otherwise the “DIV” element which contains them won’t be large enough.

Compare the following two examples. Both have edit mode on the left with live preview engaged. Reading view is on the right.

The first one has the image in its own paragraph which causes clipping of the tape element:

The second puts the image in the same paragraph as the text which resolves the issue. In both cases, the reading view is unaffected.

Quick Reference

Here is an updated list of all the flags currently in use:

Core Flags:

+side
+tape
+pin
+portrait
+landscape
+banner
+hr

Orientation Modifier Flags:

-left
-right

Size Modifier Flags:

-thumb
-sm
-med
-lg
-huge
-full

Border Modifier Flags:

-border1
-border2
-border3
-bround1
-bround2
-TLround
-TRround
-BLround
-BRround
-bthick
-bthin

Shadow and Glow Modifier Flags:

-shadow
-glow
-glow2

[NomarCub]

There used to be a way to have icons for notes in the file explorer.

How to set the icon for a note on right side bar

Things I have tried What I’m trying to do I have several “special” notes that I’ve added to the right side bar (e.g. Goals.md). Since the title isn’t displayed, I rely on the icons to differentiate between the tabs in the side bar. But my 4 special notes all have the same icon. Is there a way to set the icon for a specific note when it’s on the side bar?

However, this is broken in the latest v0.16 insider version. Can someone help me out with this? Should that post be reopened / should I make a new post?

[Klaas]

You could ask in the Discord #appearance channel.

[zensei1]

I want to get minimal theme to look like this on windows with the titlebar hidden. I’ve been told it is doable with some css magic.

Does anyone have css to move the close, max, and min buttons to this position, below the titlebar?

Thanks in advance

[Klaas]

Note: from Obsidian 0.16 on this is a togglable setting. If you don’t want to wait till 0.16+ goes public, try this:

.titlebar {
  background: var(--background-primary);
}
 
.titlebar-text {
  display: none;
}

Note 2: if you use the Hider plug-in (made by the Minimal dev), it is a togglable setting.

[zensei1]

@Klaas

.titlebar {
  background: var(--background-primary);
}
 
.titlebar-text {
  display: none;
}

Sorry I worded my question badly, I already have hider (with the minimal theme) installed but I loose the min, max and restore buttons which I use all the time.

I wanted to move the buttons into the sidebar like in the picture. I’ve dipped my toes into css already and got this which only changed the position within the titlebar (which I have hidden).

I hope my question is clearer now!

.titlebar-button-container.mod-right {
  left: -100px;
  top: 5px;
  position: absolute;
}

.titlebar-button.mod-close{
  left: 25px !important;
  position: relative;
}

.titlebar-button.mod-minimize{
  left: 140px !important;
  position: relative;
}

.titlebar-button.mod-maximize{
  left: 140px !important;
  position: relative;
}

.titlebar-button-container.mod-left{
  display: none !important;
}

[Klaas]

You could/should ask in the Discord #appearance channel.

[zensei1]

Ok thanks for the help!

[edgirishan]

Is there any css snippet for enabling collapsing app ribbon after the 1.0 update?
I know I can hide the left ribbon using the Hider plugin but I wanted to retain the option of accessing upon hovering.

[Klaas]

I don’t know, sorry. Your best best is to ask in the #appearance channel on Discord, where there are some amazing CSS gurus.

[extraMangosPlease]

Is there a snippet to hide the View mode icon? I never change this setting, and it seems not to be hideable by Hider.

[Klaas]

I don’t know what you mean by “View mode”. There is Reading mode and Live Preview mode. I assume you mean the icon in the top right corner of a note. If so, try this:

/* Hide Edit/Preview icon in inactive panes only */
.workspace-leaf:not(.stayopen) .view-action[aria-label*="Preview"], .workspace-leaf:not(.stayopen) .view-action[aria-label*="Edit"] {
    display: none;
}


/* Hide Edit/Preview icon in all panes */
.view-action[aria-label*="Preview"], .view-action[aria-label*="Edit"] {
    display: none;
}

[gapmiss]

Snippet to shrink “pinned” tabs and add a border.

div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) {
  width: 55px !important; 
  max-width: 55px !important; 
}
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) .workspace-tab-header-inner {
  border: 1px solid hsla(var(--color-accent-hsl), .33);
}

When a “pinned” tab is also “active”, the tab’s width reverts to it’s original. Removing the :not(.mod-active) section of the rule will keep the “pinned” width.

[holroy]

@gapmiss

div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) {
  width: 55px !important; 
  max-width: 55px !important; 
}
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) .workspace-tab-header-inner {
  border: 1px solid hsla(var(--color-accent-hsl), .33);
}

What do you need for this to become active? I can’t get it to work in Obsidian 1.1.9 on macOS.

[gapmiss]

For myself, it works as expected on default Obsidian theme. Have you disabled your current theme and seen if it works?

[holroy]

Didn’t work in default theme nor minimal theme.