Share your CSS

betternote · 2022-06-17T19:14:57.786Z

Hi all,
this time, I propose you a model of newsletter set up in 2 columns, similar to the one of a newspaper.

The markdown template below

---
template_notebook: here your notebook target ID
template_title: {{#custom_datetime}}[]YYYY[/]MM[/]DD{{/custom_datetime}} The TinyVillage Newsletter
template_tags: newsletter,draft, 2columns
---

<style>
/*reset styles*/
h1, h2, h3, h4, p, a, strong, ul, ol, li {}
/*set headers*/
h1 {column-span: all; text-align: center;
color: #777799;}
h2 {column-span:2; text-align: left;
color: #7777AA;}
h3, h4 {color: #0077BB;}
/*set paragraphs*/
p {column-count: 2;column-gap: 5%;
line-height: 120%;
font-family: sans-serif;
text-align: justify;
text-justify: inter-word;
text-justify: inter-character;
hyphens: auto;
}
/* set lists*/
li::first-letter {text-transform: lowercase;;}
ol li::first-letter {text-transform: uppercase;}
ul {
margin-left: 5%;
color: #003333;
font-family: inherit;
font-style: italic;
}
/*set caracters*/
strong {font-weight: 600;
font-size: 100%;}
italic {color: #003333;}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
u {
  border-bottom: 0.5px, light, currentColor;
  }
/*set links*/
a:link {
  color: darkgreen;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  font-size: 150%;
}
a:active {
  text-decoration: underline;
}
/*set hr lines*/
/* simple single */
hr.singleline {
  border-top: 2px solid #0077AA;
	padding-top: 1px;
}
/* dashed */
hr.dashes {
  border-top: 1px dashed #0077AA;
}
/* dotted */
hr.dots {
  border-top: 1px dotted #0077AA;
}
/* thick */
hr.thickline {
  border: 2px solid #0077AA;
}
/* thick double dotted  */
hr.doubledots {
  border: 4px dotted #0077AA;
  border-radius: 2px;
	padding-top: 2px;
}
/* styles for the bulletin purpose*/
chapo {column-count: 1;
	text-align: justify;
	font-family: sans-serif;
	font-style: italic;
	font-weight: 550;
}
note {top: -0.5em;
font-style: italic;
color: darkblue;
}
op {font-size: 100%;
color: #008877;
}
</style>
# Your TinyVillage Newsletter<br> {{#custom_datetime}}[]YYYY[-]MM[-]DD{{/custom_datetime}}
## Hello dear readers,

<div>
<chapo>Editorial: here some text from the newsletter staff. It could be long enough to demonstrate the chosen style. Nice! It spreads to both columns, just as I wished…</chapo>
</div>

## A two columns wide title for this first article[^1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat mi quis pretium semper. Proin luctus orci ac neque venenatis, quis commodo dolor posuere. Curabitur dignissim sapien quis cursus egestas. Donec blandit auctor arcu, nec pellentesque eros molestie eget. In consectetur aliquam hendrerit. Sed cursus mauris vitae ligula pellentesque, non pellentesque urna aliquet. Fusce placerat mauris enim, nec rutrum purus semper vel. Praesent tincidunt neque eu pellentesque pharetra. Fusce pellentesque est orci.
Integer sodales tincidunt tristique. Sed a metus posuere, adipiscing nunc et, viverra odio. Donec auctor molestie sem, sit amet tristique lectus hendrerit sed. Cras sodales nisl sed orci mattis iaculis. Nunc eget dolor accumsan, pharetra risus a, vestibulum mauris. Nunc vulputate lobortis mollis. Vivamus nec tellus faucibus, tempor magna nec, facilisis felis. Donec commodo enim a vehicula pellentesque. Nullam vehicula vestibulum est vel ultricies.
Aliquam velit massa, laoreet vel leo nec, volutpat facilisis eros. Donec consequat arcu ut diam tempor luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae lacus vel leo sodales pharetra a a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus tempus nibh, fringilla dictum augue consectetur eget. Curabitur at ante sit amet tortor pharetra molestie eu nec ante. Mauris tincidunt, nibh eu sollicitudin molestie, dolor sapien congue tortor, a pulvinar sapien turpis sed ante. Donec nec est elementum, euismod nulla in, mollis nunc.

## Article #2, with a picture
![d7e8e5fae5cb157024cabbfa65c9230e.png](:/578d33b596a0467fb1525cea5cce4eb3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat mi quis pretium semper. Proin luctus orci ac neque venenatis, quis commodo dolor posuere. Curabitur dignissim sapien quis cursus egestas. Donec blandit auctor arcu, nec pellentesque eros molestie eget. In consectetur aliquam hendrerit. Sed cursus mauris vitae ligula pellentesque, non pellentesque urna aliquet. Fusce placerat mauris enim, nec rutrum purus semper vel. Praesent tincidunt neque eu pellentesque pharetra. Fusce pellentesque est orci.
Integer sodales tincidunt tristique. Sed a metus posuere, adipiscing nunc et, viverra odio. Donec auctor molestie sem, sit amet tristique lectus hendrerit sed. Cras sodales nisl sed orci mattis iaculis. Nunc eget dolor accumsan, pharetra risus a, vestibulum mauris. Nunc vulputate lobortis mollis. Vivamus nec tellus faucibus, tempor magna nec, facilisis felis. Donec commodo enim a vehicula pellentesque. Nullam vehicula vestibulum est vel ultricies.
Aliquam velit massa, laoreet vel leo nec, volutpat facilisis eros. Donec consequat arcu ut diam tempor luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae lacus vel leo sodales pharetra a a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus tempus nibh, fringilla dictum augue consectetur eget. Curabitur at ante sit amet tortor pharetra molestie eu nec ante. Mauris tincidunt, nibh eu sollicitudin molestie, dolor sapien congue tortor, a pulvinar sapien turpis sed ante. Donec nec est elementum, euismod nulla in, mollis nunc.


<footer><hr class="singleline">
Put here your footer content and some text to fill the template
<hr class="singleline">
</footer>

<div class="footnote">

[^1]: You could modify the column count inside the CSS

</div>

A partial screenshot of rendered note

betternote · 2022-06-18T14:16:21.904Z

Hi,
no attachment is displayed after uploading, I don't know why.
Sorry

kally · 2022-08-10T10:40:04.807Z

Hi,
I love your theme but I somehow cannot get it to work.

I have put userchome.css and userstyle.css in .config\joplin-desktop\ on windows.
My appearance config is "dark" with a editor font size of 14.
I have not installed the fonts yet.
Joplin version is 2.8.8.
Restarted multiple times.

Any advice?
Thank you very much in advance!

Edit:
I got the same problem with this CSS:

Share your CSS Lounge

Hey, As mentioned in my last post, I updated the themes created by mahor1221. As this repository is now archived, I cannot submit a pull request. Thus, you can find an updated version of these themes in my forked repository: GitHub - stysebae/joplin-vsc-material-theme: VSCode Community Material Theme for Joplin . Here is an overview of these themes, suited for Joplin >= 2.x: [screenshots]

shibibd · 2022-08-11T06:44:44.000Z

Hi, thank you for your feedback. I would check first if you didn't forgot to enable the rich markdown plugin and check this checkbox that is essential for my theme to work properly:

Currently I'm on an older version of Joplin but I'll will try the theme with the current version this evening and come back to you as soon as I know what's going on.

But just in case here you can find always the last version of my theme:
https://github.com/gonzalovsilva/joplin-dark-theme

kally · 2022-08-11T08:57:28.235Z

Hi, thanks for the reply!
I have installed and enabled the rich markdown plugin, but still nothing has changed.
Any help would be highly appreciated!

shibibd · 2022-08-11T18:45:57.000Z

Currently I've updated and now with the last version(2.8.8) on my side it's working normally.
Are you sure that you followed all the instructions written here: https://github.com/gonzalovsilva/joplin-dark-theme ?

kally · 2022-08-11T20:11:20.584Z

Now I am at home on my Linux PC. There it is indeed working.
On my Windows PC at work not. Same settings... Don't know why.

I prefer to have the complete note like one page and not splitted into 2-3 columns.
What settings should I adjust in the userstyle.css to achieve that?

Thank you very much in advance!

shibibd · 2022-08-12T06:26:14.000Z

On my side, I got it working on 2 different windows 10 and 11 with no issues.
And just for extra information, on windows to actually see your changes, you have to completely close Joplin and open it again. That means that you also have to close it from the taskbar as the program is still running in the background if you just do the normal ALT + F4. For the columns part, just comment or remove the userstyle.css -> line 86: "column-width: 30rem;" and that should work for you.

t0dd · 2022-08-31T03:49:28.789Z

UPDATE: this is an okay solution for many scenarios, but please refer to my Oct 5th post for a better solution. (The best solution would be a fully fleshed-out Theme that does this. Maybe I will implement that one day.)

PROBLEM: Using a DARK theme but want a PAPER WHITE theme (a light theme) for the rendered view?
SOLUTION: Choose a dark theme, but then invert the colors for everything in the rendered-view stylesheet! Quick-and-dirty, but works. See below.

/*
 * Invert everything. (But then revert images back.)                         *
 * Note: for whatever reason, you have to set background-color in the <html> *
 *       element and then invert everything in the <body> element.           *
 */

html { background-color: black; }
body { filter: invert(100%); }
img { filter: invert(100%); }

. . . Save this to userstyle.css. Or via the desktop application and Tools > Options > Appearance > [Show advanced settings] > [Custom stylesheet for rendered markdown])

The alternative is to build your own complete CSS stylesheet just for the renderer. That's probably ideal, but this inversion technique is probably "good enough" for 99% of what you need to do and it is easy.

Benjamin-Watson0 · 2022-09-13T13:40:41.539Z

Can "Editor font family" files only be fonts installed on the computer?
-- from portable joplin

Marph · 2022-09-21T18:02:13.397Z

In case anyone uses mermaid in the richtext editor and doesn't want the large white space at the right:

userstyle.css:

.mermaid {
    width: 100%;
}

Before:

mermaid_before1301×782 28 KB

After:

mermaid_after1248×784 32.9 KB

References:

Upgrading Mermaid
Share your CSS - #54 by dpoulton

t0dd · 2022-10-05T05:27:23.477Z

PROBLEM REVISITED: Dark-themed Joplin with a Light-themed rendered view.

Reference my August 30th comment.

OLD SOLUTION: filter: invert(100%)

In my previous solution, I suggested just applying a couple of filter: invert(100%) rules in the userchrome.css config file to achieve the goal.

Well, I put that in practice. And it worked okay for simple stuff. Unfortunately, the user experience was very subpar for anything but standard text. It was particularly poor for things like syntax-highlighted code from when I applied a the three-tick preformatted tag to something. Syntax highlighting is algorithmically determined and applied and can't be easily modified. Thus, using filter: invert() just didn't solve my problem.

Why did I gravitate to filter: invert in the first place? Because I wanted an easy solution. In the absence of a configuration switch in the Joplin UI, I still sought something relatively simple. Alas.

NEW SOLUTION: Manually apply colors directly.

I will share some CSS with you. It's probably not complete, so you will have to address oddballs HTML elements here and adjust those accordingly. But I think I took care of the bulk of the configuration. Here's most of my userstyle.css. I hope it helps someone out there:

body {
  background-color: white;
  color: black;
}
/* joplin-container-content has to match */
#joplin-container-content { background-color: transparent; }
@media print { body { background-color: transparent; } }

a { color: #450045ff; } /* dark plum */
a:hover { color: #900090ff; } /* plum */

code, pre {
    line-height: 1.5em;
    border-radius: 4px;
}
pre { /* this gets interesting. you have to really push to get truly readable text */
    background: rgba(0,0,0,7%) !important;
    border: 7px solid rgba(0,0,0,1%);
    border-radius: 4px;
    opacity: 1;
    filter: saturate(900%) contrast(900%) brightness(20%);
}
blockquote {
    background: rgb(247,247,247);
    border-left: 4px solid rgb(150,150,150);
    opacity: .9;
}

.code, .inline-code {
    border: none;
    color: rgb(10,10,10);
    background: rgb(230,230,230);
    border-radius: 4px;
}

mark {  background: yellow !important; }

Benjamin-Watson0 · 2023-02-24T14:13:52.483Z

The level of code is not high, do not criticize.

@font-face {
    font-family: "wk";
    src: url("C:/Windows/Fonts/LXGWWenKai-Regular.ttf") format("truetype");
}

body {
    font-family: "wk";
    font-size: 18px;
}

ol > li::marker {
    color: rgb(21, 91, 218);
    font-weight: bold;
}
ul >li::marker{
    color: rgb(21, 91, 218);
}

h1, h2, h3, h4, h5, h6 {
    color: rgb(21, 91, 218);
	line-height: 30px;   
}

h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.3em;
}
h4 {
	font-size: 1em;
}
h5{
	font-size: 1em;
}
h6 {
	font-size: 1em;
}
h1::before {
    content: "h1";
    position: relative;
	display: inline-block;
	top: -5px;;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 15px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}
h2::before {
    content: "h2";
    position: relative;
	display: inline-block;
	top: 0;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 15px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}
h3::before {
    content: "h3";
    position: relative;
	display: inline-block;
	top: 0;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 15px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}
h4::before {
    content: "h4";
    position: relative;
	display: inline-block;
	top: 0;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 15px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}
h5::before {
    content: "h5";
    position: relative;
	display: inline-block;
	top: 0;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 15px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}
h6::before {
    content: "h6";
    position: relative;
	display: inline-block;
	top: 0;
    left: 0;
    color: rgb(220, 220, 220);
	font-size: 13px;
	line-height: 30px;
	margin-right: 10px;
    font-family: "wk";
}

/* 	Check box */
.md-checkbox {
	color: var(--joplin-color);
	color: black;
}
.md-checkbox input[type=checkbox]:checked {
	opacity: 0.7;
}

.jop-tinymce ul.joplin-checklist .checked,
.md-checkbox .checkbox-label-checked {
	opacity: 0.5;
}

/* 	Bold */
b,strong{
    font-weight:bolder;
    color: #A63F78;
}

b::before,b::after,
strong::before,strong::after {
	position: relative;
	content:"**";
}

	/*italic*/
em, i {
    font-style: italic;
    color: #e1c11f;
}
em::before,em::after,
i::before,i::after {
	position: relative;
	content:"*";
}


/* 	 mark*/
mark {
	background-color: #fffadc;
	padding: 0 5px;
/* 	border-radius: 4px; */
	color: var(--joplin-color);
}

mark::before,mark::after {
	content: "::";
}

/* Hyphenated*/
s {
	color: #c9846c !important;
}

del {
	color: #c9846c !important;
}

del::before,del::after,
s::before,s::after	{
	position: relative;
	content:"~~";
}


/*underline*/
ins,u{
    color: #a17fe0;
}

/*Dividing line*/
hr {
    border: none;
    border-top: 2px solid #ed5a65;
    margin: 1em 0;
}

mke21 · 2023-03-01T14:34:32.820Z

I've put this in the userstyle.css for random sections to emphasize certain text. This works fine for me in the dark theme, but I think it works well in a light theme as well.

Dark:

joplin1332×386 41.8 KB

Light:

joplin21321×377 41.1 KB

:root {
  --white: #e9edf0;
  --yellow-dark: #E7AE1D;
  --blue: #02A4F1;
  --purple-dark: #F459F4;
  --red-dark: #FF1744;
}

note::before,
info::before,
question::before,
warning::before
{
  font-weight: 700;
  text-shadow: 1px 1px 3px #000000;
  color: var(--white);
  margin-right: 0.2rem;
  position: absolute;
  width: 2rem;
  left: 0;
  top: 0;
  height: 100%;
  display: grid;
  place-items: center;
}

note,
info,
question,
warning
{
  display:block;
  padding: .5rem 1rem .5rem 2.5rem;
  position: relative;
  margin: 15px 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
	overflow: hidden;
}

note {
	border-color: var(--blue);
}

note::before {
	content: "\266A";
	background: var(--blue);
}

info {
	border-color: var(--yellow-dark);
}

info::before {
	content: "\2139";
	background: var(--yellow-dark);
}

question {
	border-color: var(--purple-dark);
}

question::before {
	content: "?";
	background: var(--purple-dark);
}

warning {
	border-color: var(--red-dark);
	font-weight: bold;
}

warning::before {
	content: "\26A0";
	background: var(--red-dark);
}

artikell · 2023-03-18T02:50:46.239Z

Simple optimization

Simple optimization
"On a relatively large screen, I need to focus on writing, but in Joplin, notes cannot be centered, and there are various types of highlights in the middle, which can cause interference.".
So, I removed the highlight and centered my notes. Maybe someone will

image3584×2034 427 KB

span.cm-header.cm-header-1 {
    color: #32373F !important;
}
span.cm-header.cm-header-2 {
    color: #32373F !important
}
span.cm-header.cm-header-3 {
    color: #32373F !important;
}
span.cm-header.cm-header-4 {
    color: #32373F !important;
}

/*Italics/emphasis = Green*/
span.cm-em {
    color: #32373F !important;
}

span.cm-strong {
    color: #32373F !important;
}

span.cm-strong.cm-em{
    color: #32373F !important;
}

span.cm-variable-2, span.cm-meta {
    color: #32373F !important;
}

span.cm-variable-2 {
    color: #32373F !important;
}
/*BP/NL/L 3 = Cyan*/
span.cm-keyword {
    color: #32373F !important;
}

/*URL = dark blue*/
span.cm-link, span.cm-string.cm-url {
    color: #32373F !important;
}

span.cm-link-text {
    color: #32373F !important
}

span.cm-comment {
    color: #32373F !important;
}

span.cm-hr {
    color: #32373F !important;
}

span.cm-quote.cm-quote-1 {
    color: #32373F;
}
span.cm-quote.cm-quote-2 {
    color: #32373F;
}
span.cm-quote.cm-quote-3 {
    color: #32373F;
}

span.cm-strikethrough {
    color: #32373F;
}

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
    padding-left: 0;
    line-height: 2em;
}

.CodeMirror {
    padding-left: 19%;
    padding-right: 19%;
    font-family: 'Source Han Mono', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
}

.CodeMirror-sizer {
    border-right-width: 0px
}

Daeraxa · 2023-03-18T18:50:45.311Z

artikell:

but in Joplin, notes cannot be centered

You can use Appearance > Editor maximum width in your settings to create a similar effect to centre your text in the middle of a pane.

artikell · 2023-03-19T00:32:12.688Z

OMG! Hey, it seems like I'm busy in vain.

ajay · 2023-04-16T08:48:36.706Z

I've been browsing through this "share your CSS thread", and honestly I am a little surprised about it's popularity. People play with their styles -> fine, they know the style can and will break sooner or later -> see Laurent's comment, then they share their style's code with pride, but more than often without enough explanation or good pictures.
Next - so goes the assumption - somebody else will take the time, paste it manually into his or her profile, restart Joplin several times, and watch in awe. Does this really provide any added value ?

Please be patient with me, there is no offense intended in what I am saying here. But WTF is the purpose of all this. If you really wanted to provide your best style to the user community to test and enjoy there must be a better, more structured way to do this, no ?
No shit-storm please, it is not worth your time.

dpoulton · 2023-04-16T09:54:06.695Z

Four years ago when the user @etcSudoers created this thread the ability to customise Joplin using CSS was quite a new and popular thing. The use of custom CSS is unsupported so user-to-user support was all that could be expected. This thread was never going to be an "official" repository of all CSS knowledge, but just a quick way to share useful info and discoveries. It just grew all by itself. When someone was experimenting and searched something like span.cm-variable-2, they got this thread in their results. Others referenced posts within it, and so it continued to grow. I agree that you cannot really read this thread from beginning to end and it sort of became a "CSS chat-space". It is not as popular as it was and up until your post had not been updated for a month.

A while back an attempt was made to make a more organised "repository" and this forum "wiki" page was created. In my opinion the Discourse wiki function is not that brilliant and you almost need to know the page exists to be able to find it, but that is what we have.

So...

ajay:

But WTF is the purpose of all this.

This is just a thread that Joplin users have created and updated by themselves as they see fit, just like most of the 1000's of other threads on this forum.

ajay:

If you really wanted to provide your best style to the user community to test and enjoy ...

(My emphasis)

For some reason you seem to assume that Laurent / Joplin has been providing this post as a source of best practice / knowledge for this unsupported feature, which is not true. I may be wrong and "you" may just be pointing at Joplin users but, regardless, it's just another forum thread.

ajay:

... there must be a better, more structured way to do this, no ?

It would be fantastic if there was a properly structured wiki containing a comprehensive user manual / documentation for both users and developers but for such a small group of volunteers I doubt that there is enough time to create and adequately maintain one. Especially considering the pace of change. However I doubt that CSS customisation, being an unsupported feature, would be included in any official wiki anyway.

kentonself · 2023-05-26T14:56:27.226Z

For me to get this to work I had to change the "span" to "button" I am using version 2.10.19

div.tag-list button {
border-radius: 5px;
color:white !important;
background: blue !important;
}

I love the look! Thank you. dpoulton!