X
點擊此處開啟此網站的行動版。

技術支援討論區

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.

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.
附加的畫面擷圖

被選擇的解決方法

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}

從原來的回覆中察看解決方案 1
jscher2000
  • Top 10 Contributor
8695 個解決方法 71066 個答案

有幫助的回覆

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
17477 個解決方法 157949 個答案

選擇的解決方法

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