What is wrong with my .css?

bryanwi · 2022-04-14T02:40:04.277Z

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

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

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

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

personalizedrefriger · 2022-04-14T03:52:06.471Z

Inspecting one of these buttons with the devtools, I see,

...so I think the font-family: Arial !important; is overriding the custom font used for icons!

bryanwi · 2022-04-14T04:04:36.712Z

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

Daeraxa · 2022-04-14T08:27:00.337Z

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

freecodecamp.org

freeCodeCamp.org

Learn to Code — For Free

bryanwi · 2022-04-14T16:11:20.869Z

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

system · 2022-05-14T16:12:09.308Z

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