You can't use CSS like via userChrome.css to disable buttons as that would require JavaScript.

What reasons do you have to disable those buttons ?

It just bugs me. I would like to have it completely gone. Makes browsing funner for me. I thought the userChrome.css would change things around. I do understand what css is it's the way firefox looks right? How else can I change it?

If you want to hide the buttons, yes, CSS can do that.

If that is what you meant, does this work on yours? I did not test:

/*** Hide Back and Forward buttons ***/
#nav-bar #back-button, #nav-bar #forward-button {
  display: none !important;
}

If that is not what you meant, why do you need to disable those buttons?

So far this is what I have in the Css file

#context-back image,
#context-forward image,
#context-reload image,
#context-stop image,
#context-bookmarkpage image,
#context-navigation,
#context-sep-navigation {
    display:none !important;
}

#back-button,
#forward-button {
  display: none;
}


/*** Hide Back and Forward buttons ***/
#nav-bar #back-button, #nav-bar #forward-button {
  display: none !important;
}

It looks to be the same thing just repeatedly. I tried closing firefox and it doesn't seem to change anything. Why would it be showing the same thing even though the file holds this information?

Are your other rules working, or does Firefox seem to be ignoring the entire file?

Note that you would have to omit 'image' in the rules for the context menu to make the rules work, but #context-navigation includes those five 'image' items, so you do not need those.

You can add code to the userChrome.css file below the default @namespace line.

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

#context-navigation,
#context-sep-navigation {
  display:none !important;
}

#back-button,
#forward-button {
  display: none !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

• https://www.userchrome.org/firefox-changes-userchrome-css.html

The browser still shows both arrows. I figure the userChrome.css is just a way of manipulating what features are excluded from the experience. If there would be a way to get rid of them I'd appreciate it. I know it sounds silly but i find it peacefully. Or maybe it's just in my head

Please try this: right-click the + after the last tab and Customize... or View (Alt + V) > Toolbars > Customize. In this mode you can move the various items around and see if the arrow buttons are hidden behind other buttons or toolbars

The code I posted above works for me, so if it doesn't work for you then you should double check my above reply for issues with userChrome.css

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

#context-navigation,
#context-sep-navigation {
  display:none !important;
}

#back-button,
#forward-button {
  display: none !important;
}

cor-el are you running windows? It looks like you're running a mac. have a chrome folder with a useChrome.css and posted code on it but the browser still shows the arrows.

I checked help>More_troubleshooting information and the Public folder seems to be correct.

You also mentioned "default @namespace line." is this supposed to be messed with? I don't understand

EDIT:

Oh i skipped this part on about:config:

   toolkit.legacyUserProfileCustomizations.stylesheets = true 

Now it's working thanks!

Can you post the full file path to your userChrome.css and its content when opened in a Firefox tab, so I can check for issues ?

Like I wrote above, on Windows you may have created a .txt file, so you may have a userChrome.css.txt with a hidden .txt appended. If you didn't used a plain text editor like Notepad then there might be formatting code.

This is simple code and should work on all platforms (Windows, Linux, Mac). Usually Mac causes the most problems when it comes to CSS codes and Windows because of what I wrote above.