Share your CSS

[manthanf1]

Thank you, this absolutely works!

[tomasz86]

I wonder if anyone could suggest some clean CSS to show text next to the "New note" and "New to-do" buttons.

I've myself managed to come up with something like this. Please keep in mind that I didn't spent a lot of time on the code, as it was more like a quick and dirty fix.

.rli-noteList > div > div > div:first-child,
.rli-noteList > div > div > div:first-child > div {
	display: inline-block !important;
	height: auto !important;
}

.new-note-button,
.new-todo-button {
	margin-top: 8px !important;
	margin-left: 0 !important;
}

.new-note-button:after,
.new-todo-button:after {
	content: attr(title) !important;
	font-size: 13px !important;
	left: 44px !important;
	position: absolute !important;
}

The code works but is kind of ugly, and also I think it would be better if the two buttons could stay in a single-line.

The main reason for this requirement is that I work with an older person who simply cannot remember what a button without any visible text label does.

[meldarionqeusse]

For anyone which might find this helpful I figured out a way how to use note-overview and some css to get a card view of all the note or notes in a certain notebook see more Note overview - #229 by meldarionqeusse

[Leigh]

Hi
Is there any way to make nested tags with this css stuff (that I dont really understand!)
Sorry if its a dumb question

[Daeraxa]

Unfortunately not, CSS is cosmetic, it essentially just modifies what Joplin looks like. There are lots of clever tricks that can add functionality in different ways but nested tags is not one of them. There is a long history of that particular feature and issues with it but basically, no, it has to be coded in Joplin itself.

[Leigh]

Thanks @Daeraxa
Never mind, I can live without that

[MarvinParlevliet]

Hey there, I'm new here and I've been using Joplin for quite a while. I have to admit that I'm not quite as advanced as some of you seem to be, but I've made this little tag view if y'all are interested:

It's more of a cosmetic thing (doesn't automatically add the tags to Joplin), but I still like how it turned out. It has a shadow in case a light theme is being used and has support for printing/exporting to PDF. I've fully documented the CSS file to make it as beginner-friendly as possible and you can get it on my GitHub page.

I'll be making more of those little snippets in the future and may even start a theme if I that itch... but I'll see. Hope someone may find this useful too. Enjoy!

[HedoNNN]

I have absolutely no clue... I copy pasted exactly this snippet of CSS and put in my file and it doesn't work at all...

Here's my complete userstyle.css file, is there any mistake somewhere?

.list-item-depth-0 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-1 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-2 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-3 .title::first-letter{
    color: transparent !important; 
}

* {margin-left:0px;padding:0px;font-family:calibri;line-height:1.1;}


body {width:550px;}

[Daeraxa]

It goes in userchrome.css as it is for styling the note list in the app, userstyle.css is for styling the rendered output (markdown preview).

[HedoNNN]

Thank you! It works.

[tessus]

Please have a look at dpoulton post. He explained in much detail what is customized how:

Introduction to customising Joplin (userchrome.css & userstyle.css)

Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css. userchrome.css allows styling of the app itself, including the Markdown Editor, userstyle.css allows s…

[Daeraxa]

