Exclude sidebar and header from printing

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @readonecc,

    You can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

    CSS Tutorial: https://www.w3schools.com/css/
    CSS Units: https://www.w3schools.com/cssref/css_units.asp

    Put your CSS on print style:

    @media print {
    /* put you CSS here */
}

    Best Regards

    Thread Starter Mohammad Ridwanullah

    (@readonecc)

    Hi, thank you for your information.
    I successfully add the code and remove the sidebar, but the sidebar area still included while printing, I want to make it full screen.
    This is my code:

    @media print {
a[href]:after { content: none !important; }
#footer, #header, #sidebar-primary, #right-sidebar, #site-header-inner, #scroll-top, #sidebar { display:none !important; }
}

    and this is the result:
    https://drive.google.com/file/d/10a_Hb-MfhEzKFOo25EjmZZ5VN-A_sobQ/view?usp=sharing

    I also tried to exclude breadcumb for being printed but I can not find the element ID.

    Thank you

    Thread Starter Mohammad Ridwanullah

    (@readonecc)

    Hi, the problem solved by these codes

    @media print {
a[href]:after { content: none !important; }
#footer, #header, #sidebar-primary, #right-sidebar, #site-header-inner, #scroll-top, #sidebar { display:none !important; }
/*Remove Sidebar Container*/
.content-area {
    float: left;
    position: relative;
    width: 100%;
		margin-top: 50px;
		padding-left: 10px;
        padding-right: 10px;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: #f1f1f1;
}
.page-header, .has-transparent-header .page-header {
    display: none;}
}

    I am now finding the css settings to setup the top and bottom margin, if you have information regarding this please provide me that. thank you

    Thread Starter Mohammad Ridwanullah

    (@readonecc)

    I want to add more space here.

    https://drive.google.com/file/d/1FvbkZjvmyFxggtYUjr3Swd2WdxBcrknu/view?usp=sharing

    Hello @readonecc,

    I’m glad it is solved.
    Regarding the second page on the printing, I’m not sure perhaps you can manage it on the print settings or using the “body” class; like 

    @media print {
    body.page {
        margin: 100px 0;
    }
}

    Best Regards

    Thread Starter Mohammad Ridwanullah

    (@readonecc)

    Thank you @skalanter, it works like charm.

    I have more problem if you don’t mind,
    I tried to use ocean stick anything to make my sidebar sticky, but it make an empty blank page after the last page, I tried to find the element but no luck, and I removed the stick anything plugin.

    If you have any information about this please provide me it, I need to make the sidebar sticky but I don’t want to add an empty page to the print layout.

    Thank you.

    Hello @readonecc,

    You’re welcome.
    I’m glad it is solved.

    Regarding your “Ocean Stick Anything” plugin issue, I need to know the steps to replicate it.
    Also, could you please share a live URL from your issue or share screenshots?

    You can upload your files to one of the following online services:

    Sending a live URL and screenshots of your issues would be helpful for faster support.

    ________

    For troubleshooting, please do the following steps and let me the results:

    1- Head over to WP Dashboard > Plugin.
    2- Deactivate all plugins.
    3- Then, first activate the Ocean Extra plugin.
    4- Check your issue.
    5- Then, activate your plugins one by one
    6- After activation of any plugins, check your issue

    Note: if you have a cache plugin or server cache. You need to clear its cache contents or disable them.

    Best Regards

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Exclude sidebar and header from printing’ is closed to new replies.