Increase font size only on content but not on Print version

  • Anonymous

    #9321

    I talked about this a bit here: https://forum.graphene-theme.com/graphene-showcase/up-past-midnight But decided to start a new thread since it is a new topic.

    I found that I can increase the default font size just in the info section of Posts and Pages by using the following CSS thanks to Ken.

    .entry-content {font-size: 14px !important;}

    But the problem with this approach as opposed to using the Graphene Options font size is that it will make the Printable version also 14px.

    If I change the font size from Graphene Options–> Display [Tab]–>Text Style Options–>Content Text–>Font Size, it will change the font size for both content container and the widget area. But now the Print version have the default font size (just like I want it to be).

    This is why I try the CSS manual edit with the above code. Is there way to prevent the Printable version from taking entry-content parameter from the custom CSS in the Child Theme just like the Graphene Options?

    Thank you.

    Mod

    Kenneth John Odle

    #43355

    What happens if you remove the !important declaration?

    Anonymous

    #43356

    Even if I removed !important the Print version still prints in 14px. I think one solution is to enter .entry-content {font-size: 12px !important;} or whatever the Graphene default font size in print CSS file. But I was thinking may be I don’t have to write two lines of CSS in two files in order to get this to work (hence reducing the load time/CSS code lines).

    Also, what is the Graphene default font size? 12px?

    Anonymous

    #43357

    I wonder what element the Graphene default options are using to change the content front size? May be @screen or @media?

    Mod

    Kenneth John Odle

    #43358

    Three thoughts:

    1) Are you declaring this in your child theme’s stylesheet? If so, it should be

    @media print {.entry-contest {font-size: 12pt;}}

    2) Use points (like I did above) for specifying print font sizes, since printers use points, not pixels.

    3) Did you remember to turn off Graphene’s default print stylesheet?

    You can also add a separate style sheet for print to your child theme and enqueue it in your child theme’s functions.php file:

    function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/print.css', array(), '1.0.0', true );
    }

    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

    For those interested, info on enqueuing scripts is here:

    Anonymous

    #43359

    Hi Ken,

    Thank you so much for the reply.

    1) No I do not provide any font-size for pint media. It comes directly from the Graphene default print CSS file. (But I have removed some elments from Print media like header image and such…)

    2) I have not specified the print media font so, no.

    3) I don’t see any problem with using the Graphene default print CSS. I think the font size there is perfect. The only problem is that if I increase the content font size using my own CSS .entry-content {font-size: 12px !important;} it also changes the print version’s text. I don’t understand why when I changed from Graphene options, it only changes on the screen.

    I guss I can simply request .entry-content {font-size: 12pt;} in @media print while having 14px on the main CSS file in the Child Theme. It is odd how the printable version is not affected when the font size is changed using the Graphene options, but it is affected when the font size is changed using the entry-content

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

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