Publish Insights 18 September 2021
My, my, my people visit, at all times; find some interest for archive. Hit print button, and surprise; useless sections, in disguise. Stop, programmer time!
Print Only What’s Necessary
Sooner or later, a website visitor will hit the print button. Many page elements and sections beneficial to formatting and navigating the site are superfluous when printing. The printed page not only looks bad, this wastes paper. As a site designer, suppress unnecessary content with a CSS no-print class.
During the design phase, as you visit each type of page, identify which sections or page elements are unnecessary. Some are global; others are specific to a product or blog page. You may need to print out a sheet and circle everything that should not show up.
Do you need the navigation bar to print? What about the page footer? How useful are buttons on a piece of paper? To suppress printing of non-essential elements, create a CSS class based on @media print set to display: none;. Then apply it to each unnecessary element.
Programmer Time
Shopify is an e-commerce platform on which merchants build custom websites based on themes. Interchangeable themes adhere to similar underlying structure based on programming code called Liquid.
Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate. Preview before activating when done.
Now you access the Liquid programming code with Actions: Edit code menu. Within the Assets area, open your CSS file. It might have the .css.liquid or depreciated .scss.liquid extension.
Scroll to the bottom to insert the following code:
@media print { .no-print, button { display: none; } }This example includes the button style. You may also append other CSS classes followed preceded by commas. It is a little time consuming to identify all the areas that require suppression. Some areas within Sections or Snippets can require wrapping in <div class="no-print"></div> tags for site-wide impact.
This feature is currently enabled throughout the ClinicalPosters website. Disable background printing within Print dialog box options. Blank pages can result from delayed page loading. Saving a page as a PDF may ignore non-printing page sections.
