Share your CSS

Wow, yes, this worked! Thank you.

But my other one still does not:

/*------ Attachment pane: make first 2 columns easier to read ---------------*/
#react-root > div > div > div:nth-child(2) > div:nth-child(2) > table > tbody > tr > td.titleCell,
#react-root > div > div > div:nth-child(2) > div:nth-child(2) > table > tbody > tr > td:nth-child(2) {
	font-size: unset !important;
}
/*---------------------------------------------------------------------------*/

I used it to make the text in the title and size columns in Tools -> Note attachments... bigger.

It seems that #react-root > ... no longer works.

Well I'm thoroughly confused at this point. Initially I was certain it didn't work because I had removed the "All notes" div (top of sidebar) before I found those selectors, which all use nth-child. I restored "All notes" expecting that to increment everything and break the sync button, but it didn't. Then I removed my whole userchrome.css and tried the lines I posted on vanilla Joplin... which also worked. Honestly have no idea, maybe it somehow conflicts with other custom CSS?

As for your other selectors, they didn't work for me either but I was able to fix it by changing the first nth-child:

#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td.titleCell,
#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td:nth-child(2) {
  font-size: unset !important;
} 

Don't know react so I also have no idea why this works, but it does! Maybe someone who actually knows what they're doing (@dpoulton?) can make it more robust :sweat_smile:.

1 Like

Your css did not work for me either.

I have never ventured before into the css there! Looking at your css and the css around the data you want to change, it seems that td.titleCell and td.dataCell are unique classes that can be manipulated. So ...

td.titleCell, td.dataCell {
     font-size: unset !important;
}

... unsets the font size. HOWEVER this works for the entire row because the resource ID is also td.dataCell.

I have browsed through Joplin's screens to see if the classes are used elsewhere and so far I have not found any unexpected changes in other areas of the interface.

1 Like

Add Generic Icons to Sidebar Notebook and Tag Names

There was a question on the forum about using css to insert images, replacing Joplin icons. I couldn't get that to work but in trying to do so found that icons could be added to the sidebar before the notebook and tag names. It's not overly useful and I do not intend to use it myself but someone may have a use for it and possibly develop it a bit further so I have posted it.

All icons will be the same for each type (notebook /tag) and someone with more graphics skill may be able to make a better icon with a smaller data size. There is not a way I have found to change the icon depending on the notebook or tag name.

No idea how they behave at high zoom or high DPI. The icons are PNG NOT vectors.

Tested using v1.2.6 and v1.3.9 using the default light theme only.

Outcome:

sidebar_icons

Code:

To use your own Base64 encoded PNG image put the data between content: url("data:image/png;base64, and "); and it is all one line. The icons below are about 23px wide by 18px.

