How to customize firefox’s user interface with userchrome. css

How to customize firefox’s user interface with userchrome. css

Giao diện của Firefox Quantum vẫn cực kỳ tùy biến nhờ vào tệp userChrom.css của nó. Bạn có thể chỉnh sửa tệp này để ẩn các mục menu không mong muốn, di chuyển thanh tab bên dưới thanh công cụ điều hướng, xem nhiều hàng trên thanh công cụ dấu trang của bạn và làm những việc khác thường không thể thực hiện được.

Cách thức hoạt động

Tệp userChrome.css của Firefox là tệp kiểu bảng xếp tầng (CSS) mà Firefox sử dụng. Mặc dù các biểu định kiểu thường được áp dụng cho các trang web, nhưng biểu định kiểu cụ thể này được áp dụng cho giao diện người dùng của Firefox. Nó cho phép bạn thay đổi giao diện và bố cục của mọi thứ xung quanh trang web iteslf. Bạn thực sự không thể thêm bất kỳ tính năng nào; bạn chỉ có thể sửa đổi những gì đã có để thay đổi, ẩn hoặc di chuyển nó.

Điều này không có gì để làm với Google Chrome. Chrome Chrome đề cập đến giao diện người dùng của trình duyệt web, đó là tên Google Chrome được đặt theo tên.

Tệp userChrome.css đã tồn tại trong Firefox từ lâu, nhưng nó được coi là có tầm quan trọng mới với Firefox Quantum. Nhiều chỉnh sửa trước đây có thể được thực hiện bằng các tiện ích bổ sung của trình duyệt chỉ có thể được thực hiện bằng cách chỉnh sửa tệp userChrome.css.

Nơi tìm Tweaks

Mặc dù bạn có thể tạo các chỉnh sửa của riêng mình nếu bạn hiểu mã CSS và cách giao diện của Firefox được thiết kế, bạn cũng có thể tìm thấy các chỉnh sửa trực tuyến. Nếu bạn muốn thực hiện một thay đổi nhất định, người khác có thể đã tìm ra cách thực hiện và viết mã.

Dưới đây là một số tài nguyên để giúp bạn bắt đầu:

  • Tinh chỉnh mẫu từ userChrome.org: Một danh sách ngắn các tinh chỉnh thú vị thể hiện sức mạnh của userChrome.css.
  • Tinh chỉnh CSS cổ điển: Kho lưu trữ các chỉnh sửa userChrom.css từ tác giả của tiện ích mở rộng Trình phục hồi chủ đề cổ điển, không còn hoạt động trên Firefox Quantum.
  • userChrom Tweaks: Một bộ sưu tập các tinh chỉnh Firefox thú vị.
  • FirefoxCSS trên Reddit: Subreddit này là một cộng đồng để thảo luận về các chỉnh sửa. Bạn có thể tìm kiếm subreddit để tìm các chỉnh sửa của người khác, xem những gì mọi người đang chia sẻ và thậm chí yêu cầu nhập liệu nếu bạn không thể tìm thấy một chỉnh sửa mà bạn thực sự muốn.
  • Hướng dẫn chỉnh sửa Menu ngữ cảnh của bạn: Hướng dẫn xóa các mục khỏi menu ngữ cảnh của Firefox và thay đổi thứ tự của chúng trong danh sách, được lấy từ subreddit của FirefoxCSS.

Hãy nhớ rằng các phiên bản cũ hơn của Firefox có giao diện khác. Các chỉnh sửa userChrome.css cũ hơn mà bạn tìm thấy trực tuyến có thể không hoạt động trên Firefox 57 trở lên, còn được gọi là Firefox Quantum.

Nếu bạn biết bạn đang làm gì với CSS, bạn có thể kích hoạt hộp công cụ trình duyệt để kiểm tra chrome của trình duyệt Firefox. Điều này sẽ cung cấp thông tin bạn cần để tùy chỉnh các yếu tố giao diện trình duyệt khác nhau bằng mã CSS của riêng bạn.

Cách tạo tệp userChrom.css của bạn

Tệp userChrome.css không tồn tại theo mặc định, vì vậy một khi bạn có một hoặc hai điều chỉnh bạn muốn thử, trước tiên bạn phải tạo tệp ở vị trí thích hợp trong thư mục hồ sơ Firefox của bạn.

Để khởi chạy thư mục hồ sơ Firefox của bạn, nhấp vào menu> Trợ giúp> Thông tin khắc phục sự cố trong Firefox.

How to customize firefox’s user interface with userchrome. css

