Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Swap bookmarks menu with bookmarks 'star' button.

  • 3 replies
  • 1 has this problem
  • 3 views
  • Last reply by cor-el

more options

There are a lot of answers out there about getting rid of the star button on the new bookmarks menu button, and I share their frustration. However, my complaint is that I don't like the star button being on the left of the dual button. Is there a way to swap the star button and the dropdown menu buttons? To clarify, I want to keep the dual button, but I want the dropdown menu button on the left, and the "Bookmark This Page" star button on the right.

Here is an image to also help clarify what I am looking to move.

http://imgur.com/CfQrJ6o

I appreciate any help you can offer!

There are a lot of answers out there about getting rid of the star button on the new bookmarks menu button, and I share their frustration. However, my complaint is that I don't like the star button being on the left of the dual button. Is there a way to swap the star button and the dropdown menu buttons? To clarify, I want to keep the dual button, but I want the dropdown menu button on the left, and the "Bookmark This Page" star button on the right. Here is an image to also help clarify what I am looking to move. http://imgur.com/CfQrJ6o I appreciate any help you can offer!

Modified by JazzSax7

Chosen solution

That is not possible in an easy way. That are not two buttons, but one button and the star is the main button and the other button is the drop marker as you can see if you inspect the code with the DOM Inspector.

That drop marker also has a border or box-shadow on the left, so you would have to make a lot of CSS changes to make this work properly.

Swapping the two is easy with code in userChrome.css:

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

#bookmarks-menu-button > dropmarker {-moz-box-ordinal-group: 0 !important;}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Read this answer in context 👍 2

All Replies (3)

more options

Chosen Solution

That is not possible in an easy way. That are not two buttons, but one button and the star is the main button and the other button is the drop marker as you can see if you inspect the code with the DOM Inspector.

That drop marker also has a border or box-shadow on the left, so you would have to make a lot of CSS changes to make this work properly.

Swapping the two is easy with code in userChrome.css:

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

#bookmarks-menu-button > dropmarker {-moz-box-ordinal-group: 0 !important;}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Modified by cor-el

more options

Actually, that solved my issue! I use Stylish, and just added it to my current Bookmarks Tweaks style. But that did exactly what I wanted. Thanks so much!

more options

You're welcome

Try to add this rule as well:

#bookmarks-menu-button > dropmarker::before {display:none!important}

I think that it is this rule that is used:

  • chrome://browser/skin/browser.css
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {}