3

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.

2

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

https://github.com/Zonnev/elementaryos-firefox

| improve this answer | |
1

This was answered before where it belongs

https://support.mozilla.org/en-US/questions/1157451

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

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


Also:

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

https://github.com/kurogetsusai/firefox-gnome-theme/issues/46

| improve this answer | |
  • This is just for the tabs though. What I'm looking for is for the whole browser window itself. – user9564371 Dec 16 '18 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 Dec 16 '18 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. – user9564371 Dec 16 '18 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. – TheDudeAbides Oct 11 '19 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. – TheDudeAbides Oct 11 '19 at 23:12
0

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.

| improve this answer | |
  • Yeah I prefer it to save the real estate because IMO the title bar uses up too much space, especially on a laptop – user9564371 Dec 16 '18 at 17:12
0

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

| improve this answer | |
  • 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 – user9564371 Dec 16 '18 at 17:11
  • I was about to say that, Firefox has his own system. – Sebastian Dec 16 '18 at 18:33
0

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

toolkit.legacyUserProfileCustomizations.stylesheets

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;
}

Caveats

  • 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

References

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

See also

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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