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

ஆதரவு மன்றம்

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

  • 2 replies
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by cor-el
பதிவிடப்பட்டது

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

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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

பயன்பாடு

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

கூடுதல் தகவல்

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
17475 தீர்வுகள் 157945 பதில்கள்
பதிவிடப்பட்டது

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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