FANDOM


Modifying the UI with CSSEdit

Firefox allows one to modify the appearance of its interface (not the web page content) with cascading style sheets.

There are two ways to do this.

  • You can create and modify the file firefox profile dir/chrome/userChrome.css. The find out what the profile dir is, see: this.
  • Another method is to install stylish, and add a style to it. The style should start with this declaration: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);. This method has the advantage that one can modify the style and see changes without restarting the browser.

Now the question is what to do with those files. Firstly, you should know at least some CSS3. This page is a great learning source for this technology.

Knowing CSS3 you should add rules for elements, which you want to modify. To easily learn what elements have what class/id names, there are two ways:

  • Open this url in a new page: chrome://browser/content/browser.xul. This will display the main window widgets inside that tab. Now press somewhere in that area with right mouse button and select Inspect Element. Now you can use the inspector tool to inspect an element and learn it's properties.
  • You can also install the DOM inspector extension. After it's installed, open it's window with ctrl+shift+i. Choose File->Inspect Chrome Document->anything. Then choose Edit->Select Element By Click. Now click on any element in the Firefox's window with left mouse button. Information about that element should be displayed in the DOM Inspector's window.

Now use the obtained information to create a rule. For example, adding this rule hides the menu button:

appmenu-toolbar-button { display: none !important; }

If you need something to start with, here are a few ready styles:

Suggested extensionsEdit

  • uBlock - popular ad (element) blocking extension to make the web a bit cleaner looking.
  • Stylish - allows to add styles to pages and the UI and manage them (disable, enable, import, export, preview, edit).
  • Greasemonkey - allows to add and manage custom JavaScript scripts, like 4chan X.

General tipsEdit

1355789158984

An infographic for ricing Firefox

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.