Nhấp vào nút Thư mục mở của Thư mục ở bên phải Thư mục Hồ sơ để mở. (Trên macOS hoặc Linux, thay vào đó, bạn sẽ thấy nút Hiển thị trong Finder Finder hoặc Nút Mở Thư mục Mở. Các hướng dẫn sau đây cho thấy quy trình trên Windows, nhưng về cơ bản là giống nhau trên Mac và Linux trình quản lý tập tin và trình soạn thảo văn bản khác nhau.)

How to customize firefox’s user interface with userchrome. css

Nếu bạn thấy một thư mục có tên là Chrome chrome trong thư mục hồ sơ xuất hiện, bấm đúp vào nó. Tuy nhiên, có lẽ bạn sẽ không, vì thư mục này không được tạo bởi các phiên bản hiện đại của Firefox.

Để tạo thư mục, nhấp chuột phải vào khung bên phải và chọn Mới> Thư mục. Đặt tên cho nó là chrome chrome, nhấn Enter, sau đó bấm đúp vào nó.

How to customize firefox’s user interface with userchrome. css

Bạn sẽ cần yêu cầu Windows hiển thị cho bạn các tiện ích mở rộng tệp, nếu bạn chưa có. Windows ẩn các phần mở rộng tệp theo mặc định để đơn giản hóa mọi thứ. Bước này không cần thiết trên macOS hoặc Linux, mặc định hiển thị thông tin này.

Trên Windows 8 hoặc 10, bạn có thể chỉ cần nhấp vào tab Chế độ xem View trên ruy-băng và kiểm tra phần mở rộng tên Tệp Tệp Hộp để hiển thị chúng. Trên Windows 7, nhấp vào Sắp xếp> Tùy chọn thư mục và tìm kiếm, nhấp vào tab Xem Chế độ xem và bỏ chọn các tiện ích mở rộng Ẩn cho các loại tệp đã biết.

How to customize firefox’s user interface with userchrome. css

Bây giờ bạn sẽ tạo tệp userChrome.css, đây thực sự chỉ là một tệp văn bản trống có phần mở rộng .css thay vì phần mở rộng .txt.

Để làm như vậy, nhấp chuột phải vào khung bên phải ở đây và chọn Mới> Tài liệu văn bản. Đặt tên cho nó là user userRrom.css, hãy đảm bảo xóa phần mở rộng tệp .txt.

Windows sẽ cảnh báo bạn rằng bạn đang thay đổi phần mở rộng của tệp và đây có thể là sự cố đối với một số loại tệp nhất định. Nhấp vào Có Có để xác nhận thay đổi của bạn.

Trên macOS hoặc Linux, tạo một tệp văn bản trống có cùng tên.

How to customize firefox’s user interface with userchrome. css

Cách chỉnh sửa tệp userChrome.css

Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào để chỉnh sửa tệp userChrome.css. Trình soạn thảo văn bản Notepad có trong Windows hoạt động tốt. Nếu bạn muốn một trình soạn thảo văn bản mạnh mẽ hơn với nhiều tính năng hơn, chúng tôi thích Notepad++.

Để chỉnh sửa tệp trong Notepad, nhấp chuột phải vào tệp và chọn Chỉnh sửa Chỉnh sửa.

How to customize firefox’s user interface with userchrome. css

Thêm bất kỳ chỉnh sửa nào bạn muốn vào tệp bằng cách sao chép và dán chúng vào. Nếu bạn thêm nhiều chỉnh sửa, hãy đảm bảo thêm tất cả chúng trên các dòng riêng của chúng.

How to customize firefox’s user interface with userchrome. css

Khi bạn đã hoàn tất, hãy lưu tệp bằng cách nhấp vào Tệp> Lưu trong Notepad.

How to customize firefox’s user interface with userchrome. css

Інтерфейс Firefox Quantum все ще дуже налаштований завдяки файлу userChrome.css. Цей файл можна редагувати, щоб приховати небажані елементи меню, перемістити панель вкладок під панеллю навігації, переглянути кілька рядків на панелі закладок і робити інші речі, які зазвичай неможливо.

Як це працює

Файл userChrome.css Firefox є каскадним файлом стилів (CSS), який використовує Firefox. Хоча таблиці стилів зазвичай застосовуються до веб-сторінок, ця таблиця стилів застосовується до інтерфейсу користувача Firefox. Вона дозволяє змінювати зовнішній вигляд і розташування всього, що оточує веб-сторінку iteslf. Ви не можете реально додавати будь-які функції; ви можете змінити лише те, що вже є, щоб змінити, приховати або перемістити його.

Це не має відношення до Google Chrome. “Chrome” відноситься до інтерфейсу користувача веб-переглядача, на який називається Google Chrome.

