WordPress.org

Ready to get started?Download WordPress

Forums

twenty eleven: how to print header image and widgets? (6 posts)

  1. webazoid
    Member
    Posted 1 year ago #

    I have 2011 running. when i click print, it doensn't print my banner (png image) in the header. additionally, it doens't print my widgets at the bottom. i'd like for everything on screen to be printed. how can i go about doing this? thanks.

    i'm a newbie. just show me where to look under which css, etc.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You should be using a child theme to make any modifications to a theme - otherwise, all of your changes will be overwritten when WP is updated.

    http://codex.wordpress.org/Child_Themes

    That said, there's a whole section of print styles in the twentyeleven style.css file - starting on about 2495 with this:

    /* =Print
    ----------------------------------------------- */

  3. webazoid
    Member
    Posted 1 year ago #

    i do have a child theme:

    [Too much code - please see http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    Do I copy this section into the child theme in the editor? using wp 3.5.

    Also, which comments w/in the chuck of code I just posted do I edit out?

    I change "none" to what?

    Thanks.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Cool - glad to hear you have a child theme - see the link above about posting code here - for CSS, you need to post a link to your site instead anyway.

    I'm not sure off the top of my head which portions you'll need to change so they print and it's too late here for me to do it now. I'll check back tomorrow if no one else has picked this up or you have not sorted it out.

    In general, if the code you are changing says "display: none;" you can make it visible on the page again by using "display: block" or "display: inline" depending on the element and context. You will also need to put all these changes for printing inside a media query like this:

    @media print {
       put the styles in here
    
    }

    For example, I THINK this will keep your header images - the print styles says:

    #branding img {
    		display: none;
    	}

    So in your stylesheet put:

    @media print {
    
       #branding img {
    	display: block;
       }
    }

    If that does not look right, try "display: inline;"

  5. webazoid
    Member
    Posted 1 year ago #

    thanks. that code works! I know see my background image when printng. is a plugin or print-all feature/code that I can add? Basically, I want a WYSIWYG on my screen when I hit the print button.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't know - try searching the plugins page.

    Or you could just comment out or delete the print section of the parent theme style.css file - you'd need to redo that each time the theme is updated, but that might be the easiest way to do it.

Topic Closed

This topic has been closed to new replies.

About this Topic