Child Theme Print CSS
-
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?
I don’t see a print stylesheet from child theme in your site. Have you properly enqueued it?
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/
ModQuote: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?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.