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.
Add a comment
|
5 Answers
There is a theme available which makes Firefox look more native to elementary OS:
answered Jan 15, 2019 at 21:17
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
-
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). 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.cssand for this to even work in recent Firefox versions, you must set1toolkit.legacyUserProfileCustomizations.stylesheetstotrueinabout:config.– Kevin ECommented 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 ECommented 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
-
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-containerdiv - 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 withdirection: ltr/rtlas described in Reference 2, below
References
- Sebastian's answer, above
- "how do I move close,max,min buttons location" - post on support.mozilla.org
See also
- Zonnev/elementaryos-firefox-theme - a Firefox theme that tries to look as "native" as possible on elementaryOS
