![firefox folder icon color firefox folder icon color](https://icon-library.com/images/flat-firefox-icon/flat-firefox-icon-23.jpg)
I think that just shows the different things you can do to the bookmarks sidebar folder icons, but Im thinking now that you can only change all of them at once and not individual folders. Mobile-config-firefox by postmarketOS and edited by me:ĪppMenu. And thanks for explaining that the sidebar will only let you change all of the folders and not each specific one. Navigate to the Applications folder either. For Mac users, opening Firefox is equally simple. Once you have located the Firefox icon, click on it to launch the browser and initiate the customization process. I hope that I have explained this well enough for those of you who are unfamiliar. Simply locate the Firefox icon in the list of installed applications or type 'Firefox' into the search bar to quickly access the browser. Everything in between /* and */ gets treated as a comment. To disable something without deleting it, you use forward slash and asterisk symbols. I used to use method 1, but now I prefer method 2, since it is easier to enable and disable individual styles without affecting the rest. Method 2: use separate css files for different styles and import them into the userChrome.css file Method 1: type/paste all code into the userChrome.css file There are two ways to use the userChrome.css file: If you don’t already use a user.js file to customize Firefox, create a text file named user.js and paste the following text into the file: user_pref("", true) Ĭopy the file into your Firefox profile folder, located here: ~/.mozilla/firefox/PROFILE.NAME/Ĭreate a folder in your Firefox profile named chrome (all lower case)Ĭreate two text files inside the chrome folder named userChrome.css and userContent.css (case sensitive) Steps to get started:Įnable this Firefox preference: Ĭopy and paste the preference into the searchbar on the pageĭouble-click the preference to toggle it from false to true or click the toggle button on the right If you’re interested in reading and understanding how CSS customization of Firefox works, you may want to start with the FirefoxCSS subreddit. I think that my edits to their code and my original code ideas are good enough to share now, and I think that at least some of you will agree. Nearly all of the code in this post comes directly from the postmarketOS mobile-config-firefox gitlab project and from the user MrOtherGuy on github (and reddit). Much of the code is conditional so that when the Librem 5 is rotated into landscape mode or connected to an external display, tv, or lapdock (like the NexDock) the mobile style reverts to the traditional Firefox desktop style. There are several different options available, some are similar to the Firefox mobile apps for Android and iOS. *about:config => have been working with CSS (cascading style sheets) to make Firefox more mobile-friendly for the Librem 5, and I think that I finally have something really nice to show off here. More info about userContent.css and userChrome.css in case you are not familiar: * In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder. You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as". Click More Icons to see more colors and folder icons. You can restore the default color of the folder by clicking the Restore Default option. The program is easy to use and can be accessed from the context menu. For example: setting the default folder icon color to yellow overwrites all other icon color settings to yellow if you place it last in the order of icon color settings (where you would normally see an if not/else type clause - at the end). Folder Marker is a free utility which lets you set different colors to different folders on your Windows 10/11 machine. txt file extension and you end up with a file named . I learned that for some settings, the order in which you write the CSS matters. In Windows saving the file is usually the only time things get more complicated because Windows can silently add a. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file. In this userContent.css text file you paste the text posted. In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). If you click this button then you open the profile folder in the Windows File Explorer. You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (fault-release). It is not that difficult to create userContent.css if you have never used it.