Somebody asked a question on Discord about whether the markdown editor and preview windows could swap position. I have no idea if this will break anything (as it isn't something I will ever use and have no real impetus to test it) but I managed to do it by adding the following to userchrome.css.

.rli-editor > div > div > div > div > div > div {
    flex-direction: row-reverse !important;
}

Et voilà!

[hieuthi]

Apparently modern web engine support multiple columns layout. It is even more simpler than traditional text processor software. You can read more about css style here

[chupa]

I'm using Stylus addon on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:

@media (prefers-color-scheme: light) {
    /* light theme colors */
    :root {
        --bg-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    /* dark theme colors */
    :root {
        --bg-color: black;
    }
}

/* ... */

div#joplin-container-content {
    background-color: var(--bg-color) !important;
}

I've been trying to do the same thing in Joplin because currently, my userchrome.css and userstyle.css contain hardcoded color values for dark theme, so changing OS theme to light makes Joplin look difficult to use (dark background on dark text etc). Is it possible to use prefers-color-scheme or something similar in userchrome.css and userstyle.css to set separate colors for dark and light themes?

I've seen a discussion on a similar thing, but there hasn't been much progress:

[stysebae]

Hello,

I am also new here. I am using Joplin since few months. Combined with some plugins, it is a powerful tool!

I am currently working on an update of VSCode Community Material Theme for Joplin. My version of Community Material Theme Ocean is almost done, but I am struggling with tweaking some styles:

• I do not know how to change/override the background color of block codes (not inline code, but comments inside blocks)

• I am not able of modifying the selection style of some content in CodeMirror

• Lastly, I would like to change the style of the checkboxes in the note list, but changing the background-color of li.md-checkbox has no effect

Has anyone been able to do these tweaks?

Thanks!

[Angel_Crawford_ftw]

I updated my CSS for Jolpin

GitHub - AngelCrawford/joplin-theme: My private style for Joplin. It's build...

/* userchrome.css */
:root {
  --white: #e9edf0;
  
  --light-grey: #b1bcc2;
  --grey: #3D444E;
  --dark-grey: #222222;
  
  --black: #050017;
  
  --red-light: #fad3d4;
  --red: #f65354;
  --red-dark: #FF1744;
  
  --green-light: #c5e5b4;
  --green: #58D68D;
  --green-dark: #23CD60;
  
  --yellow-light: #faf3d3;
  --yellow: #E7AE1D;
  --yellow-dark: #E7AE1D;
  
  --blue-light: #bed3fc;
  --blue: #02A4F1;
  --blue-dark: #3a79f7;
  
  --purple-light: #C792EA;
  --purple: #F459F4;
  --purple-dark: #F459F4;
  
  --aqua-light: #70ecec;
  --aqua: #1fdfdf;
  --aqua-dark: #00A3A3;
  --aqua-darker: #007c7c;
  
  --orange-light: #faf3d3;
  --orange: #cf7506;
  --orange-dark: #E7AE1D;
}

div.sidebar {
  background-color: #2E3138 !important;
}

div.sidebar .list-item-container.selected {
  background: #616161;
}
div.sidebar .list-item-container:hover {
  background: #4E4E4E !important;
}

div.sidebar .list-item-container a.list-item > span:not(.title):not(.tag-label) {
  font-size: 15px !important;
  width: 25px;
  text-align: center;
}

div.sidebar button {
  font-size: 13px;
}
div.sidebar button:hover {
  background: #4E4E4E !important;
}
div.sidebar button span.icon-sync {
  font-size: 15px;
}

div.rli-noteList button.new-todo-button,
div.rli-noteList button.new-note-button {
  background-color: var(--white);
  opacity: .5;
}
div.rli-noteList button.sort-order-reverse-button span,
div.rli-noteList span.user_updated_time,
div.rli-noteList span.icon-search {
  color: var(--white);
  opacity: .5;
}

div.note-list .list-item-container,
div.note-list > div:last-of-type {
  height: 30px !important;
}
div.note-list .list-item-container::before {
  border: none;
}
div.note-list .list-item-container > a {
  font-size: 13px !important;
}

.ace_heading {
  font-weight: bold;
}
.CodeMirror .cm-header.cm-header-1, 
.CodeMirror .cm-header.cm-header-2, 
.CodeMirror .cm-header.cm-header-3, 
.CodeMirror .cm-header.cm-header-4, 
.CodeMirror .cm-header.cm-header-5, 
.CodeMirror .cm-header.cm-header-6 {
  color: var(--aqua-dark);
}

.CodeMirror .cm-strong {
  color: var(--aqua-light) !important;
}

.ace-twilight .ace_list, 
.ace-twilight .ace_markup.ace_list, 
.ace-twilight .ace_storage {
  color: var(--white) !important;
}
.ace-twilight .ace_support.ace_function { color: #aaa !important; }
.ace-twilight .ace_variable { color: var(--red-dark) !important; }

.cm-s-material-darker .cm-variable-3, .cm-s-material-darker .cm-type {
  color: var(--white) !important;
}

/* Links */
.cm-s-material-darker .cm-link-text {
  color: var(--purple-light) !important;
}
.cm-s-material-darker .cm-string {
  color: var(--green-dark) !important;
}

.cm-s-material-darker .cm-meta {
  color: var(--green-dark) !important;
}
.cm-s-material-darker .cm-property {
  color: var(--aqua-dark) !important;
}


.cm-tabcolor-row {
  color: var(--joplin-color) !important;
}
.cm-tabcolor-header {
  font-weight: bolder;
  color: var(--joplin-color) !important;
}
.cm-tabcolor-col1, .cm-tabcolor-col7 {
  background-color: transparent !important;
  color: #00A3A3 !important;
}
.cm-tabcolor-col2, .cm-tabcolor-col8 {
  background-color: transparent !important;
  color: #F459F4 !important; 
}
.cm-tabcolor-col3, .cm-tabcolor-col9 {
  background-color: transparent !important;
  color: #23CD60 !important;
}
.cm-tabcolor-col4, .cm-tabcolor-col10 {
  background-color: transparent !important;
  color: red !important;
}
.cm-tabcolor-col5, .cm-tabcolor-col11 {
  background-color: transparent !important;
  color: #cf7506 !important;
}
.cm-tabcolor-col6, .cm-tabcolor-col12 {
  background-color: transparent !important;
  color: #3a79f7 !important;
}

/* userstyle.css */

/* // MARK: General */

:root {
  --white: #e9edf0;

  --light-grey: #b1bcc2;
  --grey: #3D444E;
  --dark-grey: #222222;

  --black: #050017;

  --red-light: #fad3d4;
  --red: #f65354;
  --red-dark: #FF1744;

  --green-light: #c5e5b4;
  --green: #58D68D;
  --green-dark: #23CD60;

  --yellow-light: #faf3d3;
  --yellow: #E7AE1D;
  --yellow-dark: #E7AE1D;

  --blue-light: #bed3fc;
  --blue: #02A4F1;
  --blue-dark: #3a79f7;

  --purple-light: #C792EA;
  --purple: #F459F4;
  --purple-dark: #F459F4;

  --aqua-light: #70ecec;
  --aqua: #1fdfdf;
  --aqua-dark: #00A3A3;
  --aqua-darker: #007c7c;

  --orange-light: #faf3d3;
  --orange: #cf7506;
  --orange-dark: #E7AE1D;
}


body {
  background-color: var(--dark-grey);
  /* padding-top: 4px;
  padding-bottom: 20px; */
  font-family: "Roboto", Avenir, Arial, sans-serif !important;
}

/* #rendered-md {
  max-width: 750px !important;
} */

mark {
  background: var(--aqua);
  color: var(--black);
  padding: 2px 4px;
}

strike, s {
  opacity: 0.5 !important;
}

blockquote {
  color: var(--white) !important;
  margin: 1.5em;
  padding: 1em;
  border-radius: 8px;
  border-left: 6px solid var(--aqua-dark);
  background-color: var(--grey);
}

strong, em {
  color: var(--aqua-light) !important;
}

blockquote strong {
  font-style: bold !important; 
  color: var(--aqua-dark) !important;
}

blockquote em {
  font-style: italic !important; 
  color: var(--aqua-dark) !important;
}

hr {
  border: none;
  border-bottom: 1px solid var(--grey) !important;
  margin: 2.5em 0 !important;
}

img {
  border: none;
}

a {
  color: var(--green-dark);
  opacity: 1;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.resource-icon { 
  background-color: var(--green) !important;
  width: 0.9em; 
  height: 1.1em; 
  top: 0.2em;
}

a[href='#'] { 
  color: var(--green-dark); 
}

/* // MARK: Headers */

h1 {
  color: var(--white);
  background: var(--grey);
  text-align: center;
  padding: 20px 20px 15px 20px;
  border-bottom: var(--aqua-dark) 2px solid;
  margin-bottom: 20px;
  margin-top: 40px;
}

#rendered-md > h1:first-child {
  margin-top: 5px;
  padding-top: 20px;
}

h2 {
  color: var(--aqua-dark);
  margin-top: 40px;
}

h3 {
  color: var(--aqua-dark);
}

h4, h5, h6 {
  color: var(--white);
}

/* // MARK: Listen */

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}
ol li {
  margin: 0;
  padding: 0 0 0 1.5em;
  list-style-type: none;
  counter-increment: item;
}
ol li:before {
  color: var(--aqua-darker);
  content: counter(item) ".";
  display: inline-block;
  float: left;
  font-weight: bold;
  padding-right: 0.5em;
  width: 1em;
}

ul {
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 0 0 0 1.5em;
  list-style-type: none;
}
ul li::before {
  color: var(--aqua-darker);
  content: "\2022";
  display: inline-block;
  float: left;
  font-weight: bold;
  padding-right: 0.3em;
  width: 1em;
}

/* // MARK: Notifications */

b-construction, b-error, b-success, b-notice, b-warning, b-help {
  display: block;
  margin-bottom: 10px;
  padding: 10px 10px 10px 50px;
  border: 1px solid;
  border-left: 5px solid;
  border-radius: 2px; 
  word-wrap: break-word;
  text-align: left;
  box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
  color: var(--grey);
  background-color: transparent;
}
b-construction::before, 
b-error::before, 
b-success::before, 
b-notice::before, 
b-warning::before, 
b-help::before {
  font-weight: 700;
  font-size: 1.5em;
  left: 30px;
  position: absolute;
}

b-construction {
  border-color: var(--orange);
  color: var(--orange);
}
b-construction::before {
  content: "\f7d9";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--orange-light);
}

