This is a place where I put various CSS changes I make to some applications, and how to apply them. One of my favorite things to do is find an app that is either based on the web or even a desktop app with an Inspect Element menu and tune it until it looks just right with my (subjective) taste.
First, I recommend installing the CSS Override extension by swcolegrove. This lets you save CSS snippets to the website and sync changes across your Firefox account.
Another extension I recommend is the Progressive Web Apps extension by Filip S that lets you save a website to your start menu and/or pin it to your taskbar. Even better is that you can apply CSS to the userChrome.css to hide the application titlebar, leaving you with just the contents of the website.
This file (at least on Linux) is kept at ~/.local/share/firefoxpwa/profiles/00000000000000000000000000/chrome/userChrome.css. I suggest making all web apps using PWAs with the Default profile so you don't have to keep changing this CSS. To find the location of this folder on Windows or Mac, open about:support in your PWA, and look for "Profile Directory" under Application Basics. Make a new file userChrome.css inside the chrome folder, and paste this into it:
#titlebar {
visibility: collapse !important;
}
#TabsToolbar {
visibility: collapse !important;
}Make sure you're signed into Firefox and have it set up just the way you want it. Change the following in about:config to enable the userChrome.css:
toolkit.legacyUserProfileCustomizations.stylesheets - trueThe CSS for the following can be found in this repository's css folder.
css/chatgpt.css
css/monkeytype.css
My custom settings can be found in this repository's config/monkeytype.json.
All CSS (obsidian-main.css, obsidian-plugins.css, and obsidian-bible.css) can be imported as CSS snippets in your vault's .obsidian/snippets folder. I have limited dark mode support and all my CSS is meant to work with the Adwaita theme, which you can install through the Theme option in Obsidian's settings. obsidian-plugins.css changes the appearance of certain plugins that I make use of in Obsidian, and obsidian-bible.css is meant to be used with the Bible in markdown generated by my BibleGateway-to-Obsidian script, which the NET translation of the Bible is available to be downloaded from my project.
