Child Theme Print CSS

  • elarson

    #8466

    I am looking for some advice. I am trying to make the print style for almost everything that is part of the main content the same as the child theme and the graphene style sheet. I plan to use @media print rules for anything that should not be printed. I really don’t want to duplicate the entire CSS.

    For some reason, there are elements that are still not displaying in print, for example warning_block images. As I understand, the @import of the graphene CSS should happen automatically. I have turned of “Enable print CSS for single posts and pages” in the Graphene options.

    I’ve done as suggested in this post to point to the child theme CSS: https://forum.graphene-theme.com/graphene-support/how-can-i-move-this-to-the-child-theme-css:

    function register_custom_print_style(){
    if ( ! is_admin() ){
    wp_register_style( 'custom-print', get_stylesheet_directory_uri() . '/style.css', array( 'graphene-stylesheet' ), false, 'print' );
    }
    }
    add_action( 'init', 'register_custom_print_style' );

    function enqueue_custom_print_style() {
    if ( is_singular() ){
    wp_enqueue_style( 'custom-print' );
    }
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_custom_print_style' );

    I’ve also tried the following, which seems the easiest way to do this:

    add_action( 'wp_enqueue_scripts', 'child_print_style' );
    function child_print_style() {
    wp_enqueue_style( 'child_print_style', get_stylesheet_directory_uri() . '/style.css', array( 'graphene-stylesheet' ), 'false', 'print' );
    }

    Any ideas?

    Anonymous

    #40803

    I don’t see a print stylesheet from child theme in your site. Have you properly enqueued it?

    elarson

    #40804

    No, I don’t want a separate print style sheet. I want to use the child theme and include specific print rules. An example of doing it this way is the http://html5boilerplate.com/

    Mod

    Kenneth John Odle

    #40805
    Quote:
    No, I don’t want a separate print style sheet.

    The link that you pointed to is all about creating a separate print style sheet for the child theme.

    Quote:
    I want to use the child theme and include specific print rules.

    A child theme is good. But print style rules should go in a print style sheet. That is a best practice. Why don’t you want a separate print style sheet?

    Quote:
    An example of doing it this way is the http://html5boilerplate.com/

    Is there a specific page on that site that shows what you are looking for? I’d rather not guess, and I don’t have time to go through the entire site.

    Quote:
    For some reason, there are elements that are still not displaying in print, for example warning_block images.

    Do you have a page where this is happening that we can look at?

    BTW, if something is hidden by {display:none;}, you can generally override it by {display: block;} Have you tried that?

    elarson

    #40806

    Thanks for your reply.

    Sorry for not including this. For the example, see @media print rules starting at line #190 https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css (it’s a link from http://html5boilerplate.com)

    From what I am aware, as someone who works in print a lot, @media queries for print are the most efficient to decrease the number of HTTP requests during the initial load. I believe that media queries are considered a best practice in CSS3 and for responsive design purposes.

    Here is a link to a test page I am working on that will eventually be on-screen *and* printed documentation.http://goo.gl/P1Hb24. If you do a print preview you will notice that the warning_block images do not appear.

    I would be very interested in hear any thoughts any of you have about this.

    Just as a note, I’m okay with knowing the actual rules I want to include, e.g., {display:none;} so this is more about the concept of using a single child theme style sheet with @media print rules.

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

  • You must be logged in to reply to this topic.