Genesis print style plugin assistance needed

[natasha]

Even with the Genesis print style plugin installed, the printed copies are still showing many elements that I would rather not have showing. I only want the <h1>, <h2>, <p>,

and
• content to show but I'm getting a header, date and author videos and other footer stuff.

  I'm using the Cafe Pro child theme and the site is http://www.vokallista.org.au. Any help would be very much appreciated.

  Natasha

http://www.vokallista.org.au/

[Brad Dalton]

I would look in the Genesis Sample theme which now includes print styles.

Add them after your Media Queries and modify according to your own preferences.

/* # Print Styles
---------------------------------------------------------------------------------------------------- */

@media print {

	*,
	*:before,
	*:after {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	a[href^="javascript:"]:after,
	a[href^="#"]:after,
	.site-title > a:after {
		content: "";
	}

	thead {
		display: table-header-group;
	}

	img,
	tr {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 2cm 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	blockquote,
	pre {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	.content,
	.content-sidebar {
		width: 100%;
	}

	button,
	input,
	select,
	textarea,
	.breadcrumb,
	.comment-edit-link,
	.comment-form,
	.comment-list .reply a,
	.comment-reply-title,
	.edit-link,
	.entry-comments-link,
	.entry-footer,
	.genesis-box,
	.header-widget-area,
	.hidden-print,
	.home-top,
	.nav-primary,
	.nav-secondary,
	.post-edit-link,
	.sidebar {
		display: none !important;
	}

	.title-area {
		text-align: center;
		width: 100%;
	}

	.site-title > a {
		margin: 0;
		text-decoration: none;
		text-indent: 0;
	}

	.site-inner {
		padding-top: 0;
		position: relative;
		top: -100px;
	}

	.author-box {
		margin-bottom: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		orphans: 3;
		page-break-after: avoid;
		page-break-inside: avoid;
		widows: 3;
	}


	img {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	blockquote,
	pre,
	table {
		page-break-inside: avoid;
	}

	dl,
	ol,
	ul {
		page-break-before: avoid;
	}

}

---

Tutorials for StudioPress Themes.

[natasha]

Hi Brad

Thanks for getting back to me. I think part of my problem is that I don't know what half of these styles mean. Should I just add them all to the display: none. Or would you know if descriptions of all the styles is available somewhere?

Natasha

[Brad Dalton]

Try this resource http://www.w3schools.com/css/

---

Tutorials for StudioPress Themes.

[natasha]

That reference is very helpful particularly the link to the list of css selectors. From those references I should be able to figure out what each selector is for within my theme.

I am still a little confused about the various css files though. Should I deactivate the Genesis Print Style plugin so that there is one less css file to worry about? Then would I make the changes in the Genesis sample style.css as you originally suggested or do I copy the Print Style section from the sample theme into the style.css in my Cafe Pro child theme?

[Brad Dalton]

Yes and you'll need to spend some time to work out how to use a browser inspector like Google or Firebug. There are many tutorials and videos on how to do this. This enables you to inspect any element on the front end and find the CSS rules which style each HTML element.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Natasha

Please copy the Print Style section from the sample theme into the style.css in your Cafe Pro child theme.

---

Tutorials for StudioPress Themes.

[natasha]

Thanks Brad that's what I did after seeing that warning message in the sample theme css. I've spent a lot of time learning about the inspector, identifying the css elements, names of classes etc spent hours adjusting the print css but all to no avail. I can't believe something this simple is proving so difficult to achieve. In the meantime I've told the client to copy just the text and paste it into a word processor and print from there. Bit clunky but at least that works!

[Brad Dalton]

I would use a plugin until you work out how to use CSS.

---

Tutorials for StudioPress Themes.

[Author]

Posts