11

I like the new CSD option (remove title bar) but when activated my window buttons move over to the right (normally on the left). Is there a way to have CSD enabled but with buttons on the left?

14

Create the file "userChrome.css" and its parent directory "chrome" if they don't already exist:

~/.mozilla/firefox/<YOUR_FIREFOX_PROFILE>/chrome/userChrome.css

Place the following code in userChrome.css
If the line that begins with @namespace is already in your userChrome.css, don't add it a second time.

#TabsToolbar {
  direction: rtl;
}

#tabbrowser-tabs {
  direction: ltr;
}

.titlebar-buttonbox {
  display: flex;
}

.titlebar-min {
  order: 2;
}

.titlebar-max {
  order: 1;
}

.titlebar-close {
  order: 3;
  margin-right: 6px !important;
}

Now restart Firefox and the buttons will be on the left.

Your Firefox profile will look something like this: hej3q2i1.default
If you aren't sure which profile is yours, you can find out by following these steps:

  1. Open Firefox
  2. Click the menu button
  3. Click Help
  4. Select Troubleshooting Information
  5. Your Firefox profile will be the last directory listed in "Profile Directory"

CSS source: https://gist.github.com/oidualc/9f7c0a6591ada0d391ee6813a518dc3benter image description here

  • Thanks for trying but this does not solve the problem, the buttons are still over on the right in CSR mode. – JimDeadlock May 13 '18 at 1:56
  • Maybe I misunderstood. I assumed you meant CSD mode because I've never heard of CSR mode and CSD mode allows you to merge tabs with the titlebar. If you do mean CSD mode (Client Side Decorations), this does work. Double check your work and restart Firefox after making the changes. I have added a screenshot to my answer showing the results. – denshigomi May 14 '18 at 15:44
  • I tried it on a different computer and it does indeed work, not sure what I was doing wrong before. Yes I did mean CSD, I think I must have been half asleep the other day. Thanks for the answer! – JimDeadlock May 15 '18 at 21:45
  • 1
    This makes the window buttons to placed on the left but they are not placed properly. The space between minimize and close buttons is too small compared to the space between maximize and minimize button. – Apoorv Potnis Jul 10 '18 at 12:31
  • 1
    Like this. – Apoorv Potnis Jul 10 '18 at 12:40
4

In addition to @denshigomi's answer, I added a poperty for the misalignment. This fixes the Apoorv Potnis's issue. You can add this property to userChrome.css file:

#titlebar-close {
  margin-right: 6px !important;
}

Also the gist can be found in here.

1

Original author of the gist here. The script has been updated because in the latest versions of Firefox Nightly the buttons order has been inverted.

  • Type about:support on the URL bar
  • Open the "Profile Directory" ( /home/.../.mozilla/firefox/... )
  • Create if it doesn't exist already a directory named "chrome"
  • Create a file inside (if it doesn't exist already) named userChrome.css
  • Append the following code

userChrome.css:

#TabsToolbar {
    direction: rtl;
}

#tabbrowser-tabs {
    direction: ltr;
}

.titlebar-buttonbox {
    display: flex;
}

.titlebar-min {
    order: 2;
}

.titlebar-max {
    order: 1;
}

.titlebar-close {
    order: 3;
    margin-right: 6px !important;
}

Further information can be found here: https://www.userchrome.org/

0

This works for me after the Firefox 65 update:

(userChrome.css)

#menubar-items {
  -moz-box-ordinal-group: 2;
  margin-left: 30px;
}

.titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1!important;
}

.titlebar-button.titlebar-close {
  -moz-box-ordinal-group: 1;
}

.titlebar-button.titlebar-min {
  -moz-box-ordinal-group: 2;
}

.titlebar-button.titlebar-max {
  -moz-box-ordinal-group: 3;
}

0

Thanks for the help!

I had to change it a bit, but it's perfect now!

This is my 'userChrome.css' file, now:

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

#titlebar-max {
  -moz-box-ordinal-group: 0;
}

#titlebar-content {
  direction: rtl;
}

#TabsToolbar {
  direction: rtl;
}

#tabbrowser-tabs {
  direction: ltr;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button:not([selected="true"]) {
  display: -moz-box !important;
}

#menubar-items {
  -moz-box-ordinal-group: 2;
  margin-left: 30px;
}

.titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1!important;
}

.titlebar-button.titlebar-close {
  -moz-box-ordinal-group: 3;
  margin-left: 5px !important;
  margin-right: 6px !important;
}

.titlebar-button.titlebar-min {
  -moz-box-ordinal-group: 2;
}

.titlebar-button.titlebar-max {
  -moz-box-ordinal-group: 1;
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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