X
Tap here to go to the mobile version of the site.

Support Forum

customization of the Print Preview page possible the CSS of the page

Posted

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.

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.
Attached screenshots

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}

Read this answer in context 1

Additional System Details

Application

  • User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

Helpful Reply

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.

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 [https://developer.mozilla.org/docs/Tools/Browser_Toolbox Browser Toolbox]). &lt;toolbar fullscreentoolbar="true" id="print-preview-toolbar"> &nbsp;&nbsp;&lt;button id="print-preview-print" label="Print…" accesskey="P" oncommand="this.parentNode.print();"/> &nbsp;&nbsp;&lt;button id="print-preview-pageSetup" label="Page Setup…" accesskey="u" oncommand="this.parentNode.doPageSetup();"/> &nbsp;&nbsp;&lt;vbox align="center" pack="center">&lt;label value="Page:" accesskey="a" control="print-preview-pageNumber"/>&lt;/vbox> &nbsp;&nbsp;&lt;toolbarbutton id="print-preview-navigateHome" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'home');" tooltiptext="First page" label="⏮"/> &nbsp;&nbsp;&lt;toolbarbutton id="print-preview-navigatePrevious" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(-1, 0, 0);" tooltiptext="Previous page" label="◂"/> &nbsp;&nbsp;&lt;hbox align="center" pack="center">&lt;html:input id="print-preview-pageNumber" hidespinbuttons="true" type="number" value="1" min="1" max="2" />&lt;label value="of"/>&lt;label id="print-preview-totalPages" value="2"/>&lt;/hbox> &nbsp;&nbsp;&lt;toolbarbutton id="print-preview-navigateNext" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(1, 0, 0);" tooltiptext="Next page" label="▸"/> &nbsp;&nbsp;&lt;toolbarbutton id="print-preview-navigateEnd" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'end');" tooltiptext="Last page" label="⏭"/> &nbsp;&nbsp;&lt;toolbarseparator class="toolbarseparator-primary"/> &nbsp;&nbsp;&lt;vbox align="center" pack="center">&lt;label id="print-preview-scale-label" value="Scale:" accesskey="S" control="print-preview-scale"/>&lt;/vbox> &nbsp;&nbsp;&lt;hbox align="center" pack="center">&lt;menulist id="print-preview-scale" crop="none" oncommand="parentNode.parentNode.scale(this.selectedItem.value);" value="ShrinkToFit" label="Shrink To Fit">&lt;menupopup>&lt;menuitem value="0.3" label="30%"/>&lt;menuitem value="0.4" label="40%"/>&lt;menuitem value="0.5" label="50%"/>&lt;menuitem value="0.6" label="60%"/>&lt;menuitem value="0.7" label="70%"/>&lt;menuitem value="0.8" label="80%"/>&lt;menuitem value="0.9" label="90%"/>&lt;menuitem value="1" label="100%"/>&lt;menuitem value="1.25" label="125%"/>&lt;menuitem value="1.5" label="150%"/>&lt;menuitem value="1.75" label="175%"/>&lt;menuitem value="2" label="200%"/>&lt;menuseparator/>&lt;menuitem flex="1" value="ShrinkToFit" label="Shrink To Fit" selected="true"/>&lt;menuitem value="Custom" label="Custom…"/>&lt;/menupopup>&lt;/menulist>&lt;/hbox> &nbsp;&nbsp;&lt;toolbarseparator class="toolbarseparator-primary"/> &nbsp;&nbsp;&lt;hbox align="center" pack="center">&lt;toolbarbutton id="print-preview-portrait-button" label="Portrait" accesskey="o" type="radio" group="orient" class="tabbable" oncommand="parentNode.parentNode.orient('portrait');" checked="true"/>&lt;toolbarbutton id="print-preview-landscape-button" label="Landscape" accesskey="L" type="radio" group="orient" class="tabbable" oncommand="parentNode.parentNode.orient('landscape');"/>&lt;/hbox> &nbsp;&nbsp;&lt;toolbarseparator class="toolbarseparator-primary"/> &nbsp;&nbsp;&lt;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"/> &nbsp;&nbsp;&lt;toolbarseparator class="toolbarseparator-primary"/> &nbsp;&nbsp;&lt;button label="Close" accesskey="C" oncommand="PrintUtils.exitPrintPreview();"/>&lt;data id="print-preview-prompt-title" value="Custom Scale…"/> &lt;/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.
cor-el
  • Top 10 Contributor
  • Moderator
17470 solutions 157897 answers

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}

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. <pre><nowiki>#main-window #print-preview-toolbar button[label="Close"] {-moz-box-ordinal-group:0}</nowiki></pre> ---- *https://www.userchrome.org/how-create-userchrome-css.html *https://www.userchrome.org/what-is-userchrome-css.html