How to get wp-print to display Nextgen nicely!

wordpress-3-1There are many great WordPress plugins that every site owner should consider using. Of the plugins, wp-print and Nextgen Gallery will greatly enhance any site. However, wp-print does not display the Nextgen Gallery the way that I would like it to. Instead of displaying the images in a row as displayed on the site, the printable version is a long column of images. This makes for a very long printable document that really does not look good at all. After many hours of frustration, I figured out a resolution to this.This is a printable page as wp-print has prepared it. Notice the column of images.

wpprintfix01

To resolve this annoyance, I took a look at the generated code for the printable page. There, there are references to a div class “ngg-gallery-thumbnail-box” for each of the gallery images.

I opened the original print-css.css file provided with the wp-print plugin. The version that I am using is WP-Print 2.40. There are “obviously” no references to the div class “ngg-gallery-thumbnail-box”.

I also opened the original nggallery.css plugin provided with the nextgen-gallery. The version that I am using is 1.01. I selected the entire section for the Gallery style.

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
	overflow: hidden;
	margin-top: 10px;
	width: 100%;
	clear:both; 
	display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.ngg-gallery-thumbnail-box {
	float: left;
}

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 5px;
}

.ngg-gallery-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	display:block;  
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-gallery-thumbnail img:hover {
	background-color: #A9A9A9;
} 

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

I added the selected css from nextgen gallery to the wp-print-css.css file. The result is a better formatted printable screen.

wpprintfix02