Файл userChrome.css існував у Firefox протягом тривалого часу, але він набув поновленого значення з Firefox Quantum. Багато налаштувань, які раніше можна було виконати за допомогою додатків браузера, тепер можна виконати лише шляхом редагування файлу userChrome.css.

Де знайти налаштування

Хоча ви можете створювати свої власні налаштування, якщо ви розумієте, що код CSS і як був розроблений інтерфейс Firefox, ви також можете просто знайти налаштування в Інтернеті. Якщо ви хочете зробити певну зміну, хтось ще, напевно, вже зрозумів, як це зробити і написав код.

Нижче наведено кілька ресурсів для початку роботи:

  • Приклади налаштувань від userChrome.org: короткий список цікавих налаштувань, які демонструють силу userChrome.css.
  • Класичні налаштування CSS: сховище налаштувань userChrome.css від автора розширення Classic Restorer, який більше не функціонує у Firefox Quantum.
  • userChrome Tweaks: колекція цікавих налаштувань Firefox.
  • FirefoxCSS на Reddit: це subreddit є спільнотою для обговорення налаштувань. Ви можете виконати пошук у підреєстрації, щоб знайти інші чужі налаштування, подивитися, що люди спільно використовують, і навіть попросити ввести, якщо ви не можете знайти потрібний вам параметр.
  • Керівництво по редагуванню контекстного меню: Інструкції для видалення елементів з контекстного меню Firefox і зміна їхнього порядку в списку, взятому з підреєстрації FirefoxCSS.

Майте на увазі, що у попередніх версіях Firefox був інший інтерфейс. Старіші налаштування userChrome.css, які ви знайдете в Інтернеті, можуть не працювати у Firefox 57 і пізніших версіях, також відомих як Firefox Quantum.

Якщо ви знаєте, що ви робите з CSS, ви можете включити панель інструментів браузера для перевірки хрому браузера Firefox. Це надасть інформацію, необхідну для налаштування різних елементів інтерфейсу браузера за допомогою власного коду CSS.

Як створити свій файл userChrome.css

Файл userChrome.css не існує за промовчанням, тому, як тільки у вас буде налаштовано два налаштування, потрібно спочатку створити файл у відповідному місці в папці профілю Firefox..

Щоб запустити папку профілю Firefox, натисніть меню> Довідка> Інформація про усунення несправностей у Firefox.

How to customize firefox’s user interface with userchrome. css

Натисніть кнопку “Відкрити папку” праворуч від папки профілю, щоб відкрити її. (На MacOS або Linux, замість цього ви побачите кнопку “Показати у Finder” або “Відкрити каталог”. Наступні інструкції показують процес у Windows, але в основному це те ж саме на Mac і Linux – ви просто будете використовувати різні файловий менеджер і текстовий редактор.)

How to customize firefox’s user interface with userchrome. css

Якщо в папці профілю з’являється папка з назвою “chrome”, двічі клацніть її. Однак, ймовірно, цього не буде, оскільки ця папка не створена сучасними версіями Firefox.

Щоб створити папку, клацніть правою кнопкою миші на правій панелі та виберіть New> Folder. Назвіть його “chrome”, натисніть клавішу Enter, а потім двічі клацніть на ньому.

How to customize firefox’s user interface with userchrome. css

Якщо ви ще цього не зробили, вам потрібно повідомити Windows, щоб вона показувала розширення файлів. Windows приховує файлові розширення за умовчанням для спрощення речей. Цей крок не потрібний на MacOS або Linux, які показують цю інформацію за замовчуванням.

У Windows 8 або 10 можна просто натиснути вкладку «Перегляд» на стрічці і встановити прапорець «Розширення імен файлів», щоб зробити їх видимими. У Windows 7 клацніть Організувати> Параметри папок і пошуку, перейдіть на вкладку “Перегляд” і зніміть прапорець “Приховати розширення для відомих типів файлів”.

How to customize firefox’s user interface with userchrome. css

Тепер ви створюєте файл userChrome.css, який є насправді лише пустим текстовим файлом з розширенням .css замість розширення .txt..

Щоб зробити це, клацніть правою кнопкою миші на правій панелі, а потім виберіть Новий> Текстовий документ. Назвіть його “userChrome.css”, переконавшись, що видалити розширення .txt.

Windows попередить вас, що ви змінюєте розширення файлу, і це може бути проблемою для певних типів файлів. Натисніть “Так”, щоб підтвердити свою зміну.

На MacOS або Linux створіть порожній текстовий файл з тим же ім’ям.

How to customize firefox’s user interface with userchrome. css

Як змінити файл userChrome.css

Для редагування файлу userChrome.css можна використовувати будь-який текстовий редактор. Текстовий редактор “Блокнот”, що входить до складу Windows, чудово працює. Якщо ви хочете більш потужний текстовий редактор з більшою кількістю функцій, нам подобається Блокнот++.

