Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

csd buttons left option? #46

kerry-s opened this issue Jun 8, 2018 · 2 comments


Copy link

commented Jun 8, 2018

i'm using elementary os->

they have the close button on the left & maximize on the right. i can't do nothing to change that. it kinda bothers me that only firefox has the button layouts on the right in csd mode.
is it possible to get the buttons split like that?

for now i been able to move the buttons to the left but they don't line up right(centered in button) could you help me get them to line up?

my customChrome.css:

@namespace url("");

#nav-bar {
	margin-left: 82px;

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

#titlebar-content {
  direction: rtl;

#TabsToolbar {
  direction: rtl;

#tabbrowser-tabs {
  direction: ltr;

my userChrome.css:

 * In this file you can enable styles which apply to Firefox' user interface.
 * To enable a specific feature, uncomment its @import line by removing "/*" at
 * the beginning of the line. To disable it, put the "/*" back.

 * GNOME Theme
 * Pick whichever variant you like, it doesn't have to match your GNOME version,
 * but it will probably look better if it does. Remember that your GTK theme
 * variant must match the variant you pick here, eg. if you pick a light
 * variant, you must also run Firefox using the light variant by either
 * disabling global dark theme in GNOME Tweak Tool or running Firefox explicity
 * with the light theme:
 *   $ GTK_THEME=Adwaita:light firefox
 * The opposite applies to the dark variant, you must either enable global dark
 * theme or run Firefox like this:
 *   $ GTK_THEME=Adwaita:dark firefox

/* GNOME 3.18 light theme */
@import "ui/gnome-3.18-light.css"; /**/
/* GNOME 3.18 dark theme */
/*@import "ui/gnome-3.18-dark.css"; /**/
/* GNOME 3.26 light theme */
/*@import "ui/gnome-3.26-light.css"; /**/
/* GNOME 3.26 dark theme */
/*@import "ui/gnome-3.26-dark.css"; /**/

/* Client-side decorations (optional)

/* Auto-detect CSD support (experimental)
 * Do not enable anything else in the CSD section of this file if you want to
 * use this. It should automatically detect and enable CSD for you. Note that
 * this option is experimental, if it doesn't work for you, please report a bug
 * on our GitHub. You can still use the options below to enable CSD manually. */
/*@import "ui/experimental-auto-csd.css"; /**/

/* Enable CSD manually
 * If you enable this, you also need to pick how many window buttons you have
 * below. */
@import "ui/csd.css"; /**/

/* Window controls: just 1 button */
/*@import "ui/csd-1-button.css"; /**/
/* Window controls: 2 buttons */
/*@import "ui/csd-2-buttons.css"; /**/
/* Window controls: 3 buttons */
/*@import "ui/csd-3-buttons.css"; /**/

 * Other features (optional)

/* Hide the tab bar when only one tab is open
 * Warning: This also hides the private browsing indicator in private windows.
 * If you are using it, you might wanna enable the next feature too. Also you
 * should move the new tab button somewhere else for this to work, because by
 * default it is on the tab bar too. */
@import "ui/hide-single-tab.css"; /**/

/* Replace the private browsing indicator with a colored URL bar */
@import "ui/private-urlbar.css"; /**/

/* Limit the URL bar's autocompletion popup's width to the URL bar's width */
@import "ui/matching-autocomplete-width.css"; /**/

/* Make all tab icons look kinda like symbolic icons */
@import "ui/symbolic-tab-icons.css"; /**/

/* Import a custom stylesheet
 * Everything you add in your customChrome.css file (it doesn't exist by
 * default) will be included here and preserved between updates, so you can move
 * your configuration to that file if you don't like setting it up after every
 * update. You can also apply your own custom styles in that file. */
@import "customChrome.css"; /**/

@kurogetsusai kurogetsusai added this to the Firefox 60 milestone Jun 8, 2018

kurogetsusai added a commit that referenced this issue Jun 8, 2018

This comment has been minimized.

Copy link

commented Jun 8, 2018

Hi! That looks interesting, thanks for sharing that code. I took your customChrome.css and experimented with it a bit, I managed to move the close and maximize buttons to separate sides. It seems to work nicely, so I thought I might as well just add that option to the repo.

We don't have a theme variant for elementary yet, so I used Adwaita from GNOME 3.18 instead (it works with other theme variants too, of course), looks like this on my elementary Live CD (the window above is Epiphany and below is Firefox with that elementary support I just added):


You need to enable those in your userChrome.css:

@import "ui/experimental-auto-csd.css";
@import "ui/csd-elementary.css";

It doesn't work with the manual CSD option you have enabled in your config, so disable it. It only works with the experimental auto CSD option (which will become enabled by default soon, since it works really good tbh).

If you're curious how does it work, see commit ab2d48a. Feel free to comment if it doesn't work as you expected.


This comment has been minimized.

Copy link

commented Jun 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.