enter image description here

As you can see above, the close button is on the right Windows-style. But I want to make it fit with the elementary look. I think this requires messing around with Firefox's userChrome.css but I have no idea what to do from that point.

5 Answers 5


There is a theme available which makes Firefox look more native to elementary OS:



This was answered before where it belongs



-->> https://support.mozilla.org


Look you can use someone's work, as a start point, for an old version of Firefox


  • This is just for the tabs though. What I'm looking for is for the whole browser window itself. Commented Dec 16, 2018 at 18:52
  • Is the same, I just wanted to illustrate that it isn't part of Elementary not even a topic of the Linux environment. Is Firefox you should look on how to do it, then ask there not here. Is Firefox who don't use the system way but his own through css (my point).
    – Sebastian
    Commented Dec 16, 2018 at 19:09
  • I've seen the thread you linked on the Mozilla Support and it didn't work on elementaryOS. I was just asking here on the off chance that somebody here has found a way to do it since all the solutions I've found through Google didn't seem to work for elementaryOS. Commented Dec 16, 2018 at 19:12
  • Using one of the other solutions from the second thread posted above by Sebastian, you can achieve your aim with elementaryOS Juno and Firefox 71.x. You will need to understand how to create and modify a userChrome.css and for this to even work in recent Firefox versions, you must set 1toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config.
    – Kevin E
    Commented Oct 11, 2019 at 23:01
  • Furthermore, I'd like to add that this is exactly the first place I thought to look for "how to put Firefox's CSD window controls on the the other side of the window," so I respectfully disagree that this is the wrong forum for Q&A of this nature.
    – Kevin E
    Commented Oct 11, 2019 at 23:12

My brand new elementaryOS install has the close button on the left hand side. It looks like you have client side decorations enabled which saves vertical real estate by putting UI elements in the title bar.

To disable this, visit about:config in Firefox and set the preference browser.tabs.drawInTitlebar to false and restart Firefox.

  • Yeah I prefer it to save the real estate because IMO the title bar uses up too much space, especially on a laptop Commented Dec 16, 2018 at 17:12

You can use the elementary tweaks.

Open a terminal, then write and execute (by pressing ENTER) this commands, one at a time:

sudo apt install software-properties-common

will ask your password

sudo add-apt-repository ppa:philip.scott/elementary-tweaks

will ask you press ENTER to confirm the installation of the PPA

(newer version of add-apt-repository runs apt update after automatically. In case it didn't, just run sudo apt update yourself)

sudo apt install elementary-tweaks

  • This does not solve the issue. I've had Elementary Tweaks installed since day 1, any changes I do to Windo Controls Layout doesn't affect Firefox Commented Dec 16, 2018 at 17:11
  • I was about to say that, Firefox has his own system.
    – Sebastian
    Commented Dec 16, 2018 at 18:33

Top: Thunderbird; bottom: Firefox with the title bar turned off in the "Customize" menu

Top: Thunderbird; bottom: Firefox with the title bar turned off in the "Customize" menu, and the userChrome.css customizations described below

The GTK+ theme shown above is elementary-x, but the instructions below also work fine with the default "elementary" theme in Juno.

I have used Tweaks to set the window controls to use the "OS X" layout because I frequently switch between macOS / elementaryOS environments. If you use the default "elementary" layout, you just won't have a minimize button (the one in the middle), no big deal. Separating the "maximize" button from "close"—so that they're on opposite sides of the window—becomes more of a challenge, so you may want to look at Zonnev/elementaryos-firefox-theme instead.

As of Firefox 72 (Nightly), it's possible to get a pixel-perfect fix by setting


to true in about:config, and then adding some variation of the following CSS to your userChrome.css.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* h/t: https://support.mozilla.org/en-US/questions/1222872 */

/* first, move the window controls all the way to the left */
.titlebar-buttonbox-container {
  -moz-box-ordinal-group: 0 !important;

/* then move the "close" (X) button all the way to the left */
.titlebar-close {
  -moz-box-ordinal-group: 0 !important;

/* fix the spacing issue with the "minimize" button (now in the middle) */
.titlebar-min {
  margin-left: 6px !important;

/* left spacer is too wide when shown and hidden when maximized;
   this looks better */
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
  display: block !important;
  width: 20px !important;


  • not sure how those pixel values will for you if you have a high-DPI display
  • if you like your window controls to be the default "elementary" style (close on the left, maximize on the right), I'm not sure if you'll be able to separate them using the straightforward CSS above, since they're both in the .titlebar-buttonbox-container div
  • if your native language is right-to-left, you'll need to adjust the -moz-box-ordinal-groups accordingly (set them to a big number instead) and possibly play with direction: ltr / rtl as described in Reference 2, below


  1. Sebastian's answer, above
  2. "how do I move close,max,min buttons location" - post on support.mozilla.org

See also

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.