Щоб редагувати файл у Блокноті, клацніть його правою кнопкою миші та виберіть “Редагувати”.

How to customize firefox’s user interface with userchrome. css

Додайте потрібні налаштування до файлу, скопіювавши та вставши їх. Якщо додати кілька налаштувань, обов’язково додайте їх усі на своїх лініях.

How to customize firefox’s user interface with userchrome. css

Після цього збережіть файл, натиснувши Файл> Зберегти в Блокноті.

Last Updated on December 23, 2018

New to Linux and the open source world? We have compiled a huge list of resources to help you go through Linux and its distributions. Visit the full Linux guide page right now.

Subscribe to Monthly Newsletter

Once per month, you can subscribe to recieve our newsletter that contains everything we published during the month. Don’t worry, we don’t spam.

Thank you!

You have successfully joined our subscriber list.

The new Firefox Quantum browser from Mozilla brought tons of new features and updates. It is now faster, lighter and more organized than ever it was before. However, with the new Firefox Quantum technologies which detached the older APIs used for complete themes and other add-ons, users were having a hard time customizing the browser’s interface.

Fortunately, you can easily customize Firefox +57 interface by modifying the default “skin”. You can simply create a bunch of CSS rules which change the Firefox interface however you like. We’ll learn together how to do it in this tutorial.

Table of Contents

Step 1: Locate your userChrome.css File

To make it easy on you, open the Firefox main menu and go to Help –> Troubleshooting Information . Under Profile Directory click the “Open Directory” button. Which should open the folder of your current Firefox profile:

How to customize firefox’s user interface with userchrome. css

Now, create a folder called chrome , and inside that folder, create an empty file called userChrome.css . You can now start putting all the CSS rules you want in that file and they will be automatically loaded by Firefox when it starts (if you modify the file, you have to restart Firefox).

Step 2: Enable Browser Toolbox

In order to write CSS rules related to Firefox interface, you need to know the available CSS selectors that you can use. For example, can we use #tab-bar to modify the CSS of the Firefox tab bar? What possible selectors are there? That’s why you need to enable an option called “Browser Toolbox”.

To do this, open the “Inspect Element” option from the context menu (right click anywhere on any opened web page), and open settings like the following:

How to customize firefox’s user interface with userchrome. css

Scroll down to “Advanced options” and check both the “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging” options as you can see in the picture:

How to customize firefox’s user interface with userchrome. css

Now open the browser toolbox from Web Developer –> Browser Toolbox . A confirmation message like this will appear, hit OK:

How to customize firefox’s user interface with userchrome. css

Finally, the browser toolbox window should appear, which you can use to analyze the structure of Firefox interface:

How to customize firefox’s user interface with userchrome. css

Click on the inspector button (the first button on the left) in order to be able to inspect elements by your mouse:

After that, you can put your mouse pointer on any place in your browser window in order to learn it unique ID. For example, if you put it on the navigation bar, you’ll see a red dotted line around it:

How to customize firefox’s user interface with userchrome. css

Notice the id=”nav-bar” CSS selector in the code, it means that you can use #nav-bar in your userChrome.css file to modify the look of the navigation bar. For example, say that I want to change the background of the navigation bar into complete white, what I’ll add in my userChrome.css file is the following:

Remember always to use !important in each CSS rule you create in order to overwrite the default Firefox skin rules. Otherwise, you may go crazy about why your CSS is not being applied. Also don’t forget to restart Firefox after each modification you do.

After restarting Firefox, this is what I’ll get:

How to customize firefox’s user interface with userchrome. css

Step 3: Start Playing

You now know how to create the CSS rules you need to customize any part of your browser. You can change the default skin, or modify the structure of your browser’s interface however you like.

I would recommend installing the Tab Center Redux extension which creates a sidebar for your opened tabs. After that, you can apply the following CSS rules in userChrome.css :

And here’s how your browser will look like:

How to customize firefox’s user interface with userchrome. css

Your tabs will be auto-hidden on the left side:

How to customize firefox’s user interface with userchrome. css

If you want always to see the tab bar on the left, then just replace the #sidebar-box part of the code with following code snippet:

And you’ll get a better view:

How to customize firefox’s user interface with userchrome. css

The following list of selectors for Firefox CSS should get you going:

  • #appcontent: The web view of Firefox (the web page itself).
  • #tabbrowser-tabs: The tab bar at the top of Firefox.
  • #urlbar: The URL bar in the navigation bar.
  • #identity-box: The small area in the left side of the URL bar which contains the information & connection icons.
  • #sidebar-box: The sidebar tab bar provided by the “Tab Center Redux” extension.
  • #back-button: Get back button in the navigation bar.
  • #forward-button: The forward button.
  • #reload-button: The reload button.
  • #home-button: The home button.
  • #downloads-button: The downloads button.
  • #PanelUI-menu-button: The main Firefox menubar button.

