Print style help

  • Author
    Posts
  • #79880

    chriswilson667
    Member
    Original poster

    I’m trying to my blog up so that when somebody prints a post/page, the header, sidebar and footer ARE NOT displayed.

    I think it’s going to look something like this but I’m not having any luck…

    /* Print Styles */
    @media print {
    body {background:white;
         font-size:10pt;
         margin:0 }
    #sidebar { display:none }
    #header { height:75px }
    #content{ margin-left:0;
         float:none;
         width:auto }
    #footer, .ad { display:none }
    }

    The blog I need help with is: usd247.com

    #80002

    rezzap
    Staff

    Hi Chris,

    Try adding the !important declaration to your styles to see if that helps. There may be a global print stylesheet that’s causing a conflict.

    Thanks!

    Rebecca

    #80004

    chriswilson667
    Member
    Original poster

    I’ve tried that several times in different areas and it hasn’t worked – I think there’s something going on theme specific but I’m not sure what.

    #80010

    rezzap
    Staff

    Hi Chris,

    I just noticed you are missing the ‘;’ at the end of your display: none style. For example,

    #sidebar { display:none }

    should be,

    #sidebar { display:none; }

    The same for the footer. Try this and see if it helps.

    Thanks,

    Rebecca

    #80275

    chriswilson667
    Member
    Original poster

    Just now getting back to this… still not working:

    /* Print Styles */
    @media print {
    	body {
    		background: white;
    		font-size: 10pt;
    		margin: 0;
    	}
    
    	#sidebar {
    		display: none !important;
    	}
    
    	#header {
    		height: 75px;
    	}
    
    	#content {
    		margin-left: 0;
    		float: none;
    		width: auto;
    	}
    
    	#footer, .ad {
    		display: none !important;
    	}
    }
    #80276

    rezzap
    Staff

    Hello,

    The proper selectors for your site should be ‘.sidebar’, ‘#footer-widgets’ and ‘#footer;. There is no ‘#content’ and I’m not certain what the ‘.ad’ selector is so you’ll want to confirm these and use the proper selectors for your site.

    Thanks,

    Rebecca

    #80280

    chriswilson667
    Member
    Original poster

    With these changes and some help from the CSS forum I was able to get it to work… here’s the code:

    /* Print Styles */
    @media print {
    	body {
    		background: white;
    		font-size: 10pt;
    		margin: 0;
    	}
    
    	.sidebar {
    		display: none !important;
    	}
    
    	#header {
    		display: none !important;
    	}
    
    	#jp-post-flair {
    		display: none !important;
    	}
    
    	#footer-widgets, .ad {
    		display: none !important;
    	}
    
    	#footer, .ad {
    		display: none !important;
    	}
    
    	#content{
    		margin-left:0;
    		float:none;
    		width:auto;
    	}
    
    	#jp-relatedposts {
    		display: none !important;
    	}
    
    	.row .eight {
    		width: 100%;
    
    	.post-meta {
    		display: none !important;
    	}
    
    	.post-navigation {
    		display: none !important;
    	}	
    
    	}
    }

    Thank you for your help!
    Chris

    #80281

    rezzap
    Staff

    Glad you got it sorted Chris!

    Cheers,

    Rebecca

The topic ‘Print style help’ is closed to new replies.