Styling a print page?

Design help General
1

Hello folks!

I’m finishing up a website for a client, which is a new website for his real estate listings - and he is asking for a final request which is a print page for the page which shows an individual listing, after clicking on a button from the regular listings page where you can see all of them in a snapshot.

I’ve tried to explain that printing is quite near obsolete, but because an ask is an ask, and I will do my best to fulfill it - I am trying to offer this feature.

However, it seems that after hours of searching, styling a print sheet is not a well supported function within Webflow, and understandably so. How would you guys recommend that I style this sheet then?

I’ve attached a few screenshots, and how it currently turns out. We basically are trying to print the exact replica of the page, just in black and white except for the images that are included. It seems that box shadows and text shadows also transfer over to the print page, but layout such as columns do not.

38
382846×1426 694 KB

Regular listings page ^ when you click on print friendly, it takes you to the next image

50
502826×1382 1.15 MB

This is the page we’d like to be able to print

56
561998×1312 208 KB

This is the current print dialog, and how it looks.

Thank you all!

Here is my site Read-Only: Webflow - Kapell

2

Hi there, make sure you provide the correct share link!

3

Sorry about that ! Correct link uploaded!

4

Hello @Thomas_Kim,

You might have to add some instructions for your users to set on the print settings. Since the print preview from chrome only displays what is on your 100vh you have to change the scale on the print preview settings, I did it and this is what I got at 50% scale

46%20AM
46%20AM1000×661 43.4 KB

43%20AM
43%20AM1001×664 42.7 KB

Maybe you can add some text explaining what scale is needed to print what info you want your user to print, but I don’t think you can set anything directly on webflow so that your users can print the exact info you want them to print. I hope this helps.

5

There are ‘click to print’ plug-ins you could consider adding. They create a neat page based on the content. I don’t use them so I don’t have recommendations but I’m sure a search would give you several options to try.

6

Hi Sarah! Thanks for the reply.

I’m seeing a ton of plugins for wordpress, but none for webflow? Am I missing something here?

7

Thank you Pablo, this is definitely a solution that works… but I would love to not have to add any blurb such as this if I could avoid it! Will keep in mind though - I appreciate it!

8

There is nothing stopping you from including a custom print style-sheet (remote hosted) or including a style block using a media query targeting print on your page. Start by hiding elements that don’t need to be displayed. You can further tune using additional CSS declarations. Yes this is “custom code” but it’s really just CSS.

1 Like
9

@Thomas_Kim this is the sort of thing I meant https://www.printfriendly.com/ . There’s a HTML option you could use with webflow.

1 Like
10

@Thomas_Kim - Here is an example of a CSS block that would help layout the page for print. I only spent a couple of minutes on it to give you a working example. This code is specific to your current layout the Home Listings Collection Template. Of course if you renamed any classes or changed the styles, you would have to override the code block provided.

<style>
@media print {
  .body-5,
  .footer {
    background-color: #fff;
  }
  .headertop {
    display: none;
  }
  .heading-22 {
    color: black;
    text-shadow: none;
  }

  .info {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ffffff;
  }
  .scategories,
  .scattagories,
  .footerentry,
  .footerentryleft,
  .link-3 {
    color: black;
  }
  .section-6{
    height:100%;
    background-image:url() !important; 
  }
}
</style>
1 Like
11

Thank you so much for this Jeff - and one more question… if I were to include this into the section then does this apply to all the collection list pages? Or will I need to copy as I go?

12

You would add this to the custom code → before body - (Template page settings). I only looked at one template; the one referenced. It would then work anytime someone used the print dialog.

If you want a playground, this is what I used.

1 Like
13

Hi @webdev is there any explanation why a custom print style-sheet needs to be remote hosted as opposed to custom code on the page in Webflow?
Cheers

14

@Sam_Sharpe → A browser does not care if your css was included on the page or available as an external file whatever works for you.

15

We use www.printfriendly.com on several client websites and it works really good. You can use individual CSS styling and control by classes or id what should be printed.

1 Like