Share your CSS

[crayon]

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

[dbareis]

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.

[executed]

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

[foto16]

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

[dbareis]

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

[JLMirallesB]

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

[dbareis]

I'm trying to style headings (H1=#=main), this works OK in WYSIWYG mode but I can't workout how to style it in the markdown editor, this is the selector (which tries to handle both):

h1, div .cm-h1.cm-headerLine.cm-header.cm-line

Anyone succeeded?

[dpoulton]

Are you referring to the Markdown Editor (i.e. where you do the typing) or the Markdown Editor Viewer pane? The Markdown editor itself is customised using userchrome.css.

[dbareis]

Yes I know, I'm trying the use the same CSS in both (I update both).

[dpoulton]

@dbareis

I'm trying the use the same CSS in both (I update both).

OK.

I have had a quick look through the css and found that if I put this:

h1, .cm-h1 {
    font-size: 40px !important;
    color: red;
}
h2, .cm-h2 {
    font-size: 20px !important;
    color: green;
}
h3, .cm-h3 {
    font-size: 10px !important;
    color: blue;
}

in both userchrome.css and userstyle.css I get this:

[dbareis]

@dpoulton

quick look through the css

Thanks for your help, although for whatever reason your css doesn't work here on the latest version of Joplin desktop, I just had to replace ".cm-h1" to ".cm-header-1" (I will have to modify my css a bit to exactly match).

To see the css, you mean with the chrome debug tools?

[dpoulton]

@dbareis

for whatever reason your css doesn't work here on the latest version of Joplin desktop

That's odd. Those screenshots were made using the latest full release (Joplin Desktop 3.3.10). Are you using the "Legacy" Markdown Editor? (Tools > Options > General > Advanced > Use the legacy Markdown editor)

However if it now works for you that is all that matters

@dbareis

To see the css, you mean with the chrome debug tools?

Yes. Help > Toggle development tools and some prodding about with the style inspector.

[dbareis]

@dpoulton

legacy Markdown editor

Thanks, yes, I have now turned that off.

[feloneouscat]

Okay, this is a dumb CSS trick that doesn’t take over any Markdown capability. Let’s say you have this:

Which is all great and everything, but it’s missing that one thing: Red. Your text looks something like this:

So what’s the easiest way to do this?

The CSS is simple:

red {
    color: #ff0000;
}

What’s nice about this is you don’t have to go reinventing your Markdown titles.

red {
	color: #ff0000;	
}
green {
	color: #00ff00;
}
purple {
	color: #af00e0;
}

As I say, it’s simple, but gives you a lot more flexibility. You can use this trick for a lot more (like adding or removing spacing!)

[feloneouscat]

Okay, this is a followup on my previous post. Let’s say you want to change a header sometimes but not all the time. Just modify it a bit. Because temporary is way better than permanent. Especially if you really like the default.

So, let’s look at a simple way to modify the look of a header. Sometimes I just need to modify it a bit:

I’m not a CSS wizard (truly, I don’t really like it) but I need to use it. So, I’ve learned some little tricks. One is how to modify things like headers temporarily but not permanently. So ## remains the same but by adding <hdrmod/> I can make a temporary change.

This is the code that does the above:

hdrmod {
    display: flex;
    flex-direction: row;
    font-size: 14px;
    font-weight: bold;
    margin-right: 20%;
}
	
hdrmod:before {
    content: "";
    border-bottom: 2px solid #888888;  ;
    padding-left: 30px;
    margin-right: 10px;
    margin-bottom: 13px;
}

What’s cool? You can create hdrmod1, hdrmod2 etc. Or if you have a better name, call it that (my-header-mod-name-is-better-than-yours). But you DON’T have to change the default Joplin style if you don’t want to. Wicked, eh?