You can explore the rest of available selectors from the way we explained in step 1. Feel free to apply whatever CSS styles you want to get the look & feel you enjoy the most.

Conclusion

Although we lost the complete Firefox themes in Firefox 57, we still can customize the UI of Firefox to a very good level. In the future, we may be able to install ready themes which include ready userChrome.css modifications to customize Firefox in many different ways and combinations.

If you have any specific tip or skin you made related to that, feel free to share them in the comments.

  • STOCKTALK
  • POLITICS
  • PASTIMES

We’ve detected that you’re using an ad content blocking browser plug-in or feature. Ads provide a critical source of revenue to the continued operation of Silicon Investor. We ask that you disable ad blocking while on Silicon Investor in the best interests of our community. If you are not using an ad blocker but are still receiving this message, make sure your browser’s tracking protection is set to the ‘standard’ level.
Pastimes : Mozilla: Firefox and Thunderbird Discussion .
Public ReplyPrvt ReplyMark as Last ReadFile Previous 10Next 10PreviousNext

Firefox Quantum‘s interface is still extremely customizable thanks to its userChrome.css file. You can edit this file to hide unwanted menu items, move the tab bar below the navigation toolbar, view multiple rows on your bookmarks toolbar, and do other things that normally wouldn’t be possible.

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.

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.

To launch your Firefox profile folder, click menu > Help > Troubleshooting Information in Firefox.

How to customize firefox’s user interface with userchrome. css

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.)

How to customize firefox’s user interface with userchrome. css

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.

How to customize firefox’s user interface with userchrome. css

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”.

How to customize firefox’s user interface with userchrome. css

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.

On macOS or Linux, create an empty text file with the same name.

How to customize firefox’s user interface with userchrome. css

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”.

How to customize firefox’s user interface with userchrome. css

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.

How to customize firefox’s user interface with userchrome. css

Once you’re done, save the file by clicking File > Save in Notepad.

– Last updated on September 5, 2019 by VG

If you use userChrome.css and userContent.css files in Mozilla Firefox web browser to customize Firefox user interface (UI) and functionality and suddenly both files stopped working when you installed new version of Firefox or upgraded older version to latest Firefox version, this tutorial will help you in fixing the issue and make the files working again in Firefox.

userChrome.css and userContent.css files are used in Firefox browser to modify Firefox appearance and functionality. These files are created in Firefox profile folder and contain CSS code added by the user.

How to customize firefox’s user interface with userchrome. css

You can check out following article to learn more about these files:

We have posted several tutorials in past which utilize these files to enhance Firefox functionality and UI:

There are many Firefox users who take help of these CSS files to customize Firefox according to their requirements.

Now several Firefox users are facing a strange issue related to these files after upgrading to latest version of Firefox. Once they upgraded or installed new Firefox version, the code present in userChrome.css and userContent.css files stopped working. Now both files no longer work and the changes made by these 2 files automatically disappeared.

No matter what code the users put in these 2 files, Firefox no longer recognizes the code and doesn’t change UI or functionality which was working fine in previous versions.

If you are also facing this problem in Firefox browser, this tutorial will help you.

Actually Mozilla team has disabled support for these 2 CSS files in newer versions of Firefox browser. That’s why the code present in these files is no longer functional.

We told you about this move in UPDATE 135 in our exclusive Firefox Nightly Updates topic when Firefox 69.0 version was under development and testing.

The support for userChrome.css and userContent.css files has been disabled to speedup and improve Firefox loading/startup time and performance.

Fortunately Mozilla team has provided a built-in preference/flag to re-enable or restore support for userChrome.css and userContent.css files in Firefox so that interested users can again use both CSS files to change Firefox UI and functionality.

If you also want to bring back support for userChrome.css and userContent.css files in Firefox web browser and want to make them working again, following steps will help you:

1. Open Mozilla Firefox and type about:config in the addressbar and press Enter. It’ll show you a warning message, click on “I accept the risk!” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now type stylesheets in Search filter box and look for following preference in the window:

The preference value is set to false by default, which means the support for both CSS files is currently disabled in Firefox browser.

3. To restore support for both CSS files, double-click on toolkit.legacyUserProfileCustomizations.stylesheets preference and set it to true. Alternatively, you can right-click on the preference and select Toggle option.

How to customize firefox’s user interface with userchrome. css

That’s it. Restart Firefox browser and now both userChrome.css and userContent.css files will start working again in Firefox.

