Display back and forward buttons all the time in Firefox - gHacks Tech News

Display back and forward buttons all the time in Firefox

Mozilla started to minimize the Firefox interface when Google Chrome started to gain traction. Recent versions of Firefox show only a single menu button, have done away with the status bar, merged the stop and reload button, and display the forward button only if there is a site in history that you can visit when you click on that button.

That's only the case if you hit the back button at least once, and even thought it may seem logical to only display the back button and not the forward button at all times because of it, I do prefer to see both buttons permanently in the interface as it means that the interface won't be changed dynamically in the browser.

It is also not really clear why Mozilla is only hiding the forward button, as the back button has no functionality as well initially.

firefox forward back button screenshot

It is relatively easy to add the forward button back to Firefox so that it is displayed next to the back button at all times. Let me show you how that is done:

  • Load about:support in a tab in the Firefox web browser or select Firefox > Help > Troubleshooting Information from the menu.
  • Locate the profile folder entry and click on the Show Folder button. This should open the Firefox profile folder in the default file browser of the system.
  • Check if there is a Chrome directory here. If not, create it.
  • Open the Chrome directory and see if you have a userChrome.css file there. If not, create it.
  • Open the userChrome.css file and add the following lines of code to the end of it:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {
window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled] + #urlbar-container > #urlbar {
margin-left: 0px !important;
border-left: 1px solid #b4c2cf !important;
}

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button:not(:hover) > #forward-button[disabled] ,
window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button:hover > #forward-button[disabled] {
opacity: 1.0 !important;
margin-right: -2px !important;
}

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button[disabled] > .toolbarbutton-icon{
border-top:1px solid #869aad !important;
border-bottom:1px solid #869aad !important;
}

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled] #back-forward-dropmarker{
visibility:visible !important;
}
}

  • Restart Firefox afterwards.

You should now see both a back and forward button in Firefox's interface. (via Horst and MozillaZine.

Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. Krishna said on January 29, 2013 at 9:21 pm
    Reply

    I just checked on my Firefox 18.0.1. Both buttons are visible and are working perfectly. Which version are you talking about ? Or is it because of my theme is Shine Bright Skin Aero ?

  2. Q said on January 29, 2013 at 10:38 pm
    Reply

    The hiding of the Forward button started for Firefox 10 default theme. I do not know whether later series implemented the annoyance in the same place.

    Reshowing the forward button for Firefox 10 series was something I wanted to do and started to investigate, but ran short on time and the project was delayed.

    I had found the CSS code regarding the hiding of the Forward button was was not sufficiently familiar with CSS (I had not worked with it in quite a long time) and especially the newer CSS.

    After not proceeding for a while (way too busy), I found a lead by poster Straspey in the comments to your “Separate stop and reload in Firefox” article at https://www.ghacks.net/2013/01/22/separate-the-stop-and-reload-button-in-firefox/ . The Classic Toolbar Buttons extension had code that should disallow the hiding behavior of the Firefox Forward button.

    The CSS code posted in in this article is different than that from the Classic Toolbar Buttons 1.1.5 Firefox extension (there are newer version of the extension, but not that officially support Firefox 10 series or newer). I have not yet tested the various code with Firefox.

    Thanks a lot Martin.

  3. Guest said on January 29, 2013 at 10:56 pm
    Reply

    You could just go to the “Customize” window and toggle on “Small Icons” to display both of the back and forward buttons again.

    1. Martin Brinkmann said on January 29, 2013 at 11:06 pm
      Reply

      Interesting, thanks for mentioning that.

  4. RoseHosting said on January 31, 2013 at 12:00 pm
    Reply

    This is an interesting finding.

  5. Geov Oiglle said on March 11, 2014 at 2:25 am
    Reply

    I don’t understand. Why hide the forward button when there is nothing to go forward to, yet show the back button all the time when there is nothing to go back to like when you open a new tab or window? I think if firefox people want to make things disappear at least make the decision consistent for all buttons. If buttons were people living in the west, now forward button would cry “EQUALITY!!!”.

  6. Anony3243 said on April 22, 2014 at 11:07 pm
    Reply

    This code works to prevent the forward button from disappearing, but it doesn’t seem to work for preventing the back-button from disappearing… such as when ctrl-t “new-tab”. (I’m using FF 24 esr).

    I put the code into stylish, and played around with it. I noticed that all the references in the code point to “forward-disabled” and never “back-disabled” so I’m wondering if you could maybe do something specifically to help the back-button from hiding when it can’t be used? Please. :)

    Further, the “insert a flexible spacer” trick works, BUT it seems to make the ROUND back-button turn into a rectangle, and I don’t like that (I prefer a Fitt’s law back button which makes back easier to hit).

    Thanks again for the help.

  7. Y U No Use Brains said on July 24, 2014 at 2:11 pm
    Reply

    Thik link to mozillazine doesn’t work.
    You need a h in http!

    1. Martin Brinkmann said on July 24, 2014 at 3:46 pm
      Reply

      Thanks, fixed.

  8. beerpatzer said on January 24, 2015 at 4:18 pm
    Reply

    Doesn’t work in Firefox 35. :(

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.