# Share your CSS

**URL:** <https://discourse.joplinapp.org/t/share-your-css/1730>\
**Category:** Lounge\
**Tags:** tips-and-tricks\
**Created:** [28 February 2019 15:51 UTC](https://discourse.joplinapp.org/t/share-your-css/1730 "2019-02-28T15:51:09Z")\
**Posts on this page:** 20\
**Page:** 16

<div class="post-metadata">

**Author:** ![manthanf1](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/manthanf1/32/8115_2.png) [@manthanf1](https://discourse.joplinapp.org/u/manthanf1)\
**Post date:** [22 October 2021 12:19 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/324 "2021-10-22T12:19:17Z")

</div>

Thank you, this absolutely works!

---

<div class="post-metadata">

**Author:** ![tomasz86](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@tomasz86](https://discourse.joplinapp.org/u/tomasz86)\
**Post date:** [26 October 2021 23:31 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/325 "2021-10-26T23:31:05Z")

</div>

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.

![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/8943ac23c794098d3d08ec052693bb6cfa8e93e2.png)

```auto
.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.

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [4 November 2021 11:33 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/326 "2021-11-04T11:33:01Z")

</div>

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](https://discourse.joplinapp.org/t/note-overview/13962/229)

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3dc611a18c002bdf0f5e8100847667539732bfd9.png)

---

<div class="post-metadata">

**Author:** ![Leigh](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/leigh/32/28126_2.png) [@Leigh](https://discourse.joplinapp.org/u/Leigh)\
**Post date:** [4 November 2021 19:56 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/327 "2021-11-04T19:56:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [4 November 2021 20:15 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/328 "2021-11-04T20:15:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Leigh](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/leigh/32/28126_2.png) [@Leigh](https://discourse.joplinapp.org/u/Leigh)\
**Post date:** [5 November 2021 12:52 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/329 "2021-11-05T12:52:24Z")

</div>

Thanks @Daeraxa  
Never mind, I can live without that

---

<div class="post-metadata">

**Author:** ![MarvinParlevliet](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/marvinparlevliet/32/11319_2.png) [@MarvinParlevliet](https://discourse.joplinapp.org/u/MarvinParlevliet)\
**Post date:** [7 November 2021 23:48 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/330 "2021-11-07T23:48:24Z")

</div>

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:

 ![Screenshot of Tag View Snippet](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b9bb01c58ed91a4aa604e4e1dff9177227e72e2c.png)

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](https://github.com/MarvinParlevliet/JoplinCSS/tree/main/CSS-Snippets/Tags).

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! 🙂

---

<div class="post-metadata">

**Author:** ![HedoNNN](https://avatars.discourse-cdn.com/v4/letter/h/5daacb/32.png) [@HedoNNN](https://discourse.joplinapp.org/u/HedoNNN)\
**Post date:** [9 November 2021 13:18 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/331 "2021-11-09T13:18:11Z")

</div>

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?

```auto
.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;}

```

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [9 November 2021 13:33 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/332 "2021-11-09T13:33:23Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![HedoNNN](https://avatars.discourse-cdn.com/v4/letter/h/5daacb/32.png) [@HedoNNN](https://discourse.joplinapp.org/u/HedoNNN)\
**Post date:** [9 November 2021 14:01 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/333 "2021-11-09T14:01:52Z")

</div>

Thank you! It works. 🙂

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [9 November 2021 15:00 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/334 "2021-11-09T15:00:02Z")

</div>

Please have a look at [dpoulton](https://discourse.joplinapp.org/u/dpoulton) post. He explained in much detail what is customized how:

> [@Introduction to customising Joplin (userchrome.css & userstyle.css)](https://discourse.joplinapp.org/t/introduction-to-customising-joplin-userchrome-css-userstyle-css/21370):
>
> 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…

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [12 November 2021 10:34 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/335 "2021-11-12T10:34:11Z")

</div>

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`.

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

```

Et voilà!

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/456b1fd1384579ded6c975087a08d8386d4cfb0c.png)

---

<div class="post-metadata">

**Author:** ![hieuthi](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/hieuthi/32/10815_2.png) [@hieuthi](https://discourse.joplinapp.org/u/hieuthi)\
**Post date:** [14 November 2021 07:55 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/336 "2021-11-14T07:55:05Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)

 ![multiple-columns-layout](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/e/ebd0bfe941a54dbb54ea77ba30b745a85f2a5feb.png)

---

<div class="post-metadata">

**Author:** ![chupa](https://avatars.discourse-cdn.com/v4/letter/c/bbce88/32.png) [@chupa](https://discourse.joplinapp.org/u/chupa)\
**Post date:** [18 December 2021 11:17 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/337 "2021-12-18T11:17:00Z")

</div>

I'm using [Stylus addon](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:

```auto
@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](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/11) on a similar thing, but there hasn't been much progress:

---

<div class="post-metadata">

**Author:** ![stysebae](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/stysebae/32/12017_2.png) [@stysebae](https://discourse.joplinapp.org/u/stysebae)\
**Post date:** [22 December 2021 17:15 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/338 "2021-12-22T17:15:30Z")

</div>

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](https://github.com/mahor1221/joplin-vsc-material-theme). 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!

---

<div class="post-metadata">

**Author:** ![Angel\_Crawford\_ftw](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/angel_crawford_ftw/32/19867_2.png) [@Angel\_Crawford\_ftw](https://discourse.joplinapp.org/u/Angel_Crawford_ftw)\
**Post date:** [7 January 2022 22:30 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/339 "2022-01-07T22:30:13Z")

</div>

I updated my CSS for Jolpin 🙂

> **[GitHub - AngelCrawford/joplin-theme: My private style for Joplin. It's build...](https://github.com/AngelCrawford/joplin-theme)**
>
> My private style for Joplin. It's build on top of the integrated "Dark" Theme included in Joplin. Inklusive a special Bullet Journal css style. - GitHub - AngelCrawford/joplin-theme: ...

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/470c2d0ca78f9ba5b2a8e088ab953e4e4c90931c.png)

```css
/* 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;
}

```

```css
/* 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.**

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/8cafba1792a765c7dfd642506b14966144a61c4c.png)

---

<div class="post-metadata">

**Author:** ![stysebae](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/stysebae/32/12017_2.png) [@stysebae](https://discourse.joplinapp.org/u/stysebae)\
**Post date:** [9 January 2022 20:54 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/340 "2022-01-09T20:54:24Z")

</div>

Hey,

As mentioned in my last post, I updated [the themes created by mahor1221](https://github.com/mahor1221/joplin-vsc-material-theme). 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](https://github.com/stysebae/joplin-vsc-material-theme) .

Here is an overview of these themes, suited for Joplin \>= 2.x:

![screenshots](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/7/753e5164915e0713fb0b246d071be2e0765d97cd.gif)

---

<div class="post-metadata">

**Author:** ![9j7axvsLuF](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/9j7axvsluf/32/12313_2.png) [@9j7axvsLuF](https://discourse.joplinapp.org/u/9j7axvsLuF)\
**Post date:** [12 January 2022 20:15 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/341 "2022-01-12T20:15:35Z")

</div>

Hi everyone! I'm using a heavily modified version of [Ohmine Dark Theme](https://github.com/Nacandev/Ohmine-Dark-Theme-For-Joplin). 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!

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [12 January 2022 21:17 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/342 "2022-01-12T21:17:56Z")

</div>

Have a look at [this thread/post](https://discourse.joplinapp.org/t/the-most-simplistic-css/22683/8).

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

---

<div class="post-metadata">

**Author:** ![9j7axvsLuF](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/9j7axvsluf/32/12313_2.png) [@9j7axvsLuF](https://discourse.joplinapp.org/u/9j7axvsLuF)\
**Post date:** [12 January 2022 22:39 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/343 "2022-01-12T22:39:29Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/6/606c4304ae5592f2d5b82f7b09e025c35365065c.png)

[Previous page](https://discourse.joplinapp.org/t/share-your-css/1730.md?page=15)

[Next page](https://discourse.joplinapp.org/t/share-your-css/1730.md?page=17)