{"id":13475190,"url":"https://github.com/Aris-t2/CustomCSSforFx","last_synced_at":"2025-03-26T23:30:38.620Z","repository":{"id":39351426,"uuid":"105747087","full_name":"Aris-t2/CustomCSSforFx","owner":"Aris-t2","description":"Custom CSS tweaks for Firefox","archived":false,"fork":false,"pushed_at":"2025-03-17T16:29:46.000Z","size":3694,"stargazers_count":1944,"open_issues_count":9,"forks_count":185,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-03-17T17:37:31.408Z","etag":null,"topics":["css-files","firefox","userchrome"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aris-t2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-GPL-v3","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-04T08:36:41.000Z","updated_at":"2025-03-17T16:28:12.000Z","dependencies_parsed_at":"2023-10-04T13:17:10.206Z","dependency_job_id":"b8b24b57-6cc5-467b-b311-c9726c2636d8","html_url":"https://github.com/Aris-t2/CustomCSSforFx","commit_stats":null,"previous_names":[],"tags_count":327,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aris-t2%2FCustomCSSforFx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aris-t2%2FCustomCSSforFx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aris-t2%2FCustomCSSforFx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aris-t2%2FCustomCSSforFx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aris-t2","download_url":"https://codeload.github.com/Aris-t2/CustomCSSforFx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245753810,"owners_count":20666816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-files","firefox","userchrome"],"created_at":"2024-07-31T16:01:18.144Z","updated_at":"2025-03-26T23:30:35.267Z","avatar_url":"https://github.com/Aris-t2.png","language":"CSS","funding_links":["https://www.paypal.me/tkpay"],"categories":["CSS"],"sub_categories":[],"readme":"## Downloads for Firefox\n\n- **[CustomCSSforFx - current release \u0026 changelog](https://github.com/Aris-t2/CustomCSSforFx/releases)** - **[Last version with 102 ESR support](https://github.com/Aris-t2/CustomCSSforFx/releases/tag/4.2.8)**  \n- **[Custom JavaScript scripts for Firefox](https://github.com/Aris-t2/CustomJSforFx)** - **[NoiaButtons CSS tweaks](https://github.com/Aris-t2/NoiaButtons)**  \n\n\n## If you want to support this project, [Paypal Me](https://www.paypal.me/tkpay).\n\n\n## License\n\nThis project is dual-licensed under the GPLv3 and MPL 2.0, see the terms of the LICENSE files.  \n\n\n## Instructions / Howto / Readme\n\n- [Unlock custom CSS usage](#unlock-custom-css-usage)\n- [WebExtensions can not modify Firefox appearance properly](#webextensions-can-not-modify-firefox-appearance-properly)\n- [Where to find Firefox profile folder? The correct location for user styles.](#where-to-find-firefox-profile-folder-the-correct-location-for-user-styles)  \n- [How to use custom user styles?](#how-to-use-custom-user-styles)  \n- [How to find item ids and attributes?](#how-to-find-item-ids-and-attributes)  \n- [How to modify custom user styles?](#how-to-modify-custom-user-styles)  \n- [Firefox Color (compatible with default color preset of CustomCSSforFx)](https://color.firefox.com/)    \n\n## Unlock custom CSS usage\n\n`about:config` \u003e `toolkit.legacyUserProfileCustomizations.stylesheets` \u003e `true`  \n\n## WebExtensions can not modify Firefox appearance properly\n\nThe only way to modify ui is adding custom CSS code to **userChrome.css** and **userContent.css** files inside browsers profile folder.  \nKeep in mind CSS code can not create entirely new items, buttons or toolbars. It only can modify already present ui items.  \n\n## Where to find Firefox profile folder? The correct location for user styles.\n\n**1.** Find your profile folder ('profile names are different for everyone').  \n`about:support \u003e Profile Folder \u003e Open Folder`  \nor `about:profiles \u003e Root Directory \u003e Open Folder`  \n\n**2.** User styles belong into `\\chrome\\` folder. Create it, if there is none yet. It should look like this afterwards:  \n`\\ PROFILE FOLDER NAME \\chrome\\`  \n\n**3.** Copy `userChrome.css`, `userContent.css` and `\\config\\`, `\\css\\`, `\\image\\` folders into `\\chrome\\` folder. It should look like this afterwards:  \n`\\chrome\\config\\`  \n`\\chrome\\css\\`  \n`\\chrome\\image\\`  \n`\\chrome\\userChrome.css`  \n`\\chrome\\userContent.css`  \n\n(Optional) Profile folders location on drive:  \n**Windows**  \n`C:\\Users\\ USERNAME \\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\ PROFILE FOLDER NAME \\`  \nHidden files must be visible to see `AppData` folder. Alternatively open `%APPDATA%\\Mozilla\\Firefox\\Profiles\\` from explorers location bar.  \n**Linux**  \n`/home/ username /.mozilla/firefox/ profile folder name /`  \nHidden files must be visible to see `.mozilla` folder.  \n**Mac OS X**  \n`~\\Library\\Mozilla\\Firefox\\Profiles\\ PROFILE FOLDER NAME \\` or  \n`~\\Library\\Application Support\\Mozilla\\Firefox\\Profiles\\ PROFILE FOLDER NAME \\`  \n`\\Users\\ USERNAME \\Library\\Application\\Support\\Firefox\\Profiles\\`  \n\n## How to use custom user styles?\n\nThe _userChrome.css_ and _userContent.css_ files works like an options\\configurations file. All main \"features\" can be enabled and disabled there.  \nEdit _userChrome.css_ and _userContent.css_ with any text editor (**[Notepad++](https://notepad-plus-plus.org/download/)** recommended on Windows) and enable or disable any feature you like by modifying, removing or outcommenting available `@import` strings.  \nRestart Firefox after every modification for changes to take effect.  \n\n**Example**  \nIf \"classic button appearance for navigation toolbar buttons\" should be \u003cu\u003eenabled\u003c/u\u003e, the corresponding line has to look like this:  \n`@import \"./css/buttons/buttons_on_navbar_classic_appearance.css\"; /**/`  \n\nIf \"classic button appearance for navigation toolbar buttons\" should be \u003cu\u003edisabled\u003c/u\u003e, the corresponding line has to look like this:  \n`/* @import \"./css/buttons/buttons_on_navbar_classic_appearance.css\"; /**/`  \n\nNote  \nCode between `/*` and `*/` won't be used by Firefox unless there are other `/*` or `*/` inbetween.  \n\n## How to find item ids and attributes?\n\nEnable once:  \n1\\. Tools \u003e WebDeveloper \u003e Toggle Tools \u003e 'Customize Tools and get help button' (= button with three dots) \u003e Settings \u003e Enable browser chrome and add-on debugging toolboxes  \n2\\. Tools \u003e WebDeveloper \u003e Toggle Tools \u003e 'Customize Tools and get help button' (= button with three dots) \u003e Settings \u003e Enable remote debugging  \n\nor set these two in about:config to true  \n\nabout:config \u003e devtools.chrome.enabled \u003e true  \nabout:config \u003e devtools.debugger.remote-enabled \u003e true  \n\nHit `Ctrl+Alt+Shift+I` or open 'Tools \u003e WebDeveloper \u003e Browser Toolbox'.  \n\nInspect ui or web content.  \n\nForce popups to stay open for inspection: \nClick on 'Customize Tools and get help button' (= button with three dots) and select 'Disable popup auto-hide'.  \n\n## How to modify custom user styles?\n\nOpen CSS files with a text editor. Look through the code and change values the way you need.  \nSome files contain additional instructions about how to tweak the ui for individual cases.  \nRestart Firefox for changes to take effect.  \n\n_Example_  \nOpen `./css/tabs/classic_squared_tabs.css` file  \nLook for `/* unloaded/pending tabs color *//*`  \nRemove `/*` at lines end to make that part of the code active. Save the file and restart Firefox.  \n\n_Example 2_  \nOpen `userChrome.css` file  \nLook for `@import \"./css/tabs/classic_squared_tabs.css\"; /**/`  \nAdd `/*` at lines start to disable 'classic squared tabs' appearance.  \nThe result should look like `/* @import \"./css/tabs/classic_squared_tabs.css\"; /**/`  \n  \n_Example 3_  \nOpen `userChrome.css` file    \nLook for `/* @import \"./css/locationbar/reader_alternative_icon.css\"; /**/`  \nRemove `/*` at lines start to enable the alternative reader icon appearance.  \nThe result should look like `@import \"./css/locationbar/reader_alternative_icon.css\"; /**/` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAris-t2%2FCustomCSSforFx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAris-t2%2FCustomCSSforFx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAris-t2%2FCustomCSSforFx/lists"}