PS: If you decide to restore default settings and disable support for these CSS files in future, set the value of above mentioned preference to false.

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

Did all that and still not working. FireFox is either not seeing the .css or what I put in the .css is outdated and not working. No way to tell which one but I have added several changes just to see if it will work and nothing is having any affect. So this does not work in FF 78.

^^ I’m using both CSS files without any problem in latest Firefox version. The preference mentioned above works fine.

About the 3rd time they broke my multiple row tabs in version 81. Made a clone before updating. I put 80 back. That setting was already true. Before I just found a new userchrome file. That won’t work now if they won’t load it. What does Firefox have against multiple row tabs? A lot of people were upset way back when they crippled Tab Mix Plus. Found a fix & they keep messing that up. I am using Ubuntu 18.04.

My son gave me a newer css file at github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css . Told me to change the multirow-tab-dynamic-width to 0 & I changed the min-width to 160px. Guess this might hopefully survive the next few updates. Never understood why Firefox hasn’t made multi row an option. I remember the huge number of links complaining when they disabled Tab Mix Plus. Maybe the same reason most software comes with the WORST possible default settings you have to change! 🙂

I am using FF 86 and cannot get the old address bar back. Have tried all the options above and still doesn’t work. Any help?

If you’re using a vanilla GNOME session on Ubuntu with the Adwaita theme, and want to make Firefox look a little more at home, you can.

In fact, with a bit of custom CSS you can make Firefox look like Epiphany (aka GNOME Web), the core browser that ships with the GNOME desktop environment.

Firefox UserChrome.css

The Firefox 57 release back in November came with a huge set of changes in tow. Alongside an all-new rendering engine, multi-thread processes, new browser features and other niceties was Photon — a newer, cleaner, and modern user interface and layout.

On the negative side, Firefox 57 doesn’t allow browser add-ons to change the look or layout of the new Photon interface.

But the look of Firefox can be modified using a cascading style sheet (CSS).

Using CSS you can, among other things:

  • Hide menu items
  • Reposition the tab bar
  • Adjust sizing, spacing and margins
  • Change fonts
  • Restyle buttons
  • Add extra tab or bookmarks rows

Admittedly, editing the UserChrome.css isn’t something to be done idly, but so long as you’re careful you’re unlikely to mess things up.

Wait: do i really need to do this?

Like Google Chrome, Firefox is now great at matching whatever GTK theme you’re already using. It picks up highlight colors, reuses widgets, menus colors, and so on. There’s no real need to modify or change anything: vanilla Firefox looks great out of the box on Linux.

But — and it’s a big but — the new UI doesn’t work for everyone. Those of you who want to take GTK theme integration further, move tabs under the URL bar, prune down the menu, and so on, can do so using user a userchrome.css file.

How to Edit Firefox Userchrome.css

To make use of a custom userchrome.css style you’ll first need to know where to place it, and that’s your Firefox profile folder.

On the Firefox profile folder on Linux is located in the following directory:

To show hidden files in Nautilus you just need to press Ctrl + H (other file managers may differ).

name inside the firefox directory should be a string of random numbers and letters. If you have more than one Firefox profile you’ll have multiple profiles folders, do make sure you place the relevant files (see below) in the correct folder.

Adwaita Firefox UserChrome.css

If you use the GNOME Adwaita theme, like the look of the Web (aka Epiphany) web-browser, but don’t want to abandon Firefox you can use the (obliquely named) ‘Firefox GNOME Theme‘ user chrome style.

This style rejigs the layout of Firefox to bring it inline with the Adwaita theme and the default GNOME Web browser. It restyles navigation buttons, moves tabs below the address bar, and tweaks the color scheme.

The style supports both regular Adwaita and Adwaita dark.

This style will work on Firefox 57 (and presumably later versions, incase you’re reading from the future).

You can find more details on the style, including how to enable/disable the light and dark modes, on the Github project page:

If you want Adwaita dark simply download this zip and extract. Inside the extracted folder copy the userchrome.css, usercontent.css and UI folder to your

directory. Restart the browser.

If you want to the normal version of Adwaita download this zip and extract. Inside the extracted folder copy only the userchrome.css and UI folder to your

Next, open the css file in Gedit. Comment out the dark theme and uncomment the light theme so that the file reads like this:

Save your changes and restart Firefox.

Bonus Themes

Safari UserChrome.css

If you followed our guide on how to make Ubuntu look like a Mac you can up the Apple ante on your system somewhat by using CSS to make Firefox look more like Safari.

The following is not 100% perfect (especially while we wait for CSD) but it’s a good enough imitation:

Minimal UserChrome.css

How to customize firefox’s user interface with userchrome. css

