"How to achieve" CSS code snippets

Klaas · December 19, 2021, 12:27pm

for Edit mode:

.cm-link, .cm-s-obsidian span.cm-url {
  font-style: italic;
}

and for Reading (= Preview) mode:

a.external-link {
  font-style: italic;
}

DitchComfort · December 19, 2021, 1:06pm

Thank you!

udracing · December 30, 2021, 5:16pm

Simple CSS snippet to change the background color for the preview popup.

.markdown-embed {  
  background-color: DarkSlateGray;
}

zremboldt · January 8, 2022, 4:09am

I’m really excited about this one, hoping others will enjoy it too!

Scribe · January 8, 2022, 4:25am

That is really pretty. Excellent work! Thanks.

Klaas · January 8, 2022, 4:46am

@zremboldt this will undoubtedly make some people happy. Is there a possibility to make it render in Live Preview too?

Iv3llios · January 21, 2022, 5:34pm

Hey all, need a little help here, I would like to have the font reduce in size according to indentation level (so the more indented a bullet point is, the smaller the text becomes). If anyone here with better CSS skills feels like giving it a go I would very much appreciate it!

Klaas · January 21, 2022, 5:37pm

@Iv3llios : I have no idea how to do this, but maybe someone else will reply. In case you are not aware of it, I just want to say that if you get any answers, or not satisfactory one, try the #appearance channel on Obsidian Discord. There are some amazing CSS wizards there.

Iv3llios · January 21, 2022, 5:38pm

@Klaas Thanks for the tip, ill head there if I can’t find a solution! Cheers!

JimK · March 7, 2022, 11:32pm

Hi @Iv3llios,

I would like to have the font reduce in size according to indentation level (so the more indented a bullet point is, the smaller the text becomes).

For Live Edit mode:

You can change the size of the text on the indent by changing this:

.cm-s-obsidian .HyperMD-list-line-1 {
  font-size: 1em;
}

You need to do that for each level though, in other words you will need multiple entries with the number 1 changed to the level number.

.cm-s-obsidian .HyperMD-list-line-1 { font-size: 1em; }
.cm-s-obsidian .HyperMD-list-line-2 { font-size: .9em; }
.cm-s-obsidian .HyperMD-list-line-3 { font-size: .8em; }
.cm-s-obsidian .HyperMD-list-line-4 { font-size: .7em; }

If you go say 4 levels deep the 5th level will start the size selections all over again, so level 5 will be the size of level 1, level 6 will be the size of level 2, etc.

You can also change the color of the text as well, I feel that makes the list easier for me to brows through quickly.

For Read view:

I have only been able to find out how to change all the lines under the 1st line, not each individual one. They do scale down for each level but I can’t control how much.

div ul > li {
  font-size: 1em;
}

/* all other level items of the list */
div ul ul > li {
  font-size: .95em;
}

Below is the CSS for and screenshots of how mine currently look. If you have found a better way please let me know. If anyone has any suggestions to do better or clean it up some I would appreciate it.

Here is what my lists look like in Live Edit:

Here is what they look like in Reading:

Here is the CSS to get that gives me that:


/* Lists
alltagsverstand https://forum.obsidian.md/t/css-code-to-change-color-and-size-of-bullet-points/15230/7
entropic https://forum.obsidian.md/t/custom-colors-for-lists-symbols-and-or-text-editor-only/11185
*/

/* Lists - text color for both ul and ol in Edit view */
.cm-s-obsidian .HyperMD-list-line-1 {
  font-family: var(--font-family-editor);
  font-size: 1em;
  color: var(--TextColorBodyEditor);
}

.cm-s-obsidian .HyperMD-list-line-2 {
 color: #acb19899;
 font-size: 1.em;
}

.cm-s-obsidian .HyperMD-list-line-3 {
  color: #acb19888;
  font-size: .95em;
 }

 .cm-s-obsidian .HyperMD-list-line-4 {
  color: #acb19877;
  font-size: .9em;
 }
 
 .cm-s-obsidian .HyperMD-list-line-5 {
  color: #acb19877;
  font-size: .9em;
 }

 .cm-s-obsidian .HyperMD-list-line-5 {
  color: #acb19877;
  font-size: .9em;
 }

.cm-s-obsidian .HyperMD-list-line-6 {
  color: #acb19877;
  font-size: .9em;
}