b-error {
  border-color: var(--red);
  color: var(--red);
}
b-error::before {
  content: "\f071";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--red-light);
}

b-success {
  border-color: var(--green-dark);
  color: var(--green-dark);
}
b-success::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--green-light);
}

b-warning {
  border-color: var(--yellow);
  color: var(--yellow);
}
b-warning::before {
  content: "\f06a";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--orange-light);
}

b-notice {
  border-color: var(--aqua-darker);
  color: var(--aqua-darker);
}
b-notice::before {
  content: "\f05a";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--aqua-light);
}

b-help {
  border-color: var(--blue-dark);
  color: var(--blue-dark);
}
b-help::before {
  content: "\f059";
  font-family: "Font Awesome 5 Free" !important;
  color: var(--blue-light);
}


/* // MARK: Tables */

table {
  border-collapse: collapse;
  overflow: hidden;
}
th,
td {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
th {
  text-align: left;
}
thead th, .jop-tinymce table th, table th {
  background-color: var(--aqua-dark);
}
tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
  position: relative;
}
tbody td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
}

table tr td > ul:last-of-type {
  margin-bottom: 0em;
}

/* // MARK: Checkboxes */

input[type='checkbox'],
.md-checkbox .checkbox-label-unchecked,
.md-checkbox .checkbox-label-checked,
li.md-checkbox { 
  cursor: pointer !important; 
}