If you’re less concerned with theme integration and more with maximum want a condensed layout with tight padding, reduced margins and a double-hight tab bar you have to choice out suFFiciently_compact style by Marcus W:

If you know of any other great userchrome.css tweaks/themes do let us know about them using the tip form, or by sharing them in the comments below.

Home » Pro User » Make Firefox Look like the GNOME Web Browser (Because Why Not, Right?)

We’re community supported and proud of it!

  • Home
    • FAQ
    • Newsletters/Alerts
    • Forums
    • About
    • MS-DEFCON System
    • Master Patch List
    • Register
    • Posts & Privacy
    • Login

userchrome.css

  • This topic has 88 replies, 9 voices, and was last updated 1 week, 5 days ago.

I am a disabled person trying to set up userchrome.css in Firefox.

Is there anyway any one can make me it and install it thru TeamViewer or send me userchrome.css. This is important to me please get back to me

I’ve never used userchrome.css.

Hoping somebody else around here has….

1 user thanked author for this post.
1 user thanked author for this post.

bbearren someone on the the internet made userchrome.css for me I am trying I can not seem to get a hold of him am looking for someone to update features for me am looking for someone who can here

  • This reply was modified 8 months, 1 week ago by sportman13 .

Post your current CSS and what you want from the mods and we’ll see what we can do.

1 user thanked author for this post.

Paul I am not not technical I see my current css is in a zip file tell me how to post it here please it is very important

  • This reply was modified 8 months, 1 week ago by sportman13 .

At the bottom of the post entry box click “Select File”
That will open Explorer on your computer.
Highlight the .zip file
Click on the “Open” button, should attach the file on the lower left of the post.

1 user thanked author for this post.

PKCano I hope I did this right I need everything updated

Looks good. Wait for Paul’s answer.

1 user thanked author for this post.

Paul here is another zip file to go with the first

Remember, we aren’t all on the same time-zone… your response may take a day or two 😉

1 user thanked author for this post.

You appear to have some alternative icons and colours via those CSS changes.

What do you now want to change?

It would be good to have some screenshots of the things you want to change. You can do this by opening Windows Snipping Tool (it is also called Snip n Sketch), making a new rectangular snip and saving the snip as a PNG, then upload it (them) in a post.

You seem more than capable so installation of the changes should present no issues for you.

1 user thanked author for this post.

Paul I did not make css myself I am not technical someone else did I can not get a hold of the person I can give you the guys site I need everything updated please here is a screenshot if you want any other screenshots please tell me this is very impotant to me

We need to know what you want changed to be able to make the mods.
Then you can paste the modified file into the appropriate location following our instructions.

1 user thanked author for this post.

Paul I need everything updated in userchrome.css I am not technical Example Find in this page feature dose not work in Firefox if you can please tell me what do I need to send you if what I posted here was not enough in the zip file do you want more info ? please tell me ? this is very important to me

Applying the changes in the markrh-aris148-chrome.zip results in some pretty ugly items – see screenshot – and doesn’t give you a screen that looks like the one you posted in #2304501.

I can’t see a way to add the icon names. Do you have any extensions installed?
Type “about:extensions” in the address bar.

1 user thanked author for this post.

Paul when you say extensions you meant add ons in Firefox theses ?

This is an old version of Aris’ CSS mods for Firefox, which are meant to replace the functionality (to the degree they can) of Aris’ classic extension, Classic Theme Restorer. You can download the whole thing at the URL in the file and uncomment the lines in the userChrome.css file to enable those bits.

The version of the custom CSS is quite old, so it is not surprising that things do not work as expected. Mozilla’s decision to eliminate extensions that can modify the UI has made this a great deal harder for anyone who doesn’t like what Firefox looks like in the post Quantum era. It used to be that you could use CTR and simply change everything you want via the menus, and generally it would just keep working from then on. Aris would have to keep fixing the addon to deal with Mozilla’s changes, but the end user wouldn’t have to.

Now Aris has to keep releasing new versions of the custom stylesheets to cope with all of Mozilla’s changes, and the end user has to go through them and modify them to fit each time too, a much more involved and annoying process. That’s still better than the alternative, of course, where these kinds of modifications are simply impossible, which is probably going to happen eventually, given Mozilla’ record thus far.

I’ve attempted to port your customizations to a newer version of the Aris custom CSS, though some things didn’t have direct equivalents. Some things will be different, most likely, but it should be closer to what you expect, at least. Try out the zip I attached here and see how it works for you!

Note that this is just the custom userChrome.css, not the userContent.css that was in the chrome directory.

Group “L” (KDE Neon Linux 5.22.1 User Edition)

1 user thanked author for this post.

