What is the best way to give users a printer-friendly page option?

Design help Custom code
1

BS"D
I’m trying to implement a printer friendly option for the user. I looked it up on the Webflow forum and then on Stack Overflow. I got the following answer there:

You can use CSS @media types.

<p> this should be part of the printed page </p>

<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>

A simplistic style sheet for the above would be:

@media screen
{
   /* whatever styles you have for display */
}

@media print
{
   .noprint { display: none; }
}

In the above, the

with the class=“noprint” will be displayed on screen as usual, but it will not be printed.

How do I implement something like this in webflow?

Thanks

2

In Webflow a print stylesheet can only be done by adding custom code. BTW: Most browsers handle media for screen quite well for print. When there are exceptions, you can add specific custom media queries for print. There are some good (but older) articles on css for print media by Eric Meyer. A more recent article can be found here: How To Set Up A Print Style Sheet — Smashing Magazine

8

hm, did u find the easiest solution?

10

I ended creating a custom class as said above.
Go to Custom Code in the Project Settings, and in the header code put:

<style>
@media screen
{
/* whatever styles you have for display. Can be left blank */
}
@media print
{
.noprint { display: none; }
}

</style>

Now every time you give an element the class noprint it will not display when printed.
This is a very easy solution