Webpage printer-friendly: how to hide unwanted elements and sidebars

You can make a webpage printer-friendly and clutter-free using CSS Stylesheet by hiding unwanted page elements with "@media print" tag set the < class > or < div > to { display:none; }.

Recently, I was trying to print one of my blog posts but, it was not appearing quite aligned. There were few elements which appear either broken or not proper in the print preview mode. Hence, I thought of making the webpage printer friendly by hiding unwanted elements.

That’s when I disabled the top navigation bar, footer widgets, social links, and a few other items that I felt useless in print format.

Hiding the element was super easy, and it does not affect the actual website looks. The changes will be only applicable when we give a print command.

All you need is access to CSS stylesheet that’s used for front-end designing, and a browser with developer mode (I personally use Chrome browser). I’m using WordPress CMS, and it has a very simple yet powerful editor for editing CSS file within the browser.

Let’s get started with the demo and procedure, I think you are already set with the pre-requisites mentioned.

How to make a webpage printable using CSS?

I believe every CMS has some or the other way to edit the CSS stylesheet file. For WordPress CMS, access the Editor option under the “Appearance” tab.

At the end of all the existing code, copy-paste below snippet.

.... some existing code...
@media print {
}

Next steps to find the element class to be hidden. Let me take the really simple example of hiding the social share bar.

Step 1: Go to any blog post and hover the mouse on the “share-bar” icons.

Step 2: Right-click and select the option “Inspect element”. The developer options will be invoked, and a small window will be appearing.

Step 3: Select between the line of codes under the “Elements” tab such that the entire share-bar is highlighted on selection. [click to view full screen]

Element Selections in Developer mode in chrome

Step 4: Note down the class of the selected share-bar. Let say it appears as <div class="sharrre-container">...

Step 5: Copy the class and paste it into the mentioned snippet code with the display element set to none.

Step 6: Hit on the “Update” button, and watch the changes effect on the live site by hitting a print command.

Blog article webpage printer friendly

In the above example, the final code after adding the “sharrre-container” class should look like:

... some existing code...
@media print {
         .sharrre-container {
               display:none;
         }
}

Make sure that @media print has it’s own opening and closing curly brackets { ... }. Also, each class has its own curls.

Similarly, you can inspect all other elements and hide the unwanted widgets from appearing in the printable format.

The final output will be available once you update the CSS code, hard refresh the blog post, and try to print the webpage again.

Video on how to make webpage printer friendly

I know the above code snippet sounds quite complicated but, it’s not. However, make it understand easily I’ve captured a part of screencast on hiding the YouTube video whitespace.

How to make a webpage printer friendly using CSS "@media print" tag?

I hope the video helped with understanding the basics. In a similar way, you can actually inspect other elements, and hide it using display: none; tag.

What did you think about this?

I personally added the code snippet and hidden all unnecessary element class and div to make my blog printer-friendly.

You can even try Cmd+P (in Mac OS) or Ctrl+P (in PC) to see how this post appears in print preview mode. And feel free to print and save it as a password protected PDF file in your local machine.

Drop in below comments if you are facing any challenges, happy to help!

If you've any thoughts on Webpage printer-friendly: how to hide unwanted elements and sidebars, then feel free to drop in below comment box. Also, please subscribe to our restoreBin YouTube channel for amazing videos tips. Cheers!

Share

Leave a Reply

Your email address will not be published. Required fields are marked *