What is wrong with my .css?

Support
1

Joplin 2.7.15 (prod, win32) [Full version dump at end.]

The ordering buttons, look like this, with no .css:
image

With my very simple .css (listed below) - cannot see the symbols:
image

This the userchrome.css I am using:

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

.cm-hr {
    /* horizontal rule - "***" */
     color: black !important;
}

* {
	font-family: Arial !important ;
	font-size: 12pt !important ;
}


.side-bar,
div[toggleblock="1"], /* Notebooks and Tags headers */
.side-bar div div, /* synchronization message */
.synchronize-button {
    color: white;
    background-color: black;
}



/* these do not seem to work
.note-list div {
    color: black;
    background-color: white;
}

.item-list note-list:hover {
    color: blue;
}
*/

Joplin 2.7.15 (prod, win32)

Client ID: ef30f90de1df45ee92e636dc6485b4fe
Sync Version: 3
Profile Version: 41
Keychain Supported: Yes

Revision: 8352e23

2

Inspecting one of these buttons with the devtools, I see,
button inspected with dev tools says font is font awesome 5 free
...so I think the font-family: Arial !important; is overriding the custom font used for icons!

3

That seems a super useful observation. Since not knowing .css is one of my great weaknesses, is there an easy expression to say "don't override Font Awesome 5 Free" but do override everything else?

(Barring that, you know a good resource to learn .css quickly?)

Thank You

4 
html, body {
  font-family: "consolas" !important;
}

div, span, a {
  font-family: "consolas";
}

Is what I used on my own theme when testing something, it changes the "important" font areas like the sidebar and notelist but leaves the icons and most of the extra controls alone which I then targeted manually.

As for resouces to learn - I would go through the first two of these courses (I think the HTML one is important to really understand what the CSS is doing).

2 Likes
5

It took a little fiddling, but something close to Daeraxa's proposal worked for me - thank you!

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.