userchrome.css

 a[data-type="2"]::before {
     display: inline-block;
     content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAEr2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTgiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMjMiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIyMyIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjE4IgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjAtMTAtMjJUMDE6MjE6MzQrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMTAtMjJUMDE6MjE6MzQrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gMS44LjUiCiAgICAgIHN0RXZ0OndoZW49IjIwMjAtMTAtMjJUMDE6MjE6MzQrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmDnLj8AAAGDaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWSzytEURTHPzOIxoiQLCwmDSvkR01sLGbyq7CYGeXX5s0zb0bNG6/3njTZKtspSmz8WvAXsFXWShEpWVlYExv0nGfUSObe7jmf+733nO4994I3nlF1q7wb9KxtRkfCgemZ2UDlIz6agAbqFdUyJmLDcUq2txs8rr/qdHOV3vdvq15IWip4qoQHVcO0hUeFx1dsw+VN4UY1rSwIHwt3mHJA4WtXTxT4yeVUgT9cNuPRCHjrhAOpX5z4xWra1IXl5gT1zLL6cx73Jv5kdiomvlVGCxZRRggTYIwhIoToYUBsiE566ZIZJeK7v+MnWZJYVaxBDpNFUqSx6RB1WbInxWuiJ6VnyLn1/1tXS+vrLWT3h6HiwXFe2qByAz7zjvO+7zifB1B2D2fZYvzSHvS/ip4vasFdqF2Dk/OiltiC03VovjMUU/mWymR4NQ2ej6BmRj7CJfjmCjX7WefwFuKr8lQXsL0D7bK/dv4LJ5RnyRKnaW4AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAC5SURBVDiNY2AYFiB35a3/n/78JwAe/F9v5vCfGPOYYAxDs5X/s4IlGW5Mi2JgxAGMzLcx3CfBsUwIJg8DO/NbhqdLnpOgnWjDYaCU4R6O4Kgj0XAW7MIPGTaYJzA0IVm49qQ2iUbjNFyeIeDkfoYANAsvkmg4lmDpZlDCGp0KjE2Yikk1nHpg1HCsAC21QFLJfwYGPNmb9FTDYGi29f+9/8/+b4snrtwg0fDC/4sufyZUapFUcA1dAABlvo7Dqvx8NQAAAABJRU5ErkJggg==");
}
 a[data-type="5"]::before {
     display: inline-block;
     content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAFOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpDb2xvclNwYWNlPSIxIgogICBleGlmOlBpeGVsWERpbWVuc2lvbj0iMjMiCiAgIGV4aWY6UGl4ZWxZRGltZW5zaW9uPSIxOCIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB0aWZmOkltYWdlTGVuZ3RoPSIxOCIKICAgdGlmZjpJbWFnZVdpZHRoPSIyMyIKICAgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIKICAgdGlmZjpYUmVzb2x1dGlvbj0iOTYuMCIKICAgdGlmZjpZUmVzb2x1dGlvbj0iOTYuMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0xMC0yMlQwMTozNzoxOSswMTowMCIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjAtMTAtMjJUMDE6Mzc6MTkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgeG1wTU06YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgeG1wTU06c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gMS44LjUiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMTAtMjJUMDE6Mjg6NTErMDE6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0icHJvZHVjZWQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFmZmluaXR5IFBob3RvIDEuOC41IgogICAgICBzdEV2dDp3aGVuPSIyMDIwLTEwLTIyVDAxOjM3OjE5KzAxOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4zr0YXAAABg2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1ks8rRFEUxz8ziMaIkCwsJg0r5EdNbCxm8quwmBnl1+bNM29GzRuv95402SrbKUps/FrwF7BV1koRKVlZWBMb9Jxn1Ejm3u45n/u995zuPfeCN55Rdau8G/SsbUZHwoHpmdlA5SM+moAG6hXVMiZiw3FKtrcbPK6/6nRzld73b6teSFoqeKqEB1XDtIVHhcdXbMPlTeFGNa0sCB8Ld5hyQOFrV08U+MnlVIE/XDbj0Qh464QDqV+c+MVq2tSF5eYE9cyy+nMe9yb+ZHYqJr5VRgsWUUYIE2CMISKE6GFAbIhOeumSGSXiu7/jJ1mSWFWsQQ6TRVKksekQdVmyJ8VroielZ8i59f9bV0vr6y1k94eh4sFxXtqgcgM+847zvu84nwdQdg9n2WL80h70v4qeL2rBXahdg5PzopbYgtN1aL4zFFP5lspkeDUNno+gZkY+wiX45go1+1nn8Bbiq/JUF7C9A+2yv3b+CyeUZ8kSp2luAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABMUlEQVQ4jd2SMUjDUBRFj2JFxEHUJYsQnMTFLN9NsrkodBIUOgviIqGbo3NdJKI4iJ0MCF10LjhZWorgVNDSoaNEoiBd+hxqK03SNNAM4t0+n3fuvY8H/1KGdSNPrgTlViSnTBk2PxEFvjraRn85Y2vfodn7yXL7uII+amKvbMumMsVQtpTcbuI7eY3ZYDwq8W4n8VxwrEFh7Z767Hxkg761hIBTwBQ43t6G0wSWIUs65gZ6yUPA00AbaAELwCpoZOx19Pc36nHhhrLlvB88Uy0Vv6qlYvvHYBK0Vsa+4HCpQf7YIh8DPuhaxgxlpgDpBNA+f8EHnDx0G9QoxDAJuRAzbShz0VA7kit/iLjPcm2Z4n/HYQ8wSAgcNLiU0yTBfgPxasmChzUYGew3SBz85/UNfRMqll3KiXoAAAAASUVORK5CYII=");
}
1 Like

