• Thank you for the lovely theme!

    I am trying to create a print friendly css for a install.

    I have created print.css ( http://pastebin.com/9wgh7vWk ) and i get full page content of the post only when sidebars are disabled in layout.

    If a sidebar is enabled in layout, half of the page is empty and in remaining half only content is being printed.

    I would like to know why there is sidebar space is still left empty in the print page, although it is not being displayed. Or if any one had already customised print css, would be able to shed some light.

    Any help is appreciated.

    @media print {
    body {background:white;
    font-size:10pt;
    margin:0 }
    #wrapper { display:block }
    .content, .page { width: auto}
    #sidebar { display:none }
    #nav-topbar { display:none }
    #header { height:90px }
    #content{ margin-left:0; float:none; width:auto }
    #content a { font-weight:bold; color:#000066; text-decoration:underline }
    .content .post,
    .content .page { margin-left:0;
    float:none;
    width:100% }
    .col-1c .sidebar,
    .col-2cl .s2,
    .col-2cr .s2 { display: none }
    #comments { display:none }
    #footer { display:none }
    h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
    page-break-inside:avoid }
    h3 { margin-left:10px;
    margin-bottom:0px;
    padding-bottom:0px }
    .post-tags, .related-posts, .post-nav, .heading, .s1, .s2, .sidebar, .sidebar-content { display:none }
    blockquote, table, pre { page-break-inside:avoid }
    ul, ol, dl { page-break-before:avoid }
    img.centered { display: block;
    margin-left: auto;
    margin-right: auto; }
    img.right { padding: 4px;
    margin: 0 0 2px 7px;
    display: inline; }
    img.left { padding: 4px;
    margin: 0 7px 2px 0;
    display: inline; }
    .right { float: right; }
    .left { float: left }
    img { page-break-inside:avoid;
    page-break-after:avoid; }

    }

Viewing 1 replies (of 1 total)
  • KunststoffWeb

    (@kunststoffweb)

    I’am facing the same problem. The sidebar content can be set invisibles but they still take space.

    This …
    .sidebar, .s2, .s2 { display:none !important }

    …doesn’t work out. It seems to have something to do with the toggle-mechanism of the sidebars which has been realised with jQuery. But I was not able to find the hook. Can anyone assist?

    Thx + rgds

Viewing 1 replies (of 1 total)

The topic ‘Print Friendly CSS’ is closed to new replies.