#201

@DitchComfort try this:

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;
}
#202

Thank you! :smiley:

#203

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

image
image705×580 13.3 KB 

.markdown-embed {  
  background-color: DarkSlateGray;
}
1 Like
#205

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

3 Likes
#206

That is really pretty. Excellent work! Thanks.

#207

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

#208

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!

#209

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

1 Like
#210

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

#211

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:

1
1778×505 90.8 KB

Here is what they look like in Reading:

2
2594×514 79.8 KB

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;
}
1 Like