From 7a0c36eb3527e7890c8ccc6b3410db5ea7eab400 Mon Sep 17 00:00:00 2001 From: Sigmundur Date: Sun, 7 Mar 2021 08:36:49 +0200 Subject: [PATCH] README: Move setup to the top right after intro (#93) * README: Move setup to the top right after intro Updated it from my own setup experience, added concrete steps Also added the fact that restart may be needed (don't expect to see changes after just creating and saving the file) Sorry Windows users :D maybe someone can add Windows-specific things to the steps. * Update README.md typo fix --- README.md | 44 +++++++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 7fe7750..f4b210c 100644 --- a/README.md +++ b/README.md @@ -6,32 +6,32 @@ In the case that a particular style relies on another style, the fact will be no Stylesheets in this repository are tested only on Windows 10 and to a lesser amount on Linux. Most of them should also work on OSX and Windows7, but there may be wrong behavior especially when native widgets such as window titlebar or window control buttons are being styled. -# Style categories - -The files themselves are only separated to *chrome* and *content* sub-folders. Files have a one or more *tag* applied to them as listed in `tags.csv` file. - -You can browse the tag-categorized files by [using this simple ui](https://mrotherguy.github.io/firefox-csshacks/) - -# Loading user*.css files +# Setup 0. Go to about:config and set the pref `toolkit.legacyUserProfileCustomizations.stylesheets` to `true` to make Firefox load userChrome.css and userContent.css +0. Find your profile folder and + * If Firefox is running you can find by going to `about:support` and there should be a button with label "Open Folder" under application basics + * On command-line, you can also find your firefox executable and run `firefox -ProfileManager` +0. Clone this repository in the profile folder + * `git clone https://github.com/MrOtherGuy/firefox-csshacks.git` on command-line (first `cd` into the profile directory of course!) +0. Rename the newly cloned repo to `chrome` + * `mv firefox-csshacks chrome` +0. `userChrome.css` and `userContent.css` files should be created inside this chrome-folder. + * You can copy-paste and modify lines from `userChrome_example.css` and `userContent_example.css` to get started +0. If Firefox is running, restart Firefox so that the changes take effect -1. Find your profile folder, if Firefox is running you can find by going to `about:support` and there should be a button with label "Open Folder" under application basics -2. Create a new folder to the profile folder and name it "chrome" -3. `userChrome.css` and `userContent.css` files should be created inside this chrome-folder. - -Clone this repository or individual files inside that newly created chrome-folder. +As an alternative to cloning this repository you can set up the `chrome` folder manually. In the end you should have a folder structure like this: ``` -|_chrome -| |_chrome -| |_content -| |_userChrome.css -| |_userContent.css -|_extensions -|_prefs.js +|_ chrome +| |_ chrome +| |_ content +| |_ userChrome.css +| |_ userContent.css +|_ extensions +|_ prefs.js ... all other profile folders and files ... @@ -39,6 +39,12 @@ all other profile folders and files In short, create a parent chrome folder to the same directory where `prefs.js` is - the main profile folder. Firefox loads `userContent.css` and `userChrome.css` files only from that `chrome`-folder. +# Style categories + +The files themselves are only separated to *chrome* and *content* sub-folders. Files have a one or more *tag* applied to them as listed in `tags.csv` file. + +You can browse the tag-categorized files by [using this simple ui](https://mrotherguy.github.io/firefox-csshacks/) + # Usage Stylesheets are divided in to chrome and content folders. The difference is that styles inside "content" affect web-pages whereas styles inside "chrome" affect browser UI.