Ascar and Paul if this is userChrome.css not the userContent.css that was in the chrome directory.Will you make a userContent.css for me ? I am not technical how do I install chrome-1.zip ? or do I wait for you to make userContent.css to install both ?

Just extract the .zip into your chrome folder in the Mozilla profile. You’ve already backed up the old chrome folder (it’s in the zip file you uploaded), so you can have it overwrite the existing files in there. The old userContent.css will remain and keep working, if it is indeed working.

Group “L” (KDE Neon Linux 5.22.1 User Edition)

Most Read

  • 183
  • Facebook
  • Twitter
  • Reddit
  • RSS
  • Comments

Firefox 4 is expected to bring one of the most significant stylistic overhauls that the browser has undertaken since the initial transition from the old Mozilla suite.

Although the final release is still a few weeks away, we’ve already had a taste of its look and feel thanks to the eight betas pushed out so far. Firefox 4’s UI is simplistic and streamlined but it has also drawn criticism for dropping elements like page titles in the title bar or simply for being too “Chrome-like.”

Let’s start with the obvious. Firefox 4 UI Fixer is a handy add-on that introduces several interesting modifications to the browser’s user interface, including the option to move the orange Firefox menu button so that the page title is displayed again, or restoring the “New Tab” option to tab context menu.

It also allows you to move status bar icons from extensions to any location, which can be especially useful if you only use a handful of extensions and hate to see all that wasted space from the add-on bar at the bottom of your screen. Simply relocate those icons next to the awesome bar, for example.

The add-on works on the latest test versions of Firefox (from b7 onwards) and has been tested across all platforms. To customize your Firefox UI go to Add-ons then in the Options dialog choose the desired options. Needless to say, Mozilla may still have some minor changes in store when the final version of Firefox 4 debuts, but with Firefox 4 UI Fixer covering many different areas of the UI under a single add-on we are sure this will remain handy for sometime to come.

Firefox offers an additional way to open new tabs with a little “+” icon at the end of your open tabs bar. I hardly ever use this button. If you’re already more comfortable with another way of opening tabs, such as using the Ctrl+T keyboard shortcut or double-clicking on an empty tab area, you might want to get rid of this option and save some space (every bit counts when you’re switching between dozens of open tabs). All it takes is a simple userChrome.css file tweak:

  1. Go to the chrome folder inside your profile directory (the easiest way is to enter “about:support” on your Firefox address bar, then click on the “Open Containing Folder” next to Profile Directory and find the chrome folder).
  2. Unless you’ve made other tweaks before there should be a file called userChrome-example.css. Open it, add the line .tabs-newtab-button and save as userChrome.css.
  3. Restart Firefox and the new tab button should be gone.

If you want to take things a step further it’s also possible to save a few pixels by keeping the close tab button from appearing on each open tab. You just need to do a little editing in your about:config page.

  1. Enter “about:config” on your Firefox address bar and type browser.tabs.closeButtons in the filter box.
  2. From there you can double click the entry and set any value between 0 and 3.

How to customize firefox’s user interface with userchrome. css

Setting it to ‘0’ will mean only the active tab has a close button. The default setting ‘1’ sees a close button on each tab, ‘2’ on none of them and ‘3’ also on none of them but places a close button to the right-end of the tab bar.

We hope that these quick customization tips will help you tailor Mozilla’s browser closer to your needs. For a few other Firefox-related tweaks you can check out our previous tips:

From MozillaZine Knowledge Base

userChrome.css in the chrome folder is a CSS file that can be used to change the way Mozilla applications’ interfaces look. This file does not exist in a new profile. You can create it manually. If you just want to move/remove/rename menus and menu items or change/disable shortcuts use the Menu Wizard add-on instead.

Contents

Creating

To create this file manually, use your operating system tools.

Go to your profile folder. Then go to the chrome folder there, creating it if necessary. In the chrome folder, create a plain text file named userChrome.css. Copy and paste the following line as the first line of the file (if it doesn’t already exist). This is called the namespace line and you must not alter it. Anything you add later on should always be below it

To create this file automatically, download the .zip file – http://franklion.co.uk/GEN-LINKS/chrome.zip. Paste the .zip file in your profile folder and unzip/extract it there. A chrome folder will be created with the userChrome.css and userContent.css files already within the folder, together with example files of each.

  • If you have more than one profile, then each of your profiles has a separate userChrome.css file.
  • There is another chrome folder where Thunderbird’s code is installed. Do not create a userChrome.css file there—it will not work.

Editing

This file is designed to be manually edited using a text editor. Anything valid in a CSS file is valid in this file. To make the changes take effect, you must restart the application.

For Mini Tutorial (old) see Section 4 here –