/* Lists - Unordered list dots Edit view */
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1 { color: yellow !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-2 { color: #FDB777 !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-3 { color: #FDA766 !important;}
.HyperMD-list-line.HyperMD-list-line-4 .cm-formatting-list-ul.cm-list-1 { color: #FD9346 !important;}
.HyperMD-list-line.HyperMD-list-line-5 .cm-formatting-list-ul.cm-list-2 { color: #FD7F2C !important;}
.HyperMD-list-line.HyperMD-list-line-6 .cm-formatting-list-ul.cm-list-3 { color: #FF6200 !important;}

/* Lists - Ordered list dots Edit view */
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 { color: yellow !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-2 { color: #FDB777 !important;}
.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-3 { color: #FDA766 !important;}
.HyperMD-list-line.HyperMD-list-line-4.CodeMirror-line .cm-formatting-list-ol.cm-list-1 { color: #FD9346 !important;}
.HyperMD-list-line.HyperMD-list-line-5.CodeMirror-line .cm-formatting-list-ol.cm-list-2 { color: #FD7F2C !important;}
.HyperMD-list-line.HyperMD-list-line-6.CodeMirror-line .cm-formatting-list-ol.cm-list-3 { color: #FF6200 !important;}


/* Lists - Padding in Edit view */
.cm-s-obsidian .HyperMD-list-line {
  padding-top: 0.1em; 
  min-height: 1.5em;
  
  /* Defaults from app.css v0.3.19
  .cm-s-obsidian .HyperMD-list-line {
    padding-top: 0.3em;
    min-height: 1.5em;
  }*/
}



/* Lists - text color for both ul and ol in Reading view */
/* **first** level items of a list */
div ul > li {
  color: var(--TextColorBodyEditor);
  font-size: 1em;
}

/* all other level items of the list */
div ul ul > li {
  color: #acb19899;
  font-size: .95em;
}

GatoStruck · March 28, 2022, 7:51pm

Change colour of external links and highlight not-existing notes

I only found out about CSS recently and this feature makes my notes much tidier, love it! Thanks @Klaas for this collection.

The instructions to add a CSS snipet.
However, some of it doesn’t work completly as I would wish:

It only works in edit mode, not view.
Changing the internal link colour does not seem to work the same way

.cm-s-obsidian span.cm-hmd-internal-link {
    color: #6d7df2;
}

.cm-s-obsidian span.is-unresolved {
    color: #e44949;
    opacity: 1 !important;
}
.is-unresolved::after {
  content: "⚠"; 
}

.cm-s-obsidian span.cm-link {
    color: #81f26d;
}

Klaas · March 29, 2022, 3:15am

@GatoStruck to get it to work in Reading mode, use

.markdown-preview-view

ariehen · March 31, 2022, 2:44am

@Klaas

Thanks for this and the Github files. I’ve learned heaps.

Is there any notation/documentation/place for css snippets that are for use with the new LivePreview editor? For example: “this css works with LivePreview editor.” “This is for legacy editor (pre-LivePreview), use this syntax now.” I’ve seen individual posts explaining the changes but it’s always hard to tell what is the current agreed upon syntax vs old.

I had a bunch of css snippets stop working with the switch to LivePreview, but I think I’ve got everything mostly sorted out now.

Anyway, thanks again.

Klaas · March 31, 2022, 6:06am

@ariehen thanks for your kind words. I don’t think there is documentation showing what is for the “old” Edit mode (= CM5) and for Live Preview (= CM6). It is a bit “hit and miss”, as you have experienced and as I have experienced myself. The misses you’ll have to fix, and 1 good source of support is the #appearance channel on Discord, where there are some people with amazing expertise in this.

ariehen · March 31, 2022, 7:10am

@Klaas

Hit and miss is right. My personal .md file of obsidian css hacks needs a cleaning.

On a positive note, as time goes by we can (hopefully) assume posted css tips work with Live Preview.

Thanks again.

govsat1 · April 26, 2022, 7:49pm

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 · April 27, 2022, 4:07am

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

Erisred · April 27, 2022, 12:14pm

@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 · June 7, 2022, 11:16pm

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 · July 5, 2022, 8:06am

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:

github.com

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

/*Image Flags Snippet by Lithou
http://github.com/lithou/sandbox

2022-06-29 - Updated to work with the live preview in edit mode. Most will continue to work except the grid view. 
*/


/* Customization 
This snippet is setup so that most of the customization can be achieved by editing
the following variables instead of editing the actual CSS rules themselves. 

There are some advanced funtions that will require editing the rules, but 99% of 
people wont need to do this to get the snippet to do what they want it to. 

Feel free to change these to customize the look and feel to what you need. 
I have listed the default values for each in comments if you want to revert one back. */ 



span.image-embed, div.image-embed, img{

This file has been truncated. show original

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:

image1733×388 142 KB

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

image1801×386 149 KB

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