Printing CSS
  • Hi Kavin,

    Is there a way to customize the CSS in a child theme so all the content in the tabs component prints out on a page in the order of the tabs. Currently the component prints out as an outline of the component and the content of the selected tab. Would be quite useful to add css to include all the content when the user want to print the page.

    Thanks,
    Dave
  • Hello Dave, Most of the themes contain separate print.css that helps you ease this task. Further you can customize the stylesheet and include a media -print section as like


    @ media print {
    .ui-tabs-panel { display : block !important; visibility : visible !important; background : 0px; border: 0px; box-shadow : none; border-radius: 0px; }
    .wp-tab-content .wp-tab-title { display : block !important; }
    .ui-tabs-nav { display : none !important; }
    }


    You can try this on Optiosn page -> Styles -> Custom css as well.
  • Hi Kavin,

    Okay I have the CSS added to control the printing on the options page. Is there CSS to print all content in all the tabs?

    Thanks,
    Dave
  • Actually, the issue is formatting each tab to print the same. I have each tab printing, the issue is the first tab content prints in a narrow column the remaining tabs print in a wider format. So I would prefer for all to print in the wider format. Ideas?

    Thanks,
    Dave
  • Hi Dave,

    There was an formatting issue with the last snippet i posted, please try this - http://pastebin.com/nZHyHfHv, first in the custom css tab, if it doesnot seem to work, please

    1) Try clearing the browser cache.
    2) Try appending this snippet into you theme's stylesheet.

    That said, there is also likely your theme might have a print.css stylesheet.
  • Hi Kavin,

    The new CSS took care of everything except the first tab contents are formatted in a taller narrow column. The remainder of the tabs content format is wider and consistent. Just seems to be an issue with the contents of the first tab.

    Thanks,
    Dave
  • Hello Dave, this must some style rules from the theme/other plugin. Can you share a link to the test page please? :)
  • Hi Kavin,

    I'm developing locally so no link to post at the moment. The theme is Twenty Eleven with some styling in a child theme. I can post the CSS on a server for the theme and child theme if that works.

    Thanks,
    Dave
  • How are you previewing the Print styles? Like Web developer toolbar or similar?

    If yes, can you please help me out with a screenshot of Firebug or chrome inspector?

    Just to be clear,
    1) Right click on the first tab contents, Inspect element -> HTML tab.
    2) Make sure the ui-tabs-panel div is selected in the html View.
    3) Please take a snap for me. :)
  • I have the screen captures posted in a .zip file:
    http://www.mediawerx.com/clients/samples.zip
  • I've updated the code - http://pastebin.com/nZHyHfHv. Please try and let me know.
  • Hi Kavin,

    Okay, this project was on hold for awhile. I now have a test page posted here:
    http://afcfs.com/porte-cocheres2/
    The tab formatting for print is working well. Is there a way to print the content of all the tabs? Right no it is only printing the tab that is selected.

    Thanks,
    Dave
Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter

In this Discussion

Tagged