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

PDF Viewer Toolbar Toggle

more options

Hi. Is there a way to create a shortcut-key toggle to make the PDF Viewer toolbar appear and disappear? I've implemented the CSS code for removing the toolbar altogether, but some key features require the toolbar. Hope there's a way to get this done. Thanks a lot!

Hi. Is there a way to create a shortcut-key toggle to make the PDF Viewer toolbar appear and disappear? I've implemented the CSS code for removing the toolbar altogether, but some key features require the toolbar. Hope there's a way to get this done. Thanks a lot!

Chosen solution

Found a solution on Reddit. Works incredibly well!

This is rough, but you could experiment with it. The idea is to reduce the toolbar to a single icon and expand when you hover it:

[mozdisallowselectionprint] #sidebarContainer, [mozdisallowselectionprint] #viewerContainer {

 top: 0 !important;

}

[mozdisallowselectionprint] #mainContainer .toolbar {

 position: absolute !important;
 left: auto !important;
 right: 22px !important;
 width: auto !important;
 min-width: 640px !important;

}

[mozdisallowselectionprint] #mainContainer .toolbar:not(:hover) {

 width: 32px !important;
 min-width: 0 !important;
 height: 36px !important;
 overflow: hidden !important;

}

[mozdisallowselectionprint] #secondaryToolbar {

 right: 26px !important;

}

To test, open a PDF, open the Style Editor (F7), create a new sheet using the + button above the list of style sheets, paste the code, then try variations.

Credits: u/jscher2000

Read this answer in context 👍 0

All Replies (7)

more options

Chosen Solution

Found a solution on Reddit. Works incredibly well!

This is rough, but you could experiment with it. The idea is to reduce the toolbar to a single icon and expand when you hover it:

[mozdisallowselectionprint] #sidebarContainer, [mozdisallowselectionprint] #viewerContainer {

 top: 0 !important;

}

[mozdisallowselectionprint] #mainContainer .toolbar {

 position: absolute !important;
 left: auto !important;
 right: 22px !important;
 width: auto !important;
 min-width: 640px !important;

}

[mozdisallowselectionprint] #mainContainer .toolbar:not(:hover) {

 width: 32px !important;
 min-width: 0 !important;
 height: 36px !important;
 overflow: hidden !important;

}

[mozdisallowselectionprint] #secondaryToolbar {

 right: 26px !important;

}

To test, open a PDF, open the Style Editor (F7), create a new sheet using the + button above the list of style sheets, paste the code, then try variations.

Credits: u/jscher2000

more options

Hello jscher2000. Sorry for asking, maybe this silly question, I'm newbie in firefox developing. How could you disable the entire PDF viewer toolbar? I guess it was thru CSS but I'm stuck in it. I appreciate your assistance. David Valencia

more options

dvalencia1970 said

How could you disable the entire PDF viewer toolbar? I guess it was thru CSS but I'm stuck in it. I appreciate your assistance.

Hi David, you never want to use the toolbar? I have not tested, but you could try removing all the other rules that contain .toolbar and just use this:

[mozdisallowselectionprint] #mainContainer .toolbar { display: none !important; }

more options

Thank you so much. I'm gonna try it.

more options

Hi again jscher2000. Unfortunatelly I had not success. It seems the CSS inserted by Firefox is overriding the rule "display: none". :(

more options

Hi David, now I'm not sure whether the original code was working for you. Was it?

This thread doesn't have all the details on setting up a userContent.css file to modify built-in pages. Here's another thread with an example of that:

https://support.mozilla.org/questions/1305573

Instead of the style rules listed under (A) in that thread, use the rule(s) from this thread.