![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
PDF Viewer Toolbar Toggle
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!
Réiteach roghnaithe
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 👍 0All Replies (7)
Réiteach Roghnaithe
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
Oh, Hello. :-)
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
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; }
Thank you so much. I'm gonna try it.
Hi again jscher2000. Unfortunatelly I had not success. It seems the CSS inserted by Firefox is overriding the rule "display: none". :(
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.