customization of the Print Preview page possible the CSS of the page
FF 60.1.0 running on Ubuntu 14.04 I need to configure, or change, the buttons on the HTML page that appears when you click the Printer Icon. FF is working fine and is highly configured for a specific use and it works fine, no issues. But when the printer page comes up, with "Print", "Print Setup", and so on; there is a need to re-arrange the buttons that appear on the top of the page. Specifically the "Close" button needs to be moved to the far left instead of the far right - see the image which shows the layout of the top row of buttons. Try as I might looking through source code (I did fine printPreview.dtd and printPreview.css and have examined omni.ja) I cannot figure out what the CSS is on the page in the image because I cannot get FF to show me the HTML source for the page. Greatly appreciate any help.
Chosen solution
I see this issue as well and usually go to Full Screen mode, but moving the close button is probably easier. I don't know if it would be possible to wrap the toolbar button to a second line.
This code in userChrome.css works for me, so give it a try.
#main-window #print-preview-toolbar button[label="Close"] {-moz-box-ordinal-group:0}
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/what-is-userchrome-css.html
All Replies (2)
The window is too narrow for the entire Print Preview toolbar to fit? Hmm...
This is the XUL code for the bar. (I don't know the actual source code, this is extracted from the Inspector in the Browser Toolbox).
<toolbar fullscreentoolbar="true" id="print-preview-toolbar"> <button id="print-preview-print" label="Print…" accesskey="P" oncommand="this.parentNode.print();"/> <button id="print-preview-pageSetup" label="Page Setup…" accesskey="u" oncommand="this.parentNode.doPageSetup();"/> <vbox align="center" pack="center"><label value="Page:" accesskey="a" control="print-preview-pageNumber"/></vbox> <toolbarbutton id="print-preview-navigateHome" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'home');" tooltiptext="First page" label="⏮"/> <toolbarbutton id="print-preview-navigatePrevious" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(-1, 0, 0);" tooltiptext="Previous page" label="◂"/> <hbox align="center" pack="center"><html:input id="print-preview-pageNumber" hidespinbuttons="true" type="number" value="1" min="1" max="2" /><label value="of"/><label id="print-preview-totalPages" value="2"/></hbox> <toolbarbutton id="print-preview-navigateNext" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(1, 0, 0);" tooltiptext="Next page" label="▸"/> <toolbarbutton id="print-preview-navigateEnd" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'end');" tooltiptext="Last page" label="⏭"/> <toolbarseparator class="toolbarseparator-primary"/> <vbox align="center" pack="center"><label id="print-preview-scale-label" value="Scale:" accesskey="S" control="print-preview-scale"/></vbox> <hbox align="center" pack="center"><menulist id="print-preview-scale" crop="none" oncommand="parentNode.parentNode.scale(this.selectedItem.value);" value="ShrinkToFit" label="Shrink To Fit"><menupopup><menuitem value="0.3" label="30%"/><menuitem value="0.4" label="40%"/><menuitem value="0.5" label="50%"/><menuitem value="0.6" label="60%"/><menuitem value="0.7" label="70%"/><menuitem value="0.8" label="80%"/><menuitem value="0.9" label="90%"/><menuitem value="1" label="100%"/><menuitem value="1.25" label="125%"/><menuitem value="1.5" label="150%"/><menuitem value="1.75" label="175%"/><menuitem value="2" label="200%"/><menuseparator/><menuitem flex="1" value="ShrinkToFit" label="Shrink To Fit" selected="true"/><menuitem value="Custom" label="Custom…"/></menupopup></menulist></hbox> <toolbarseparator class="toolbarseparator-primary"/> <hbox align="center" pack="center"><toolbarbutton id="print-preview-portrait-button" label="Portrait" accesskey="o" type="radio" group="orient" class="tabbable" oncommand="parentNode.parentNode.orient('portrait');" checked="true"/><toolbarbutton id="print-preview-landscape-button" label="Landscape" accesskey="L" type="radio" group="orient" class="tabbable" oncommand="parentNode.parentNode.orient('landscape');"/></hbox> <toolbarseparator class="toolbarseparator-primary"/> <checkbox id="print-preview-simplify" label="Simplify Page" checked="false" accesskey="i" tooltiptext-disabled="This page cannot be automatically simplified" tooltiptext-enabled="Change layout for easier reading" oncommand="this.parentNode.simplify();" tooltiptext="Change layout for easier reading"/> <toolbarseparator class="toolbarseparator-primary"/> <button label="Close" accesskey="C" oncommand="PrintUtils.exitPrintPreview();"/><data id="print-preview-prompt-title" value="Custom Scale…"/> </toolbar>
I can't think of a CSS-only way to move the last button on the bar to the beginning of the bar, although there might be a trick.
Otherwise, you could probably apply rules to make the other controls narrower to allow space for the Close button on the right end.
Chosen Solution
I see this issue as well and usually go to Full Screen mode, but moving the close button is probably easier. I don't know if it would be possible to wrap the toolbar button to a second line.
This code in userChrome.css works for me, so give it a try.
#main-window #print-preview-toolbar button[label="Close"] {-moz-box-ordinal-group:0}