Pdf print of the page

Home Forums Modern Pdf print of the page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18214

    fxp
    Participant

    Pdf print of the page

    Resolved

    Hi,
    thank you very much for this beautiful theme.

    I tried to print my home page with pdf creator and the result was… well disapointing. I tried on your demo site just to check and I got about the same thing (see attachment).

    Is there a something that I could copy from the main css to a “print css” to get a better rendering when a visitor prints my page?

    Thank you for your answer

    F.

    #18215

    Oliver Juhas
    Keymaster

    Hi fxp,

    I’m sorry but the theme is not print ready. I might introduce print compatibility in the future, but this was deliberate decision when building the theme. Currently I offer support for print only in my paid premium themes.

    If you want to introduce print support for Modern theme, you will need to use custom CSS. Here is an article full of print stylesheet tips for you to start: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ and https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 5 months, 2 weeks ago by  Oliver Juhas. Reason: Adding additional resource
    #18220

    fxp
    Participant

    Hi,

    Thanks a lot Oliver. I understand. Nice user help with the links.

    I managed to add the @media=”screen, print” to the link of the main.css, but the result is poor. I guess I would be better off with using the mobile version for the print… No arguing why this is for the paid option. It really is a challenge.

    Bye and thanks again.
    F.

    #18230

    fxp
    Participant

    hi again,

    in case someone needs a start for this, here is my child-theme css:

    
    @media print {
    
      body {
        width: 100%;
      }
    	.site-header-navigation {
    		display:none;
    	}
    	.site-header-content {
    	background:none;
    	}
    	.svgicon {
        fill: black;
    	}
    	div.posts.posts-list {
    		display: initial;
    	}
    	.type-post{
    		display: table;
            page-break-inside: avoid;
        }
    	.entry-content-container {
    		display: table;
    		page-break-inside: avoid;
    	}
    }
    

    The site-header background is still there… but it is fine for me.
    The tricky part was to override the “display table” for the posts-list.

    Thanks again.
    Regards
    F.

    #18233

    Oliver Juhas
    Keymaster

    Hi fxp,

    Thank you for sharing the CSS code!

    I would like to point out there is no display: table; applied on posts list. It actually use CSS flexbox instead.

    Also, I don’t recommend using display: table; and display: initial; in your code. There is nothing really bad with that code, but I suggest using display: block; instead. That should work just fine and makes more sence in what how the elements are actually displayed.

    To get rid of intro (background) image just add this CSS:

    .intro-container {
      display: none !important;
    }

    Also, usually it is a good idea to remove header, footer and sidebar from print, so I suggest to add this also:

    .site-header,
    .site-footer,
    .sidebar {
      display: none !important;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18238

    fxp
    Participant

    Hi Oliver,

    Thanks a lot for your nice advice.

    You really are great!

    Best regards
    F.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.