Coraline Print Style

You don’t need to do anything, just print a page (or go to print preview in your browser) and the print style is automatically applied. ??

Thanks for the reply. I guess I was expecting more style. It prints without all the extra stuff like the header, which is good, but it has wonky margins, etc. just like printing a regular web page.

Is it possible through the print styles to set margins, etc. so it is more like a document?

Thanks again.

If you’d like to make tweaks to the print syles, you can always try adding your own print styles through a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

https://codex.www.ads-software.com/Child_Themes
https://op111.net/53/

There are also various print stylesheet plugins if you prefer to go that route.

https://www.ads-software.com/plugins/search.php?q=print+styles

Thank you Kathryn. I am currently using a child-theme so I will try tweaking the styles and see what happens.

Sorry, but I can’t figure out what part of the print styles to modify. The page prints with the right-half of the page cut off. I think I want to modify the .entry-content.

Here is the text from my print styles:

/* =Print Style
-------------------------------------------------------------- */
@media print {
	body,
	pre,
	ins {
		background: none !important;
	}
	body, input, textarea {
		font: 12pt Georgia, "Bitstream Charter", serif;
		line-height: 1.5;
	}

	#container {
		clear: both !important;
		display: block !important;
		float: none !important;
		position: relative !important;
	}
	#content {
		width: 100% !important;
	}
	#header {
		border-bottom: 1pt solid #000;
		padding-bottom: 18pt;
	}
	#colophon {
		border-top: 1pt solid #000;
	}
	#site-title,
	#site-description {
		float: none;
		line-height: 1.4em;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	#site-title {
		font-size: 13pt;
	}
	#site-description {
		font-size: 10pt;
	}
	.entry-content {
		font-size: 10pt;
		line-height: 1.5em;
		padding-top: 15pt;
	}
	.entry-title {
		font-size: 16pt;
		padding-top: 36pt;
	}
	#access,
	#header img,
	#respond,
	.comment-edit-link,
	.edit-link,
	.navigation,
	.page-link,
	.widget-area,
	.sharing,
	.wpl-likebox, {
		display: none !important;
	}
	.sidebar-content #content-container {
		float: none;
		margin: 0 0 0 -35.4%;
	}
	.sidebar-content-sidebar #content-container {
		float: none;
		margin: 0 0 0 -24.8%;
	}
	.sidebar-sidebar-content #content-container {
		float: none;
		margin: 0px 0px 0px -49.5%;
	}
	#content-container,
	#header,
	#footer {
		margin: 0;
		width: 100%;
	}
	#content,
	.full-width #content,
	body.no-sidebars #content {
		margin: 24pt 0 0;
		width: 100%;
	}
	.wp-caption p {
		font-size: 11pt;
	}
	#site-info,
	#site-generator {
		float: none;
		width: auto;
	}
	#colophon {
		width: auto;
	}
	#comments {
		font-size: 10pt;
		line-height: 1.5em;
	}
	img#wpstats {
		display: none;
	}
	#site-generator a {
		margin: 0;
		padding: 0;
	}
	.generator-link {
		background: url("images/wordpress.png");
	}
	#entry-author-info {
		border: 1px solid #e7e7e7;
	}
	#content-box {
		display: inline;
	}
	.home .sticky {
		border: none;
		background: transparent;
	}
}

Thanks for your help.

Oops, it is the left half of the page that doesn’t print.

A good troubleshooting technique for CSS is to remove or comment out your changes. Then you can add back a piece at a time, testing the site in between each change. When the problem returns, you know the issue is with the last piece of CSS that you added back.