li.md-checkbox [type="checkbox"]:not(:checked),
li.md-checkbox [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label,
li.md-checkbox [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

li.md-checkbox [type="checkbox"]:not(:checked) + label:before,
li.md-checkbox [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; 
  top: 0;
  width: 1em; 
  height: 1em;
  border: 1px solid var(--dark-grey);
  background: var(--light-grey);
  border-radius: 50%;
}

li.md-checkbox [type="checkbox"]:checked + label {
  opacity: .5 !important;
  color: var(--white);
}
li.md-checkbox [type="checkbox"]:checked + label:before {
  background: var(--aqua-darker);
  opacity: 1 !important;
}

li.md-checkbox [type="checkbox"]:not(:checked) + label:after,
li.md-checkbox [type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: -1px;
  left: 3px;
  color: var(--dark-grey);
  font-weight: bold;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
  opacity: 1 !important;
}

li.md-checkbox [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

li.md-checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

ul li[class*='checkbox']::before {
  display: none;
}

/* GALLERY */
img.gallery {
  border: 1px solid #00A3A3; 
  margin-right: 10px;
}
img.gallery:hover {
  position: absolute; 
  width: 100%; 
  left: 0; 
  cursor: pointer;
  z-index: 999;
}

/* MARK: Copy Anchor (Headers) */

h1 span.copy-anchor-icon, h2 span.copy-anchor-icon, h3 span.copy-anchor-icon {
  visibility: hidden;
}
h1:hover span.copy-anchor-icon, h2:hover span.copy-anchor-icon, h3:hover span.copy-anchor-icon {
  visibility: visible;
}

For this extra Bullet Journal style, have a look at my Github Project.

[stysebae]

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:

[9j7axvsLuF]

Hi everyone! I'm using a heavily modified version of Ohmine Dark Theme. I've managed to change what I wanted successfully, aside from one thing: I can't for the life of me change the font size of the note list (the notebook list works). Any help would be most welcome!

[Daeraxa]

Have a look at this thread/post.

If you need it to be specific to a given panel then you will need to target the .sidebar or .note-list parent classes.

[9j7axvsLuF]

Thanks! I've actually already targetted the .note-list class (see below) but I don't see any difference: