New CSS — “post-it” flavored, nice typography

Share & showcase
1

Hi all !
I’ve managed to elaborate a theme for Obsidian. I hope it will be of some interest for some users. The ideas and goals were :

  • First and foremost : aesthetics and legibility. Hence :
    • A “pen on paper” feeling : dark blue ink, very discreet paper background in preview mode.
    • Controlled line length : slightly longer in edit mode for comodity, three alphabets in preview.
    • Picture size limited in height, in order to not overwhelm text nor fill the display.
    • Vertical space compact enough to show as much text as possible on a laptop, yet breathing enough to be kind with semantics — headings levels, multilevel lists, etc.
    • Tables with subtle alternating backgrounds and logical vertical alignment.
    • Links are evident enough, but otherwise kind of “melted” in the text to allow fluid reading. They are highlighted when hovered with the mouse pointer.
  • An easily distinguishable difference between “edit” and “preview” modes :
    • The edit mode can be set in a different font — see the source.
    • The edit mode has a flat, slightly colored background, while the preview mode has the paper pattern.
    • The edit mode is distinguished by a small logo in the lower right corner.
  • A more evident signaling of the active pane — a darker, colored, thicker line at the top of the pane, below the file name and the icons. Very useful when you have many panes.
  • Transcludes :
    • don’t display filename ;
    • have a discreet dotted border along their left side — to be easily spotted.

I’m currently using different vaults — don’t ask me why — and I wanted to differentiate them visually. So, I thought of a Post-It analogy : why not use — sparingly — some Post-It colour ? So, you get three versions :

  • pale yellow
  • pale green
  • pale blue

As a “seed” for my effort, I took “Red graphite” because it was rather complete and well commented. I haven’t (yet) touched the dark version. Maybe I’ll do it if there’s sufficient interest from the community. If someone feels like undertaking the task, s/he’s most welcome !

I have put some comments in the source in order to help the aspiring customizers. But most importantly, I’ve put most of the important settings in variables, at the top of the file. It should make further customization easier.

Finally : I’m neither a graphic designer nor a programmer. So my code might look cumbersome to professionals and I don’t even garantee that it’s 100 % correct. But it just works. I kept in mind “very often, functional is good enough”. I would be very glad if someone more adept than myself in CSS would be kind enough to “correct” or maybe improve my modest attempt.

Thank you very much for your interest.

Olivier Spinnler :-{)

 

PS : to install the stylesheet :

  1. Activate the “Custom CSS” plugin, if it’s not already done ;
  2. Rename your choosen CSS version obsidian.css (case matters) ;
  3. Put it at the root of your vault, replacing the current obsidian.css, should one already be there.

Screen captures with random views of a test document

Sample blue
Sample blue978×869 207 KB
Sample green
Sample green1208×1019 330 KB
Sample yellow
Sample yellow1027×1019 393 KB

obsidian — blue.css (35.9 KB) obsidian — green.css (35.9 KB) obsidian — yellow.css (35.9 KB)

11 Likes
2

C’est impressionnant, vous avez dû mettre beaucoup de temps à développer ça.

For the non-French speakers:
It’s impressive, it must have taken you a long time to develop this.

3

Yes indeed ! For the typographical part, I would say it was years ago, when I wanted to get something better for my work in DEVONthink, before it was even available in the prefs. I took advantage of MultiMarkdown metadata.

For the purely Obsidian part, it took a lot of patience to identify what exactly refers to what — I still don’t have figured out everything. I couldn’t have done this without the Opt–Cmd–I developer tool. Unless I’ve missed something, the CSS documentation is rather sparse.

Olivier :-{)

1 Like
4

:star_struck: very nice! How do you change the color of the file name in the header? I tried this below but it didn’t work. Thanks again for sharing @OlivierPS

.view-header-title {
	font-size: 			16px;
	font-weight: 		600;
  color:      var(--text-accent);
  	background-color:	var(--post-it-color-light)
}