Swap bookmarks menu with bookmarks 'star' button.
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.
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 👍 2All Replies (3)
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
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!
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 {}