Yes, this works, too!

So it seems that #react-root entries in userchrome.css don't work anymore.

Interesting. This works as well.

Hmm, so something is off then. The selector I used was the one I got from the Dev Tools.

I found the fix with copy selector in dev tools too, then compared to your selector.

Seems an extra child was inserted to that div higher up the hierarchy, making the target ... nth-child(2) ... rather than ... nth-child(1) .... Then for some reason it reverted.

I tried to replicate this in a VM with fresh install of Joplin 1.2.6, but I'm seeing nth-child(1) out of the box. Maybe you ran into some obscure bug that resolved on its own some time after you copied the nth-child(2) selector?

I think I know what happened. I'm still using Joplin 1.0.224 as my main prod instance.

My dev version is 1.3.9. When I used the Dev Tools yesterday I must have done that in my prod version by accident when both were open at the same time.

This still does not explain why your #react-root changes did not work in 1.3.9, because I just confirmed in 1.3.9 that I get the same result for the selectors as you do. But it doesn't matter, since dpoulton's simplified version works. It's just a bit weird.

Thanks again for your help.

Here are a few short codes for my own use

  1. If you want to disable or hide the WYSIWYG edit button, this will help, add it to userchrome.css

    div.editor-toolbar > div:nth-child(3) > button.tox-tbtn {
        /* visibility: hidden; */
        pointer-events: none;
    }
    
  2. and, I imitated uxamanda to make a side catalog, and added an expansion animation triggered by the mouse under low window width


    body#joplin-container-body nav.table-of-contents {

      position: fixed;

      top: 0;

      right: 0;

      font-size: 0.78rem;

      background-image: linear-gradient(45deg, black, transparent);

      z-index: 50;

      max-width: 15%;

      overflow: auto;

      max-height: 100%;

    }

    

    body#joplin-container-body nav.table-of-contents ul {

      margin-top: 0;

      margin-left: 1em;

      list-style-type: none;

    }

    

    body#joplin-container-body nav.table-of-contents ul li {

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;

      margin: 0;

      line-height: 1rem;

    }

    

    body#joplin-container-body nav.table-of-contents ul a {

      text-decoration: none;

      color: lightcyan;

    }

    

    @media only screen and (min-width: 960px) {

      #rendered-md {

        width: 85%;

      }

    }

    

    @media only screen and (max-width: 960px) {

      #rendered-md {

        width: 100%;

      }

      nav.table-of-contents {

        transition: all 0.8s;

        transform: translate(90%);

      }

      nav.table-of-contents:hover {

        transform: translate(0);

      }

    }

    ```

This is the scss source code, it is easier to read

    ```scss
    body#joplin-container-body{   
        nav.table-of-contents {
            position: fixed;
            top: 0;
            right: 0;
            font-size: 0.78rem;
            background-image: linear-gradient(45deg, black, transparent);
            z-index: 50;
            max-width: 15%;
            overflow: auto;
            max-height: 100%;
            ul {
                margin-top: 0;
                margin-left: 1em;
                list-style-type: none;
                li {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin: 0;
                    line-height: 1rem;
                }
                a {
                    text-decoration: none;
                    color: lightcyan;
                }
            }
        }
    }

    @media only screen and (min-width: 960px) {
        #rendered-md {
            width: 85%;
        }
    }
    @media only screen and (max-width: 960px) {
        #rendered-md {
            width: 100%;
        }
        nav.table-of-contents {
            transition: all 0.8s;
            transform: translate(90%);
        }
        nav.table-of-contents:hover {
            transform: translate(0);
        }
    }
    ```
3. Added strikethrough to TODO


    ```css
    li.md-checkbox input[type=checkbox]:checked + label {
    text-decoration: line-through lightyellow;
    }
    ```
1 Like

It's a very useful method.

Have been refining the display for about a year, and recently took the time to dig around for some readability settings. After a recent update muted the alternating background on the notebook list, it seemed an opportune time to bring the wish list into fruition.
Mostly readability mods for higher resolution screens, intended for use with Dark mode.
It seems to help with taking notes and cuts down on cognitive friction while scanning/skimming through longer notes for details and broadstrokes, as well as adding some differentiating touches to make editing a little more intuitive.
The add tags button can be optionally removed by uncommenting a couple of lines, left to remain so as to avoid making unexpected changes to the UI.
Regarding longer notes, on reaching the leading edge of the editor, the text has been cut off, requiring a mouse gesture to get the full line in view; a css fix bumps up the bottom to mitigate the same.

Since the styling for the active list item is dynamic, overriding it in it's entirety looks a little problematic. The closest approximation involved leaving the left margin untouched, which had a nested coloring effect on the list item anchors, while still allowing for the active row to achieve the 'highlighted' look, if only in the unmodified margin.

Before, with final line partially hidden during editing:

After, with Click to add tags... optionally removed:

The KaTeX edits are there as a boilerplate, as I saw a request for it from @EricB10. Next will probably be some work on the Mermaid display, thanks to @dpoulton for what looks to be a great starting point.

5 Likes

I also "played around" with the UI a bit. What I want to share with you now... maybe some of you will find something interesting for your own stylesheets.
I didn't really change anything about the colors themselves. Basically, I changed some UI elements (or tidied them up a bit...imho).
That means the UI should work with all built-in color themes.

Here some screenshots:

In the README you can find more information of what I've changed. The stylesheets themselves can be downloaded from here:

https://github.com/benji300/joplin-wanaka-ui

3 Likes

Looks good, thank you. How do I change the tags list background colour to green?

1 Like

Good call; tags stand out nicely against color.

/*  Alternating Tag List Colors - green */

div.tags > div.list-item-container:nth-child(odd) a{
  background-color : #092a0c;
}

div.tags > div.list-item-container:nth-child(even) a{
	background-color : #0c2d0f;
}

Added to the repo.

Thanks, but what I wanted to do is change the background colour of tags from blue to green. Wth this I get a green rectangle to the side of each tag which still has a blue background. Perhaps I haven't placed your mod in the correct position?

I had misunderstood your intent; that snippet was meant for anotther stylesheet entirely, and is not at all what you were looking for.
It looks like you're looking to modify the style by @benji300 - in which case there are a couple of options, both in userchrome.css.

To change all elements made blue by this stylesheet, modify the --primary var at line 7:

  /* TWEAK: Adapt colors here (might not change colors everywhere) */
/*--primary: rgb(45, 107, 220);*/
  --primary: rgb(15, 105, 24);

To change only the background of the tags, modify the --tag-color var at line 30:

  /* TWEAK: Change the style of the tags */
/*--tag-color: var(--primary);*/
  --tag-color: #0F6918;

Very helpful. Thank you. I'll give it ago.

B.

I made a few mods like so:

/* TWEAK: Change the style of the tags */

/--tag-color: var(--primary);/
--tag-color: #0F6918;
--tag-font-color: white;
--tag-radius: 100px;
}

This produced the following effect:

Thanks once again.

3 Likes

Started charting out a few processes, and ended up making a few Mermaid readability changes to this dark theme.

It could still benefit from a bit of finesse, but functionally addresses immediate usability concerns.


Addressed paths and weights; haven't yet gotten to Classes, but they are definitely on the horizon.

  • thanks for the starting point, it was quite helpful.

There are a few options that include the arrows on Flowcharts and Sequence diagrams.

Will likely circle back around and make a Bright theme counterpart for high contrast in sunlight, after addressing Class, State, and other diagram styles, as the need arises.

1 Like

I've tried for a solid hour, but I can't figure out how to change the font family for code mirror WYSIWYG editor. I want to change the font to "IMWriterDuospace NF" and possibly adjust the size too. Can someone please help show how to do this?