THIS DID NOT WORK – BUT WILL REVIEW LATER
Github – lots of info
https://github.com/Aris-t2/CustomCSSforFx
https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/
How This Works
RELATED: *Firefox Quantum Isn't Just "Copying" Chrome: It's Much More Powerful*
Firefox’s userChrome.css file is a cascading style sheet (CSS) file that Firefox uses. While style sheets are normally applied to web pages, this particular style sheet is applied to Firefox’s user interface. It allows you to change the appearance and layout of everything surrounding the webpage iteslf. You can’t actually add any features; you can only modify what’s already there to change, hide, or move it.
This has nothing to do with Google Chrome. “Chrome” refers to the user interface of the web browser, which is what Google Chrome was named after.
The userChrome.css file has existed in Firefox for a long time, but it’s taken on renewed importance with Firefox Quantum. Many tweaks that could previously be accomplished by browser add-ons can now only be accomplished by editing the userChrome.css file.
Where to Find Tweaks
While you could create your own tweaks if you understand CSS code and how Firefox’s interface was designed, you can also just find tweaks online. If you want to make a certain change, someone else has probably already figured out how to do it and written the code.
Here are some resources to get you started:
- Sample Tweaks from userChrome.org: A short list of interesting tweaks that demonstrate the power of userChrome.css.
- Classic CSS Tweaks: A repository of userChrome.css tweaks from the author of the Classic Theme Restorer extension, which no longer functions on Firefox Quantum.
- userChrome Tweaks: A collection of interesting Firefox tweaks.
- FirefoxCSS on Reddit: This subreddit is a community for discussing tweaks. You can search the subreddit to find other people’s tweaks, see what people are sharing, and even ask for input if you can’t find a tweak you really want.
- Guide to Editing Your Context Menu: Instructions for removing items from Firefox’s context menu and changing their order in the list, taken from the FirefoxCSS subreddit.
ADVERTISEMENT
Bear in mind that older versions of Firefox had a different interface. Older userChrome.css tweaks you find online may not function on Firefox 57 and later, also known as Firefox Quantum.
If you know what you’re doing with CSS, you can enable the browser toolbox to inspect the Firefox browser’s chrome. This will provide the information you need to customize various browser interface elements with your own CSS code.
How to Create Your userChrome.css File
The userChrome.css file does not exist by default, so once you have a tweak or two you want to try out, you first have to create the file in the appropriate location inside your Firefox profile folder.
Update: Since Firefox 69, you must go into about:config and set “toolkit.legacyUserProfileCustomizations.stylesheets” to “true” to enable these customizations. If you don’t, Firefox will ignore your userChrome.css and userContent.css files.
To launch your Firefox profile folder, click menu > Help > Troubleshooting Information in Firefox.
Click the “Open Folder” button to the right of Profile Folder to open it. (On macOS or Linux, you’ll see a “Show in Finder” or “Open Directory” button instead. The following instructions show the process on Windows, but it’s basically the same on Mac and Linux—you’ll just be using a different file manager and text editor.)
ADVERTISEMENT
If you see a folder named “chrome” in the profile folder that appears, double-click it. However, you probably won’t, as this folder isn’t created by modern versions of Firefox.
To create the folder, right-click in the right pane and select New > Folder. Name it “chrome”, press Enter, and then double-click it.
RELATED: *How to Make Windows Show File Extensions*
You’ll need to tell Windows to show you file extensions, if you haven’t already. Windows hides file extensions by default to simplify things. This step isn’t necessary on macOS or Linux, which show this information by default.
On Windows 8 or 10, you can simply click the “View” tab on the ribbon and check the “File name extensions” box to make them visible. On Windows 7, click Organize > Folder and search options, click the “View” tab, and uncheck “Hide extensions for known file types”.
You will now create the userChrome.css file, which is really just a blank text file with the .css extension instead of the .txt extension.
To do so, right-click in the right pane here and select New > Text Document. Name it “userChrome.css” making sure to remove the .txt file extension.
Windows will warn you that you’re changing the file’s extension and this may be a problem for certain types of files. Click “Yes” to confirm your change.
ADVERTISEMENT
On macOS or Linux, create an empty text file with the same name.
How to Edit the userChrome.css File
You can use any text editor to edit the userChrome.css file. The Notepad text editor included with Windows works just fine. If you want a more powerful text editor with more features, we like Notepad++.
To edit the file in Notepad, right-click it and select “Edit”.
Add whatever tweaks you want to the file by copying and pasting them in. If you add multiple tweaks, be sure to add them all on their own lines.
Once you’re done, save the file by clicking File > Save in Notepad.
Whenever you edit your userChrome.css file, you will have to close all open Firefox windows and relaunch Firefox for your changes to take effect.
ADVERTISEMENT
If you find yourself coming back to the “chrome” folder frequently to edit your userChrome.css file, you may want to create a desktop shortcut to the folder or add it to the “Quick access” folders in File Explorer.
The userContent.css File
Firefox also has a userContent.css file you can edit, and you may stumble across some tweaks that say they’re for the userContent.css file.
To use this file, just create a file named “userContent.css” in the same folder as your Chrome folder. Tweaks you place in this file affect Firefox’s internal “content pages”, like the New Tab and Options pages.
Help, I Broke Something!
If you ever encounter a problem with a tweak, you can just remove it from your userChrome.css file and restart Firefox. If that doesn’t work, you can completely delete the userChrome.css file and restart the browser to erase all your changes and get a fresh Firefox interface.
https://davidwalsh.name/firefox-user-stylesheet
Step 1: Locate and Open Profile Directory
The user stylesheet will be added to your each user profile, not the browser code itself; this makes sense since each profile may want a different UI modifications. In the address bar, visit about:support and click Profile Folder's "Show in Finder" (or likewise) button:
The directory will be opened on your system in Finder (Mac) or Explorer (Windows).
Step 2: Create chrome Directory
Create a chrome directory within the designated profile directory which will host the necessary userContent.css file:
Having the userContent.css file in this directory will allow the user stylesheet to not be lost during Firefox upgrades.
Step 3: Create userContent.css
Firefox adds the userContent.css file on every page, if it exists, so add userContent.css within the chrome directory. This file should host all modifications to any page you visit, so don't create overly broad CSS selectors which will apply to every website.
/* an overly aggressive style just to prove it works */
body {
background: pink !important;
}
Step 4: Update about:config
In the address bar, open about:config and set the toolkit.legacyUserProfileCustomizations.stylesheets setting to true.
Step 5: Restart Firefox
User styles aren't applied to sites until you restart Firefox. Once Firefox has been restarted, the styles in your userContent.css will be applied to the page.
Step 6: Show Browser Styles
Lastly, open DevTools, click the three-dot menu, and choose "Settings". Under "Inspector", check the "Show Browser Styles" checkbox:
Bonus: userChrome.css
While the userContent.css allows the user to set CSS for all page content, you can also create a userChrome.css file which is applied to the browser chrome.
The ability to easily create a user stylesheet to customize any webpage is another reason to love Firefox!
How to override CSS stylesheets in Firefox
Recently we needed to add some custom styling to pages on our documentation wiki. But we wanted the styling to take effect for our authors only. Other readers should see the pages as delivered by the wiki. So I found out how you can override a web page’s CSS for your browser only.
How do you override CSS stylesheets in Firefox, why did we need to do this, and what other ways are available for overriding CSS?
How to do it in Firefox
Here’s how to override a web page’s CSS styles in your browser. You can override as few or as many of the CSS styles as you like. These changes will apply to you only. They will not affect other users of the site.
You could add the CSS (see code box below) to your browser using Firefox’s Web Developer, or Greasemonkey, or another web developer tool. But then the changes you make are temporary – they last only for a single session.
Instead, when using Firefox, you can put your custom CSS into the userContent.css file on your own computer. That file is located in the chrome folder of your Firefox profile. Provided you include the ‘!important‘ directive, the CSS in this file will override the CSS applied by the designer of the web page.
I’m using Firefox on Windows 8. This works for me. To edit your your userContent.css file:
-
First you need to find your Firefox profile. In Firefox, choose Firefox > Help > Troubleshooting Information. The “about:support” page will open.
-
Under “Application Basics”,
- On Windows and Linux, depending on Firefox version, choose Show Folder (Windows) or Open Directory (Linux) or Open Containing Folder.
- On Mac OS, choose Show in Finder
A folder will open in Windows Explorer (or I assume Finder, etc). This is your Firefox profile.
(It’s probably in a really weird spot. Mine is inC:\Users\User\AppData\Roaming\Mozilla\Firefox\Profiles\oz848lnl.default\chrome.) -
Look for the chrome folder inside your profile folder. If it’s there, open the folder. If it’s not there, add the folder and then open it.
-
Look for a file called userContent.css in the ‘chrome’ folder. If it’s there, open it in a text editor. If it’s not there, add the file and then open it in a text editor.
-
Add the CSS and wrap-around text shown below.
-
Save the file.
-
Restart Firefox.
Content of userContent.css
The first and last line are the wrap-around text required for the userContent.css file. Everything between is the CSS.
userContent.css
@-moz-document domain(YOUR.DOMAIN) {
<ADD YOUR CSS HERE>
}
Example
@-moz-document domain(confluence.atlassian.com) {
body {
font-family:'Comic Sans MS', cursive;
}
}
Alert: The above styling will make you either the most popular or the most scorned person in the world. All credit to Don Willis for the CSS. ![
Our use case
Do you keep scraping your cursor madly around the page on our documentation wiki, looking for the ‘Tools’ option? Are you worried that you don’t have edit access to the pages, because you can’t see the ‘Edit’ button?
We have applied the so-called Sexy Docs look and feel to the documentation spaces. Sexy Docs hides the ‘Tools’ and other options, to make a smoother reading experience. At the moment, Sexy Docs is just a bunch of CSS applied to the space. We have plans to convert it to a plugin. The plugin will be able to make the options visible to logged-in users who have the relevant permissions.
In the meantime, you need to override the CSS if you want the options to be visible without your having to hover over them.
Content of userContent.css, including the CSS to show the wiki tools
The first and last line are the wrap-around text required for the userContent.css file. Everything between is the CSS. In this case, it contains the styles we need for our Sexy Docs override.
userContent.css
@-moz-document domain(confluence.atlassian.com) {
scrollbar[orient="vertical"] scrollbarbutton,
scrollbar[orient="vertical"] slider {
width: 25px !important;
height: 25px !important;
-moz-appearance: none !important;
}
#navigation ul.ajs-menu-bar:hover
{
opacity : 1.0 !important;
}
#navigation ul.ajs-menu-bar
{
opacity : 0.5 !important;
}
#browse-menu-link
{
opacity : 0.5 !important;
}
#browse-menu-link:hover
{
opacity : 1 !important;
}
.page-metadata
{
opacity : 0.5 !important;
}
.page-metadata:hover
{
opacity : 1.0 !important;
}
}
This CSS makes the following UI elements always visible in light grey, and appear darker on hover:
- Edit, Share and Tools options
- Browse menu
- Page byline (Author, date and time information under the heading)
Hit a CAC page, such as this one: https://confluence.atlassian.com/display/DOC/Planning+for+Confluence+5. You should see the required menu items, as shown in the “before and after” images below.
Before and after
Before:
Unaltered Sexy Docs style
After:
Overridden with custom CSS
Other ways to add the CSS
One of my colleagues pointed out that you can use the Stylish extension in Chrome, and add the CSS via the Stylish configuration screen. There’s a Stylish for Firefox too.