Share your CSS

Just moved to Joplin from Obsidian, it's just so much better here for my use case. Decided to fix some issues I saw and make it comfier.

  • The difference between the markdown editing and viewing modes was jarring, so I made it as 1:1 as possible in container sizing and content spacing.
  • Added margins to center text. Just a personal preference from my time in Obsidian.

userchrome.css :

/*
** Container clean-up
*/
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar { /* remove scrollbar replacers */
	overflow: hidden !important;
}

.CodeMirror-scroll {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 0 !important;
	margin-right: 0 !important; /* remove scrollbar band-aid */
	overflow: scroll !important;
	.CodeMirror-sizer {
		padding-left: 10px !important;
		padding-right: 10px !important;
		border-right-width: 0 !important; /* remove scrollbar band-aid */
		& > * > .CodeMirror-lines {
			padding-bottom: 3in !important;
		}
	}
}

.CodeMirror-line { /* remove line paddings */
	padding: 0 !important;
	& > span {
		padding-right: 0 !important;
	}
}

/*
** Presentation parity
*/
.CodeMirror-sizer {
	width: calc(100% - 1in);
	margin-left: auto !important;
	margin-right: auto !important;
}

.cm-jn-inline-code { /* inline code size */
	font-size: 0.9em;
	letter-spacing: calc(0.2em / 3);
}

userstyle.css :

#joplin-container-content {
	overflow: scroll !important;
}

#rendered-md {
	width: calc(100% - 1in);
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 3in;
}

1 Like

Hi,

I'm doing some css styling and ideally I'd be able to style the markdown & WYSIWUG windows so that different protocols look differently (is this possible without Joplin changes?). I'd want at least http/https://, note links and file:/// links to be different.

I'm just going to say it's likely possible through custom CSS. Not on PC right now though

Can you share why Joplin fits your use better than Obsidian?

I'm able to do it on WYSIWYG (rich text?) mode but Joplin unfortunately doesn't add enough class information for me with my limited CSS knowledge to do so. Anyway the rich mode is probably good enough for now.

I'm not 100% happy with the actual styling but here is my "userstyle.css" so far (the "tok-link" stuff doesn't work, I was trying to copy the same css into both css files):

a[href^="http"], .tok-link[href^="http"]
{
color: blue !important;
font-weight: bold;
cursor: alias;
/color: deepskyblue;/
}
a[href^="file:///"], .tok-link[href^="file:///"] {
color: red !important;
font-weight: bold;
cursor: alias;
}
a[href^="joplin://"], .tok-link[href^="joplin://"] {
color: brown;
font-weight: bold;
cursor: alias;
}

1 Like

Hi! I'm new with css, and I'm trying to get the same I have with the markdown rendered in the HTML export. It works fine when I export a single note. But It doesn't work when importing entire notebook as directory. I have this css in mu usercss to warp the lines of code and to have a dark background. What I need to change in order to achieve this output when exporting an entire notebook as html?

.exported-note {

color : #FFFFFF;
background-color : #32373F;

} 

@media print {
    /* css for printing */
code {
    white-space: pre-wrap;
}

Thanks